AJAX is a disruptive technology that's changed the way Web apps are developed and used. It allows for interactive pages and sits on the cutting edge of current Web trends.



Although the term AJAX is relatively new, the technologies behind it are not. For many years the ability to change the content of a Web page after it had been sent to the browser had existed - using javascript to change an iframe's src attribute being one technique.


It was the coming together of the XMLHttpRequest object being implemented in the majority of browsers, and the unveiling of GMail and Google Maps that inspired developers to rethink how they build Web pages.




XMLHttpRequest Object

The XMLHttpRequest object is what makes AJAX possible, it makes the asynchronous requests and determines how to handle the results. To create the object in most browsers we use the following code:



var xmlhttp = false;
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
alert("cannot create object");
}

Unfortunately I said "most browsers", which of course means that it doesn't work in IE, so we need a special technique to handle Microsoft's browsers. Just to keep things interesting though, there are two cases that we have to handle depending on the version of the MSXML parser



var xmlhttp = false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlhttp = false;
}

So when combining the two code snippets above, we end up with a piece of code that will create a XMLHttpRequest Object for all major browsers.



var xmlhttp = false;
try {
xmlhttp = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlhttp = false;
}
}
}