Main Content

Ajax - going Asyncronous and what it means

Archive - Originally posted on "The Horse's Mouth" - 2008-09-28 08:09:28 - Graham Ellis

This is the second part of an "easy Ajax" series - for the first installment [link here].

In the first installment, I showed you a "bare bones" example in which Javascript on a browser called up a web service to change information being displayed dynmaically - but I couldn't reall call it Ajax (more "Jax") as it wasn't asyncronous. So

• What does "Asyncronous" mean in this context?

• What is the advantage of using "Asyncronous"?

• How do we achieve it?

What does "Asyncronous" mean in this context?

It means that the request for data to be supplied by the web service is made, but then the browser gets on with other activities rather than waiting for the response which could - in some cases - take a few seconds to arrive if it involves a complex SQL query or a lot of information being transferred.

What is the advantage of using "Asyncronous"?

It means that the user can continue to complete forms and interact with the display in his browser without it appearing to lock up while a response from the server is awaited, and it means that several requests can be active at the same time.

How do we achieve it?

We change the flag on the XMLHttpRequest object's open method to true to indicate that we want to have the send method return to us right away rather than awaiting completion:

rqo.open('GET',qry,true);
rqo.send(null);

We add in an extra assignment - setting the XMLHttpRequest object's onreadystatechange method to indicate a callback to a function:

rqo.onreadystatechange = handlelang;

And finally, we supply that callback function:

function handlelang() {
document.getElementById("result").innerHTML =
    rqo.responseText + " (via Ajax)";
}

IF you are using a compliant browser, that should be all the changes you have to make to yesterday's example; the complete source code is available [here], the web service source - unchanged from yesterday's example - [here] and you can run the code [here].

But you note I said "IF" - and it's a big if! Unfortunately, there are browser specific issues involved with most Javascript applications, and although the code I have given you will work, and work well, on most modern Mozilla based browsers such as Firefox (and Safari and Iceweasel and so on), it will NOT work on Internet Explorer, nor on older browsers, nor on browsers where the user has elected to turn Javascript off. And we haven't worked out what we should do if the web service isn't available when we want it either!

We can fix the big issue of Microsoft's Internet Explorer, by sensing which browser we're using and adding in conditional code that uses their alternative objects ... but that going to obfurscate the code, and is something I'll come back to in my third posting in this series, where I'll also look at the return status from the request so that we can deal with slow (or stopped or gone away) servers cleanly.