Ajax (An Introduction)

AJAX Introduction

AJAX stands for Asynchronous JavaScript and XML.
If you are new to web development than, a question can arise in your mind that why do we require AJAX when we already have HTML, JavaScripts etc... Now let me clarify you, suppose you are having a web page with server side scripting (that can be in ASP, JSP, PHP), in that case to make little change we will have to reload whole page (Whole page will be rendered).
Whereas AJAX allows you to reload the only required part of the page which is required changes. So we can say AJAX allows partial rendering of the page.

How AJAX Works


The basic functionality of AJAX is shown below in the figure:

The AJAX object is basically object of XMLHttpRequest.

Creating AJAX Object (XMLHttpRequest Object)

As I have already told you that AJAX request is actually a XMLHttpRequest (This is Used only web browsers IE7 or above, rest versions uses ActiveX objects according to the version).
How to create object


var xmlHttp;
try
{
xmlHttp = new XMLHttpRequest();

}

catch (a)

{

var b = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];

for (c = 0; c < b.length; c++)

try

{

xmlHttp = new ActiveXObject(b[c]);

}

catch (d) { }
}

Send AJAX Request to Server

There are two methods which are used to send AJAX requests to the server, these two methods are listed below:

1. Open([MethodType],[RequestURL],[Async]): Method type is either "Get" or "Post", RequestURL is the URL of the page to which the request will be sent & Async is boolean var which says whether it is Asynchronous or not.
2. Send(): This method is used to send the request to the server.

Example

xmlHttp.Open("Get","sample.aspx",false);
xmlHttp.Send();


AJAX readyState and Status

In AJAX there are 5 ready states which tell about the state of Ajax Request. These states are listed below:

• 0 : Request has not been initialized yet.
• 1 : Connection to server has been established.
• 2 : Request has been received.
• 3 : Request is under processing.
• 4 : Response to ready.

Whenever readyState of the AjaxRequest is changed than an event called "onreadystatechange" is being raised.

Similarly, there are various status in which the Ajax Request can be, while establishing connection or processing. these status are as followed

• 200 : Request succeeded & the information is returned in the Response.
• 301 : Moved Permanently: Requested object has been moved permanently; new address is specified in Location: Header of the response message.
• 400 : Bad Request : A generic error code indicating that the request could not be understood by the server
• 404 : Page not Found: The requested page does not exists on the server.
• 505 : HTTP Version not supported.

Retrieving AJAX Response

Now as we have discussed above our response will be ready when readyState is 4 and Status is 200, only in that case we will have our complete response, and these status can be checked in the "onreadystatechange" event (as discussed above). To get response there are two members of XMLHttpRequest (responseText & responseXML). So to fetch the response we must set a function to the onreadystatechange event before the request is sent. example is shown below:

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{
alert('Ajax Response is:' + xmlHttp.responseText;
}