Theres a craze on the web at the moment, and that craze is named AJAX.
Whats that? Well, according to some people, its a technology thats going to
redefine the web. Just how many times have you heard that statement.
The classic web application model works like this: Most user actions in the
interface trigger an HTTP request back to a web server. The server does some
processing -- retrieving data, crunching numbers, talking to various legacy
systems -- and then returns an HTML page to the client.
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 doesnt 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 webmail application, and its 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 youve 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: its certainly good for
some applications where users would otherwise have to submit data over and over
again, but its 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, dont
be afraid of AJAX, but make sure you use it when you find a project thats
well-suited to asynchronous transfer - dont go trying to fit AJAX to a website
that doesnt suit it, just because you think its cool.
