Introduction:Ajax is Advanced Technology for creating dynamic web sites.
Ajax is Asynchronous JavaScript and XML.
Ajax is mainly used for partial page loading not full loading. Ajax check the user values to server at very fast. For ex checking user name availability
Steps for implementing Ajax Technology:1. Create an XMLHttpRequest object.
2. Then using this object, request data from the server.
3. JavaScript will then monitor for the changing of state of the request.
4. If the response is successful, then the content from the data store requested will be returned as response (response can be in the form of a String or XML).
5. Use the response in your web page.
There are two types of Server Response:
---------------------------------------1.responseText ------ get the response data as a string
2.responseXML ------ get the response data as XML data
The responseText Property:
---------------------------Code:
ex:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
The responseXML Property:
--------------------------Code:
ex:
xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
This code is insert into script tag
Code:
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest(); // creating object code for IE7+, Firefox, Chrome, Opera, Safari
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // creating object code for IE6, IE5
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) // monitoring changes
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; // receiving server response
}
}
xmlhttp.open("GET","somefile.txt",true); // ajax access somefile.txt
xmlhttp.send();
State Description:0 --- The request is not initialized
1 --- The request has been set up
2 --- The request has been sent
3 --- The request is in process
4 --- The request is complete
500 --- Internal Server Error,
400 --- Bad Request,
401 --- Unauthorized,
403 --- Forbidden,
404 --- Not Found etc.
200 --- means no error.
HTML Code:Code:
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>