Learning AJAX

AJAX or Asynchronous Javascript And XML is a term coined with modern web programming is of much use nowadays. But what is AJAX really? How it came and what it does? In short it is the technology which allows web browser to fetch a part of data from the server without affecting the entire display and thereby not refreshing the page. It is asynchronous as it does not affect the current display and behavior of the page and interact with the server asynchronously.

The History: In 1998, Microsoft introduced Remote Scripting and created XMLHttpRequest Object in Internet Explorer version 5 and first used it in Outlook Web Access supplied with Microsoft Exchange server 2000 release. In 2003 Netscape published an article where the concept of a model introduced that enable an web application to run in a single page. The technique introduced there was advanced than IFRAME introduced in 1996.

The Technology: AJAX uses XMLHttpRequest object instead of HTTP request object. This request object sends or receives data packet to and from the server in the form of XML through HTTP protocol. The request is handled by Javascript from the client’s (Browser) ends. There are other alternative methods to this techniques and these are

• Invisible inline frames
• Remote Scripting
• Netscape’s LiveConnect
• Microsoft’s ActiveX
• Microsoft’s XML Data Islands
• Adobe Flash Player
• Java Applets
• Image wrappers
• DOM metascripting

A typical example of XMLHttpRequest Object is

var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0");

The request object creates a new XMLHttpRequest object if it is available else, it creates a new ActiveX Object.

request.open("POST", url, true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Then the created request object opens a new request where the request type is mentioned as well as the request header is set. The open method accepts the following parameter.
Object.open(”GET/POST/HEAD/PUT/DELETE”,

URL,async(true/false),username,password).

request.onreadystatechange = function(){
if (request.readyState == 4 && request.status == 200) {
if (request.responseText){
customcallbackFunction(request.responseText);
}
}
};

Onreadystatechange checks for the status of the request. The following value it sends

• 0 = uninitialized - open() has not yet been called.
• 1 = open - send() has not yet been called.
• 2 = sent - send() has been called, headers and status are available.
• 3 = receiving -
• 4 = loaded - Finished.

If Readystate is 4, that is the request is loaded then we can pass a custom call back function which can take care of the rest of the programming.

More Articles.

1. http://en.wikipedia.org/wiki/Ajax_(programming)
   
2. The XMLHttpRequestObject
3. Wikipedia XMLHttpRequest
4. Ajax Tutorial