Learn Step by step Ajax tutorial for Beginners

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

Read more

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");
  } 

Read more

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.

For more Ajax tutorial and examples visit

http://ajaxtutorialonline.blogspot.com
http://www.tutorialsfree.net