Wednesday, July 30, 2014

AJAX: Asynchronous JavaScript and XML Tutorial 

What is AJAX?

AJAX Stands for Asynchronous JavaScript and XML is language used for making interactive web application. It is used at client side to make asynchronous web application.

AJAX allows client to interact server asynchronous (client request processed in background) so due to this it make web application faster and save bandwidth which required to reload the whole page and time.


AJAX is used to exchanging the data with server and updating the part of the page without reloading the whole page. AJAX is a technique of creating fast and dynamic web page.

Example of AJAX: The some sites like Gmail, facebook and Google extensively use ajax to save the bandwidth.

AJAX code lies in html and javascript. So no need to write separate file for ajax code. In AJAX, XML is used to exchange the data over server. 

Classic websites which do not use ajax need to reload whole page if some content of the page changes.

The flow of AJAX application is as follow:

Step 1:
At Browser Side :  when event occurs browser creates an XMLHttpRequest object and then it send and HttpRequest to the server

Step 2:
At Server Side : Server processes the HttpRequest and create the response and send it back to the browser

Step 3:
At Browser Side : Browser receive the response and process it back using javascript and then it update the page content.

AJAX Example :
    This is sample AJAX example. In this, when we press button named change content then the content of myDiv div changes without refreshing the whole page.

Let AJAX change this text

Now we will see what the above code of ajax says:

In the above code we have written our ajax code within java script and html code. In html we have taken one button with label "change content". We click this button the function from java script get called and  that function runs the ajax code.

In this ajax code, we first create the xmlhttp object to exchange the data over server asynchronously. To send data using xmlhttp we need to create first open the xmlhttp object using either GET method or POST method as a parameter to open() method and after that send the request using send() method.

we create the xmlhttp object as below

code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();

code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

and after that we open and send xmlhttp object as below"GET","ajax_info.txt",true);

In above open method, the first parameter is method i.e. get or post and second parameter is file or url of the server and third parameter is true or false. True means sent xmlhttp request asynchronously and false means sent xmlhttp request synchronously.

After getting xmlhttp request to the server it processes the request and sent back response. So client check the xmlhttp.readyState==4 and xmlhttp.status==200 if both are true then the client gets the response from the server. So client gets the response text from server using xmlhttp.responseText and then it changes myDiv content with response text.

So in this way using ajax the client changes the part of the page content without refreshing the whole page. Please make the comment on this tutorial so i will be back next time with some good one. Thanks for reading this.


Post a Comment