How Ajax works?

How Ajax works?

 

Simple process to call Ajax Request –

Generally, To perform an Ajax request to Server and get back some response as result from server , we have to follow some steps –

1. Suppose some action need to perform on an click event of button or link or on pageload or onchange or blur event of form’s elements of page .
2. Events calls a user defined JavaScript or jquery method to perform ajax operation and it sends the Http request via URL to server using Ajax Object .We can also pass the parameters to server with URL query string.
3. Server receives the parameter from ajax or Http request and process the request by executing the mentioned action (Servlet or jsp ).After execution, server prepares the response data to return as HTTP response Object against ajax request if required .
4. Server post back or sends  the produced result as HttpResponse data to Client or Webpage from where  request arrived .
5. Now , Calling method receives the response data in the form of XMLHttpResponse object from server, then after some manipulation if required , updates the webpage by displaying the response data on webpage .

The XMLHttpRequest Object – The heart of Ajax  is the XMLHttpRequest object  . The XMLHttpRequest object is nothing but a Javascript object XMLHttpRequest object which is  responsible for the Ajax Operation .As we know Ajax is client side scripting , it totally depends upon browser . If We say browser doesn’t support Ajax , it means  browser doesn’t able to create the XMMHttpObject or Ajax Object .

 All modern browsers (IE7 and above, Firefox, Chrome, Safari, and Opera etc.) have a built-in XMLHttpRequest object. If we are using IE 5 or IE6, then ActiveXObject will be used for server communication to send ajax requests.

To create an instance of XMLHttpRequest, simply do this:

var xmlhttp = new XMLHttpRequest();         // For all modern browsers

Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object .So for them we need to create ActiveX Object  like

var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");                      // For IE5 and IE6 browsers

We need to write code as  if the browser supports the XMLHttpRequest object then create an XMLHttpRequest object, if not then create an ActiveXObject.

Like in below code ,

var xmlhttp;

 

if (window.XMLHttpRequest)

{

//if the browser is  IE7 and above or  Firefox or Chrome or Opera or Safari etc.

             xmlhttp = new XMLHttpRequest();

}

else

{

// if the browser is  IE6, IE5

             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

 

In above code , we check  that  whether browser supports Ajax or XMLHttpRequest object or not .if supports then xmlhttp will be instance of  XMLHttpRequest and if doesnot support then xmlhttp will be instance of  ActiveXObject .

How to send a request to a server ?

To send request and set request parameter, we mostly use the open() and send() methods of the XMLHttpRequest object.

open( form method type, URL, asynchronous/ synchronous) -XMLHttpRequest object must be initialized through the open method .see the code  -

                                                        xmlhttp.open("GET","checkEmail.jsp",true); 

This method has three parameters . 1^st  one  specifies the type of form method request (GET, POST etc.), 2^nd  one specifies the URL of server , and  3^rd  one which is either true or false , specifies  whether  the request should be handled asynchronously or synchronously. In short, true means asynchronous request and false means synchronous.  The  last parameter is by default  asynchronous i.e, true  and this parameter is optional .

For example,

                                                        xmlhttp.open("GET","checkEmail.jsp); 

This is also valid because browser by default set the 3^rd parameter as true i.e., asynchronous .

 The meaning of asynchronous and synchronous is already defined in earlier pages.

We can also pass the query string or request parameter to server in url as

                        xmlhttp.open("POST","checkEmail.jsp?user=manoj&code=MG",true); 

                                                                                        or

            xmlhttp.open("GET","checkEmail.jsp?user=manoj&code=MG"); 

 

note – must remember that in case of “GET” , response may get cached result. So, better to use POST instead of GET specially for database related operation .

The onreadystatechange property  -

XMLHttpRequest.onreadystatechange Returns a EventHandler that is called whenever the readyState attribute of XMLHttpRequest object changes .

 

In another word we can say that XMLHttpRequest.onreadystatechange stores the result of a function /event(or the name of a function) to be called automatically each time the readyState property changes .

 

The onreadystatechange EventHandler  fired an event every time the readyState changes.

The  XMLHttpRequest.readyState property holds the current state the XMLHttpRequest object is in which state i.e, whether request is in process state or completed state etc. When  we send a request to a server, we may need to perform some actions based on the response.

 For example ,  when a request is processing, then busy or loading image will be displayed in updatable section .

Three main properties of XMLHttpRequest object .

1) readystate - The readyState property always defines the current state the status of the XMLHttpRequest object.

See the readystate property’s Code and description –

Code	Meaning	Description
0	UNSENT	The request is not initialized or Unsent to the server .
1	OPENED	Client -server connection has established But send() has not been called yet.
2	HEADERS_RECEIVED / request received	Request has been  received by server .send() has been called, and headers and status are available .
3	Processing	Request processing has been started .
4	DONE	Request processing is complete and response is ready .

 

For example ,

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4)
    {
            //some task
    }
  }

2) status - When request is completed and response is ready then returns the status as a number .

See the XMLHttpRequest .status statusText property’s Code and description –

Code	Meaning	Description
200	Ok	When request is completed and response is ready then status will be 200
404	not found	When page not found then status will be 404

 

Returns the status as a number (e.g., 404 for "Not Found" and 200 for "OK").

For example ,

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       //some task                               
    }
  }

3) statusText- When request is completed and response is ready then returns the status as a text/string (e.g., "Not Found" or  

                         "OK").

 

How to receive the response from a server against Ajax request?

Server can sends the response in the form of text, arrayBuffer,blob,document,json etc . in most of the cases,we get Response as  text  or XML or json.   string is the default response type .

To receive the resultant response from a server, responseText or responseXML property of the XMLHttpRequest object is used.

responseText  - To receive the response  from server in the form of  string/text .

For Example –

                                                        var result = xmlhttp.responseText;

responseXML – To receive  the response from server in the form of XML .

For Example –

                                                        var  xmlDoc=xmlhttp.responseXML;

 If the response from the server is XML, and you want to parse it as an XML object.