Step by Step Ajax tutorial for Beginners
Ajax is said to be Asynchronous Javascript and XML. Its a latest technology in Web Application. A programmer must know about this technology to survive in his or her IT field.
Let we discuss briefly about ajax.
What is AJAX?
Ajax (Asynchronous Javascript and XML ) is a technology used to load or retrieve the data from server without reloading or refreshing the Web page. Its a very good option in programming. Read more
Example of Ajax:
Google uses this ajax in each and every page. 
For example if you type some words in Google search box it shows some list of suggestion keywords. Listen how Google dynamically displaying the data when a user types in it, without reloading or refreshing the page?. 


Google displays Search result for keyword  Kamalakannan

How the content has been displaying the content dynamically without reloading or refreshing the page? All i say is AJAX. Let we move into Tutorial.
Browser Support for AJAX:
Ajax can run in all type of browsers but their is a conflict in older (IE 5 and IE 6), and newer browsers (Mozilla, Netscape, IE 8, Chrome, Safari, Opera).
It can be rectified by checking the older and newer browser and implementing the below code.
For New Browsers: xmlhttp=new XMLHttpRequest();
For older Browsers: xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
Code for Checking the older and Newer Browser:
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 
The code above tells that it first it gets the browser windows XMLHttpRequest object if it present then its a newer browser. If it does not get the browser XMLHttpRequest object then its an older browser.
If its older browser then it create an ActiveXObject to xmlhttp.

Ajax onreadystatechange event:

xmlhttp.onreadystatechange = function() or function name()
{
// instructions to process the response using five readystates 
};                   
The above code xmlhttp is the instance variable which we have created above. We have assigning the onreadystatechange event into the xmlhttp object. So that it will load the function and process the response inside the braces and return the value to the function



Ajax has five readystates:
Uninitialized (request to server is not initialized) ---  0
Loading (Connection to server Established)      -----  1
Loaded ( request to the server has been loaded ) --  2
Process ( Request has been in process) --------------   3
Request Finished(Response is ready) ---------------    4

I know very well you are confused. Hm mm don't worry I'll explain it below
Ready state is the very important thing in ajax why?
B'coz if you creating a web application which contains lot of  backend ( Database). 
For Example.
If you have country field in your website which has list of country names and then you having the State field below that country field. If a user selects the particular country then it have to fetch the data from server and then it have to displays the list of states for particular country. 
Please note down:
Whenever user select the country the request has been sent to server on that time we have to display some data in the state field that its on process how was it possible. So here we going to use readyStates.
If the ready state is 3 then we going to display that state is loading after complaetion of loading the database from server the readystate goes to 4 so we going to display the list of states in the state filed.
When user selects India the request has send to server so its loading state i mean ready state is 3.



Country -----  India

State---------  Loading...
(after getting data from server it should displays the list of state i mean the ready state is 4)

State--------   Tamilnadu
                       Kerela
                       Andhra
                       Karnataka
                       And so on....
I think you have understood little bit.





11 comments
  1. Priya May 25, 2010 at 11:36 AM  

    This one is very informative for us.

  2. Anonymous June 22, 2010 at 3:25 PM  

    http://ajaxtutorialonline.blogspot.com is very good site for learning ajax step by step for Beginners

  3. Anonymous December 15, 2010 at 2:41 PM  

    thak yuo very much

  4. VIVIN frnd forever March 15, 2011 at 6:02 PM  

    Super keep posting....

  5. abdul April 4, 2011 at 5:53 PM  

    great job na..

  6. Rahul September 2, 2011 at 3:21 PM  

    Nice Starting

  7. Vikas Sharma September 27, 2011 at 11:23 AM  

    Nice information & explanation..

  8. Himanshu Mittal November 25, 2011 at 3:25 PM  

    hmm..its good way to explain AJAX for beginners....i really got it..
    thank you for giving such a nice explanation of AJAX

  9. Himanshu Mittal November 25, 2011 at 3:26 PM  

    hmm...its very good way to explain AJAX for beginners..i really got it..
    Thank You
    Regarding
    Himanshu

  10. Python Fundamentals April 18, 2012 at 4:12 PM  

    indeed a good post enough to teach me so i think the best post i have ever studies in ajax .many thanks .

  11. Rama April 19, 2012 at 1:22 PM  

    Its so useful..Please keep on posting further concepts of AJAX...