Ajax enabling crusty legacy webapps with Prototype

With all of the hype around Ajax it’s easy to think you might need an MVC framework with baked in Ajax support like Rails ActionPack or JBoss Seam to make Ajax easy. However, libraries like Prototype (which is what Rails uses) make it so easy that it’s a snap to Ajax enable even the crustiest legacy web application!

Let’s take a look at what it takes to put a simple unordered list on a page with a refresh button to refresh the list without doing and page reload and then we’ll spruce it up a bit:

1. First we’ll need a URL that should return the content of the list and say we’re working in a crusty old CGI environment so we’ll call it /cgi-bin/friends_online.cgi and say it returns the list of your friends that are online:

<ul>
<li>Mr Bigglesworth</li>
<li>Austin Powers</li>
</ul>

2. Now on the page where we want to include the list of our friends that are online we’ll need to include prototype.js in the head section of the page:

<script src="/js/prototype.js" type="text/javascript"></script>

3. Let’s look at how simple this can be:

<div id="friends_online">
... friends online ...
</div>
<a href="javascript:var x=new Ajax.Updater('friends_online','/cgi-bin/friends_online.cgi')">Refresh</a>

When you hit the refresh button the contents of the friends_online div will be replaced with the output from friends_online.cgi, it’s that easy! Now let’s spruce it up a bit.

4. Since we’re not concerned with server load in this example we’ll populate the dynamic list using Ajax the first time the page loads as well. While we’re at it let’s also hide the Refresh button and friends_online div while the refresh is happening and display an animated loading gif. Here’s what that would look like:

<div id="friends_online"></div>
<img id="loading" src="loading.gif" alt="Loading"/>
<a id="refresh" href="javascript:friendsOnline()">Refresh</a>

<script type="text/javascript">
function friendsOnline() { 
	$('friends_online').style.display = 'none';
	$('refresh').style.display = 'none';
	$('loading').style.display = 'inline';
	new Ajax.Updater('friends_online', '/cgi-bin/friends_online.cgi', { 
		parameters: 'key=value&key2=value2',
		method: 'get',
		onComplete: function () { 
			$('friends_online').style.display = 'block';
			$('refresh').style.display = 'inline'; 
			$('loading').style.display = 'none'; 
		}
	}); 
}
Event.observe(window, 'load', friendsOnline, false); // This calls friendsOnline on page load
</script>

I put in the parameters just to illustrate how to pass parameters with the URL. If I were to take this one step further I’d put the Javascript into a separate .js file and use Script.aculo.us Effects.js BlindUp and BlindDown to animate hiding and un-hiding the friends_online div. Hopefully you can see how much power Prototype gives you and how easy it can be to Ajax enable a legacy web application!