AJAX: Should You Believe The Hype?

There's a craze on the web at the moment, and that craze is named AJAX. What's that? Well, according to some people, it's a technology that's going to redefine the web.

What Does AJAX Stand For?

AJAX means 'Asynchronous Javascript and XML'. Adaptive Path came up with the term in this essay: http://www.adaptivepath.com/publications/essays/archives/000385.php. However, the word is really a bit of a misnomer: AJAX doesn't really rely on XML at all, but rather on a Javascript function that happens to be named XMLHttpRequest.

All About XMLHttpRequest.

XMLHttpRequest was originally invented and implemented by a Microsoft team who were working on a web mail application, and it's been around for a while now (since 1999, in fact). The reason it has suddenly come to prominence now is that Google used it in three projects, Gmail, Google Suggest and Google Maps, and in each case managed to create a much better user interface than they would have been able to otherwise.

So what does XMLHttpRequest do? To put it simply, it lets your Javascript go back to the server, fetch some new content, and write it back out onto the page – all without the user having to change pages. This gives a 'smoother' feel to web applications, as they can do things like submit forms without the whole browser window needing to go blank and reload the page. Take a look at maps.google.com now, and notice how you can drag the map around anywhere you want to go without having to reload the page. This would be unthinkable without XMLHttpRequest.

One of the biggest reasons XMLHttpRequest has become popular now is that browsers other than Internet Explorer have started to support it, mainly due to the fuss over its use in Gmail. The function is, by all accounts, a very simple one in technical terms: it was just a matter of someone having the idea.

Getting Started with AJAX.

The first thing to do to get started with AJAX, then, is to create an XMLHttpRequest object in your Javascript code. As ever, Internet Explorer has to be difficult, doing this a different way to every other browser out there. That means that you should use this Javascript code:

var ajax;
onload = function () {
if (window.ActiveXObject) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} else {
ajax = new XMLHttpRequest;
}
}

What you've done there is declared ajax as a global variable (usable by all functions), and then created a new AJAX object when the page loads, either using ActiveX for Internet Explorer or the XMLHttpRequest function in other browsers.

The next step is to write two more functions: one to get data from a URL, and one to handle the data that comes back.

function getText(url) {
ajax.open("GET", url, true);
ajax.send(null);
}

ajax.onreadystatechange = function () {
if (ajax.status == "200") {
// do things with retrieved text (in ajax.responseText)
}
}

All you need to do then is call getText from the relevant part of your code with a URL you want to get text from, and put that text wherever you want it to be in the state change function.

The most powerful thing about this approach is that the URL you send to the server can contain variables, using the old REST (question marks and equals signs) way of doing things.

That means that, using the code above, you can easily send a request to ajax.php on your server, and include the current value of, say, an input box for a username on a registration form. The ajax.php script checks whether that username is already in use, and then sends either '1' or '0' as its only output. All you would then need to do is check whether ajax.responseText was 1 or 0, and change the page accordingly, preferably using getElementByID.

Should I Use It?

The question remains over just how useful this is: it's certainly good for some applications where users would otherwise have to submit data over and over again, but it's not much use for smaller ones. AJAX coding has a tendency to take a lot of time, especially the first time you try it, and this is often time that could have been better spent on other parts of the project. In short, don't be afraid of AJAX, but make sure you use it when you find a project that's well-suited to asynchronous transfer – don't go trying to fit AJAX to a website that doesn't suit it, just because you think it's cool.