Example:1 AJAX Source Code Explained

Example:1 Source Code Explained

Source Code Explained:

To get the Element of a ID ----> document.getElementById("hello");

the above code uses to get the element id with hello.

Step : 1

<div id="hello"></div>

Step : 2

The document.getElementById("hello"); 

Used to get the id name of the particular div. 

Step : 3

var x =document.getElementById("hello");

Storing the retrieved document id to variable 'x'

Step 4: 

 x.innerHTML="";

innerHTML method in java script used to display a Dynamic Content.

For Example:

x.innerHTML="<b>Kannan</b>";

Will result in display a Bold word as Kannan.

Step 5:
Checking for Old Browser and New Browser

if(window.XMLHttpRequest)

{

xmlhttp = new XMLHttpRequest();

}

else

{

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

}

Step 6:

xmlhttp.onreadystatechange=function()

{

// code

}

There are five Ready states in Ajax as i mentioned before. 

onreadystatechange is the method which will executed if we get successful request from server.

Step 7:

xmlhttp.open("Post","http://ajaxtutorialonline.blogspot.com");

 The above coded used to open a connection.
It must be given in all ajax codes. Else it won't Work.

Note :

Inside xmlhttp.open i gave POST method instead of that you can use GET. 

And you have to the link of your own site which you going to put code. 

I mentioned http://ajaxtutorialonline.blogspot.com because i coded the program for this site. If you put your code in any website you can put your own website or domain name ex : http://example.com

Step 8 :

The send method will send the data. If you not retrieve any data you can simply give null.

xmlhttp.send();