AJAX code

Too much of theory ? well, lets move on to our first practicals. Like I said, AJAX uses simple requests and responses to get the job done. Updation happens without the need to reload the webpage.

STEP1 : XMLHttpRequest Object Creation

Firstly lets create an object of the XMLHttpRequest type.

var xmlhttp = false; // variable xmlhttp
//Checking whether browser is the latest version of IE i.e > IE6
try {
//If yes, create object of XMLHttpRequest
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
alert("You are using the latest IE browser");
} catch(e) {
//IF not latest browser i.e < IE6
//Checking if browser is a old version of IE
try {
//If yes, create object of XMLHttpRequest
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
alert("You are using an old version of IE browser");
} catch(e) {
//If not both, then it is a NON-IE Browser
xmlhttp=false;
}
}
//Checking if browser is a non IE browser
if(!xmlhttp && typeof XMLHttpRequest != 'undefined') {
//Creating an object of XMLHttpRequest in non-IE browsers
xmlhttp = new XMLHttpRequest();
alert("You are using non IE Browser");
}

If you read through the above code, you`ll notice that the code is trying to find browser is making a request to the page ?! and respectively trying to create an object of the XMLHttpRequest. (The method of creating object of XMLHttpRequest varies for different browsers)

In Internet Explorer browsers we have to create an object of ActiveXObject – Msxml2.XMLHTTP (For IE6+) or Microsoft.XMLHTTP (For IE5.5 and those IE supporting Javascript version <5)

In Non-IE Browsers we can directly create object of XMLHttpRequest type by typing var xmlhttp = new XMLHttpRequest();

After creating an object of the XMLHttpRequest type, we are ready to rumble !

STEP2 : AJAX FUNCTION

The following code tells you what to do with the created object.

function ajaxRequest(scriptPage, elementID) {
var obj = document.getElementById(elementID);
xmlhttp.open("GET", scriptPage); //Opens connection to the scriptpage using GET response method
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}

The above javascript function code has 2 parameters i.e the HTML element ID(where to output the result) and the link to the script page(which sends the results back). It then attempts to open a connection to the server page using the open() method of the XMLHttpRequest object. If the readyState property returns a 4 (complete) code and the status property returns a 200 (OK) code, then you can load the response from the requested page (or script) into the innerHTML element of the passed-in object after you send the request.

Basically, in short, this function creates a new XMLHttpRequest object and then uses it to call a script and load it into the appropriate element on the page. *sigh*

Now that you know how to add AJAX support to you web page, lets try using it