An Introduction to AJAX

AJAX is an acronym that stands for "Asyncronous Javascript And XML". For those less technically inclined, AJAX is a technique, not a product or a brand.

AJAX techniques are used to allow a website to communicate with the server without having to load a new page into the browser. By communicating with the server while the page is still loaded, data can be retrieved and dynamically inserted into the existing page. In the same vein, elements can be removed from the page, or altered as required.

By allowing a page to communicate with the web server without being reloaded in full, it is possible to create faster and more responsive user interfaces than is possible using the traditional model whereby a new page is loaded with each request by the user.

AJAX techniques are starting to enter mainstream use at the moment, however this is due to adoption of AJAX techniques by prominent presences on the web such as Google.

Google's GMail and Google Maps services both employ heavy use of AJAX techniques as part of their user interfaces, and as such, have created much fanfare in the web community.

In actual fact, AJAX techniques have been around for a few years, but simply have not been in widespread use due to both a lack of realisation that such capabilities existed and the fact that a certain percentage of users did not have browsers which supported the technology required by AJAX techniques. This has changed now, and more than 99% of all web users are using browsers that support the required technology.

There are several problems with AJAX in the current web environment, and they are as follows.

First, AJAX techniques break the browser out of its traditional role as a viewer of static pages of content and force it behave as an application platform. As a result, this creates usability issues where the user expects to be able to use the browser's "back" button in order to return to a previous state. Because no new page is loaded when an AJAX call is made to the web server, no information is added to the browser's history and thus the back button cannot be used to return to the previous state that the page was in.

An example of the back button problem was the early release by Microsoft of a product dubbed "Windows Live". This product functioned in a similar fashion to Google's personalised homepage, but relied more heavily on AJAX concepts. When a user performed a web search, the results would be dynamically loaded into a section of the page and the user could start clicking around to explore those results. The problem was when the user finished with a specific result and used the back button to return to the search results. As the results had been dynamically loaded without loading a fresh page, the user would be returned to the original Windows Live page, thus eliminating their search results. A frustrating experience to say the least.

Another downside is the fact that AJAX relies soley upon JavaScript calls in order to function at all. This is a problem because search engines do not pay any attention to the JavaScript on a page, and thus any content which is only accessible via an AJAX call will not be indexed and thus will not be found during a web search.

In particular, AJAX is very good for implementing systems where search engine indexability is not a prerequisite, for example in user interfaces designed for updating the website's content. When updating a website using one of these "content management systems", there can be several hundred requests to the server during a single session, which makes use of AJAX techniques great for creating a responsive, intuitive experience for the user. Despite the potential traps awaiting those lacking an understanding of the web environment, the benefits to websites utilising AJAX can be significant.

Ajax works using an object called XMLHttpRequest. This object is made available to your javascript code automatically by the browser. How you access it depends on the browser you're using. For Internet Explorer you have to do the following:

var myObj = new ActiveXObject('Microsoft.XMLHTTP');

In FireFox and other browsers, there's a native object already, so you can use the following code:

var myObj = new XMLHttpRequest();

We can wrap all of this up in some code that will always give you the right object, regardless of browser. The code is:

if(typeof XMLHttpRequest == 'undefined')
    XMLHttpRequest = function() {
        try { return new ActiveXObject("Microsoft.XMLHTTP"); }
        catch(ex) { return null; }
    }

Now to create an XMLHttpRequest object, you can do it the Firefox way even if you're using Internet Explorer. Ok, so now that we have our object, what do we do with it? First you need to specify which page on your website you'd like it to call. Let's assume you've got some page called getBookTitle.php. This page takes an ISBN as a parameter which you have to post to the page, and it returns the title of the book containing the ISBN.

You can call the remote page either syncronously (Browser freezes until the response is received) or asyncronously (browser keeps going while the call is made, and "calls you back" when it has a response). Seeing as I'm all for a great user experience, let's do it asyncronously, because nobody likes an unresponsive browser.

First we need to define a function that is to be executed when we get a response from the server. When the response is received, the server will call this special function and pass it a reference to the request object, and the response text will be stored in the responseText member variable of the XMLHttpRequest object you created. In addition, you'll need to check the readyState value of the request object, because sometimes your function will be notified every time the request object gets some of the data from the server. We only care when all of it has been received, because that means the call has completed. The value when the call is complete is always 4. Here is the function code:

function ShowBookTitle(requestObject) {
    if(requestObject.readyState != 4)
        return;
    var title = requestObject.responseText;
    alert(title);
}

Now let's open the connection:

var req = new XMLHttpRequest();
req.open('POST', '/getBookTitle.php', true);

'POST' means we're doing an HTTP POST operation (like a form being submitted) rather than using parameters in the URL. This is usually the best way to do things because often you'll want to send a lot of information to the server in order to get the exact information you require, and using the address parameters (the query string) isn't always a very good way to do it.

true refers to the fact that we'd like to do an asyncronous operation. If you specified false, when we actually send off the request, the browser would freeze at that point in the function and the next line would not execute until the call returned with the response from the server.

Now that we've prepared the connection, we have to tell it what function to call when it's finished and then send off the data. The request object has a property called onreadystatechange. This is a reference to a function of your choice that will be called when the request object has some information it wants to let you know about. The function we defined above is what we'll use here. Also, we're going to assume that there's already some information in a variable containing the ISBN for the book. It is up to you to collect that information in whatever way is appropriate for your web page. For example, you might get it out of a text field on your html page.

var someISBN = '123456789';
req.onreadystatechange = ShowBookTitle;
req.send(someISBN);

There you have it. The concept is quite simple, but realistically you'll want a proper Ajax library which takes care of other stuff like reusing request objects, error handling and other relevant tasks. There are quite a few libraries out there. I'd recommend checking out the Ajaxian resources pages for some libraries you can use. Unless you have a good reason to reinvent the wheel, it's usually best to save time and leverage other peoples' hard work.