A Look at AJAX

October 4, 2006

AJAX is one of the newest buzzwords circulating in the field of internet development. We’ve all known it for a long time as a cleaning agent. Its funny how this field loves to use names with other meanings (i.e. SPAM). However, in this case, it stands for Asynchronous Javascript and XML. In short, AJAX is a mix of already-existing technologies to do something which is somewhat new. What is it that is new? Well, have you tried Google Maps or Gmail lately? These web-based interfaces are a lot more interactive than usual. With Google Maps, for example, you can drag the map around without even refreshing your browser. Many web-based email clients are now turning to AJAX to enrich the user experience. The technology allows the web to act more like a desktop application. For instance, the usual method of submitting data to a website is to fill in a form, hit submit, at which point the page refreshes showing some result. The user has to wait for all this to occur. In other words, the user’s actions are synchronized with the server - (1) fill in data, (2) receive data, (3) show result. With AJAX, the user is freed from this normal course of events, and user actions on a page can asynchronously interact with the server right as the user is doing it. There is no form submission required.

How is this happening? Well, as we know, javascript is a client-side programming language. It runs in the user’s browser, not from the server. Javascript has the power to alter the user interface by rewriting elements of the document object model (DOM). So, if you define a form input box, for example, you can modify the value of the input on the fly using javascript simply by accessing the value field of that input box and making it equal to something else. Languages like PHP, Java, ASP, etc all run server-side, meaning all logic for these languages is performed on the server before the page is displayed to the user. Anything the user gets in their browser (including javascript) would be a result of the server-side processing. Well, you can see that with two distinct languages here, server-side and client-side, you have no interaction between the two. This is what AJAX does. It is a bridge between client-side and the server-side, so it will use javascript to trigger server-side code and allow you to modify the user interface on the fly. From the user perspective, the website just reacts instantly (no refresh required). They have no idea that they are interacting with the server in any way.

How Does it Work?

As said above, AJAX is a product of already-existing technology. The basis of it is the XmlHttpRequest JavaScript object, originally developed and introduced with Internet Explorer 5. This object, built into javascript, is the key component which allows javascript code to make requests of the server and process a response without blocking the user. XmlHttpRequest is available in most modern web browsers, so chances are you can use AJAX on your website and any of your site’s visitors will be able to make use of it. With Internet Explorer, the user needs to have ActiveX enabled to make use of XmlHttpRequest.

Now, rather than get into a bunch of coding right here in the newsletter, I will instead link you to the documentation:

Where Can I Use It?

Like any new technology, once you get the hang of AJAX you might feel compelled to use it for everything. But, you can overdo it. There are some applications where AJAX simply is not necessary. That said, many applications could employ it, such as:

Adding an item to a shopping cart refreshes the cart without having to refresh the entire page
Updating quantity in a shopping cart could update the total on the fly without a refresh
When validating a form, you could provide instant validation errors rather than forcing the user to submit the entire form and then get errors only on a fully reload of that form
Edit Site Content without requiring a refresh (vBulletin 3.5 now uses this to edit posts)
Make descriptions pop up when you hover over a page element (Netflix uses this to provide detailed movie descriptions when you hover over a selection)
Fill in geographic information from a zip code

Programming Shortcuts

I know a lot more about PHP coding than I do javascript. I can hold my own with JavaScript, but I have to yank our my reference book fairly often whenever trying to do anything different with the language. Plus, I love shortcuts. So, since I am familiar with PHP, I did some looking around and found some pre-written components written in PHP which can greatly simplify the use of AJAX. Here are some examples:

xajax. Generates javascript wrapper functions for your PHP functions.
sajax. Call remote functions in php from javascript. Works in other languages, too.
ajaxAC
HTML_Ajax. A PEAR package.
PAJAJ. PHP5 Ajax Library.

Conclusion

This article scratches the surface of AJAX. I chose not to get into the guts of the code here because I do not think most of our audience are programmers and it will probably only bore the hell out of you. However, in this intro, you can see a little about this new technology and how it may help you in certain applications on your website. From there, you can either learn more about it on your own or have a web developer look into doing it for you. At the very least, you will not be totally clueless next time you hear some computer guy talking about AJAX. Most likely, he isn’t talking about cleaning the computer case.

Webmaster Crap