AJAX for the beginner

What is AJAX

I think pretty much everyone knows what it is at this stage, but as usual some people have grave misconceptions about exactly what it is. For example, read and repeat the following "AJAX has nothing to do with Ruby on Rails", they two technologies that complement each other and both got popular at the same time, but they are not technically related. You can write AJAX using Perl and HTML on an Apache webserver. In fact, thats exactly what I did. But back to the matter at hand.

AJAX is the new buzzword for something that has been around for a long enough time. AJAX can also be called Javascript RPC, XMLHTTPRequest or remote scripting. AJAX is shorthand for Asynchronous Javascript And XMLHTTPRequest.

AJAX allows javascript to communicate with server side scripts, without a visible round trip to the server. i.e. your page won't reload with your search results, they'll just appear when they're ready. So this means that your website has no need to move from script to script leaving the user watching an egg timer spinning.

A Simple AJAX Application

Have a a look at this Simple AJAX Application.This application is not impressive, nor is it supposed to be. Its mainly an effort to demo how you write AJAX scripts. There are 3 parts to this application, and I'll talk you through each of them in order. But first, an explanation of exactly what the application does. You go to the "BadMans Contact List", and type in a name. As soon as you press tab the the business card is pulled up. Or to be more precise as soon as you press tab the javascript communicates with a server side script called lookup.cgi, and retrieves the information to fill in the card. The information is a firstname, surname, location of picture, and a catchphrase. Now onto the 3 parts of the application...

index.html

View Index.html There are two things worth noticing in index.html. Firstly, the javascript called ajax.js is included in the head of the document secondly the textfield has an onBlur="performLookup()" attribute. This is the javascript translation of "as soon as tab is pressed", in that tab shifts the focus to the next element, and therefore blurs the textfield. Other than that its just proper HTML, in that the tags are all closed and it follows the standards. If you thinking closing tags and following standards are a silly thing to do, then I can only presume you don't write good html, or good code for that matter.

ajax.js

View ajax.js The source for ajax.js is pretty heavily commented for both our benefits. There are 3 methods in this class. The last one called getHTTPObject is the default AJAX routine that must be included with every AJAX application. So, don't worry too much about understanding it, you'll be copying and pasting it all the time. The method returns a HTTPObject, which is what you use to communicate with server side scripts.

performLookup(); This method gets the value input into the text field (i.e. the contact name), the next line is all important.
http.open("GET", url + escape(name), true);
This begins connection with a server side script (location of which is held in the variable url), and also adds the parameter name. So when executes this translates to...
http.open("GET","lookup.cgi?name=des",true);
At this point the HTTPObject has begun communication with the server side script called lookup.cgi. HTTPObjects have 5 states...

0. uninitialized
1. loading
2. loaded
3. interactive
4. complete

Typically its a good idea to give feedback to the user during an AJAX process, otherwise they may think their web page is frozen. To display a nice loading gif (i.e. ) the following code will do...

1. if(http.readyState == 1) 

2. {

3.  var pic = document.getElementById( 'loading' );

4.  pic.src = "searching.gif";

5. }

The final two lines basically say, call the method handleHTTPResponse() everytime the state of the object changes. and the final line closes communication between the server and the HTTPObject. Heres what that looks like

1. http.onreadystatechange = handleHttpResponse;

2. http.send(null);

handleHttpResponse(); This method removes the loading gif, retrieves the output from the lookup.cgi script, and inserts it to the webpage. Again its reasonably simply javascript...

• Remove the loading gif

  1. if (http.readyState == 4) {

  2. var pic = document.getElementById( 'loading' );

  3. pic.src = "";

  4. }

• Retrieve the data from lookup.cgi.
  To see what lookup.cgi returns visit lookup.cgi?name=des. As you can see it return a comma separated string containing all the information required. Here is the javascript that retrieves the results, splits them into separate values and stores it all in an array called results.

  results = http.responseText.split(",");
• Insert the results into the webpage.
  If you're in any way familiar with javascript this will be very familiar. First name is stored in the first part of the array, and we insert it into the span called 'fname'...

  1. fnametext=results[0];

  2. var fname=document.getElementById( 'fname' );

  3. fname.innerHTML = fnametext; 

That explains all of ajax.js, there is one more part of the application which is so simple it doesn't really need the explanation.

Lookup.cgi

This a very simple Perl script that given one input (a name in this case), and returns a comma separated string containing all the requested return values. You can view the script if you wish. If you are not familiar with Perl, all this does is create a hashtable that associates names with strings , e.g. 'des' is associated with 'Des,Traynor,dez.jpg,Archilpelagos is hard to spell'. The lines beginning with a '#' symbol are comments, so you can re-implement the solution in your language of choice. The important part to note about this script is that it uses CGI to retrieve the input value, it prints out a header, and it only returns the results, there is no extraneous output.

All done!

So thats all there is to AJAX. Some link in your HTML, the javascript itself, and a server side script in a language of your choice. I hope this post, if nothing else. de-mystifies AJAX somewhat. It may motivate you to try writing small pieces of it yourself. I am sure I am have left out some things, or not been clear about certain aspects of it. If you don't understand parts of it, then please leave a comment. Until then, I'll leave 2 worthwhile links that I have read and found useful.

• The original Essay on AJAX
• Ajaxian A well kept blog on AJAX