This post originated from an RSS feed registered with Python Buzz
by Andrew Gross.
Original Post: Simple AJAX With OpenRICO
Feed Title: argv0.net
Feed URL: http://www.pycs.net/users/0000445/weblog/rss.xml
Feed Description: a python programming journal by Andrew R. Gross
New JavaScript frameworks seem to be coming fast and furious these days, and it can be hard to weed out the good stuff from the garbage. Yesterday I came across OpenRICO, an open source version of what was formerly a proprietary framework at Sabre. The OpenRICO page has a bunch of cool demos (I especially dig the lazy-loading AJAX table views for large datasets).
So far, I've only done AJAX stuff with Nevow and LivePage, which is about as easy as it gets. Easy has its downsides though - I found myself writing lots of code in handlers on the server that could (and should) be executed on the client, like keyboard event handlers. Since the all client code for LivePage is either auto-generated or complicated enough to discourage manual edits, I decided it was time to bite the bullet and start writing client-side code that "manually" invokes server methods. Here I present a simple example on how to use OpenRICO and Nevow. While this example is specific to Nevow, it could be easily adapted to any framework or language.
Most of these JavaScript frameworks are just convenience wrappers around the various implementations of XmlHttpRequest, along with helper functions for manipulating the DOM when the results come back. For simple jobs, I could just use the Nevow implementation of these wrappers, but the cooler OpenRICO stuff depends on the OpenRICO implementation, so I use that here, even though this is a trivial example.
On the client, we have to mark up the area on the page we're going to to replace, then register a handler to make the request. We do this in a function that gets called when the page finishes loading, via the onLoad event of the body element.
<html>
<head>
<script src="/static/prototype.js">
<script src="/static/rico.js">
<title>Content Replacement Demo</title>
<script type=text/javascript>
function bodyOnLoad() {
/* Register the div named 'targetDiv' as something that will be replaced
by an AJAX call to the server */
ajaxEngine.registerAjaxElement('targetDiv');
/* Register our event handler and associate it with a method on the
server */
ajaxEngine.registerRequest( 'replaceMe', 'doReplace' );
}
function replaceMe(thing) {
/* Our event handler */
ajaxEngine.sendRequest( 'replaceMe');
}
</script>
<body onload="javascript:bodyOnLoad()">
<a onclick="javascript:replaceMe(this)">click me</a>
<div id="targetDiv">
<p>this text will be replaced</p>
</div>
</body>
</html>
Simple enough, and fairly self-explanatory. The registerRequest method maps a local event handler, replaceMe, to a method on the server, doReplace, which we'll implement now with a nice, reusable AJAXResponse class.
This class takes two arguments, the id of the div to replace, and the content to replace it with. The XML format expected by OpenRICO is in the "ajaxresponse.xml" template, viewable here. We can use this class from within a child_ method of another Nevow page to handle AJAX requests (entire file here):
And that's it. I'm finding that once you get the hang of it, developing web apps in this style is easier than trying to give the illusion of continuity to a bunch of stateless pages, with all the long query strings, session state, and boilerplate HTML that comes along with it.
Previous Topic
