What is Ajax ?

AJAX stands for Asynchronous JavaScript and XML.

AJAX  is a technique that enables a page to request or submit data without doing a refresh or postback.

Using asynchronous requests to access data behind the scenes greatly enhances the user experience because the user does not have to wait for the full page to load.  And since the full page doesn’t have to reload, the amount of data requested from the server can be significantly smaller, which results in even faster response times.

The heart of AJAX is the XmlHttpRequest object, which was originally developed by Microsoft for use in Outlook Web Access with Exchange Server 2000. It was soon adopted by industry heavyweights such as Mozilla, Google, and Apple and is now a W3C standard (http://www.w3.org/TR/XMLHttpRequest/).

An  AJAX request with XmlHttpRequest looks like this:-


 //Instantiate XmlHttpRequest object
 var xhrObject = new XMLHttpRequest();  //Line 1

 // open a new 'GET' request to fetch www.xyz.com's home page
 xhrObject.open("GET", "http://www.xyz.com/", false); //Line 2

 //send the request with no content (null)
 xhrObject.send(null);  //Line 3

 if (xhrObject.status === 200) { //Line 4
 // The 200 HTTP Status Code indicates a successful request will output reponse text to
 //browser's console (Firefox, Chrome, IE 8+)
    console.log(xhrObject.responseText);
 }
 else {
     //something bad happened, log the error
     console.log("Error occurred: ", xhrObject.statusText);
 }

This example creates a synchronous request (the third parameter in xhrObject.open()), which means that the browser will
pause the script execution until the response comes back. You typically want to avoid these kinds of synchronous
AJAX requests at all costs because the web page will be unresponsive until the response comes back, resulting in
a very poor user experience.

But It’s quite easy to switch from a synchronous request to an asynchronous request : by simply set the third parameter in xhrObject.open() to true. 

Now, because of the asynchronous nature, the browser will not stop; it will execute the next line Line -4 (the xhrObject.status check) immediately. This will most likely fail because the request may not have completed executing.  To handle this situation, you need to specify a callback—a function that gets called as soon as the request is processed and a response is received.

Let’s look at the modified code now:

// Instantiate XmlHttpRequest object
var xhrObject = new XMLHttpRequest();

// open a new asynchronous 'GET' request to fetch www.xyz.com's home page
xhrObject.open("GET", "http://www.xyz.com/", true);

// attach a callback to be called as soon as the request is processed
xhrObject.onreadystatechange = function (evt) {

// as the request goes through different stages of processing, the readyState value will change  this function will be called every          //time it changes,  so readyState === 4 checks if the processing is completed

   if (xhrObject.readyState === 4) {
     if (xhrObject.status === 200) {
        console.log(xhrObject.responseText)
     }
     else {
         console.log("Error occurred: ", xhrObject.statusText);
     }
    }
};

// send the request with no content (null)
xhrObject.send(null);

This code is almost identical to the synchronous version, except that it has a callback function that gets
executed whenever the server sends back any information.

Note-You must attach any callbacks before issuing xhrObject.send(), or they will not be called.

Programming is easy….