Ajax = Asynchronus Javascript And Xml.
Let's start Ajax with a simple example:
var ajaxObject=null;
function getAjaxObject(){
var ajaxObj=null;
try{
ajaxObj=new XMLHttpRequest();
}
catch(e){
try{
ajaxObj=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
ajaxObj=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return ajaxObj;
}
function calledMethod(){
if(ajaxObject==null)
ajaxObject=getAjaxObject();
if(ajaxObject==null){
alert("Your browser do not support this functionality");
return;
}
var url="http://moneycontrol.com/rss/latestnews.xml";
ajaxObject.onreadystatechange=stateChanged;
ajaxObject.open("GET",url,true);
ajaxObject.send(null);
}
function stateChanged(){
if (ajaxObject.readyState==4){
alert(""+ajaxObject.responseText);
}
}
Above code is javascript code. In which callMethod function is the main function to be called from the html events (like button onClick, text onChange). The callMethod function takes care of every phase of the client server communication. To expalin it better, ajaxObject is a global variable meant for holding the Ajax object provided by the browser.
getAjaxObject is a function which returns a browser communicating object, which actually does the communication. getAjaxObject method first tries to create the new instance of XMLHttpRequest, which is an inbuilt object for all most all browser except internet explorer. So new XMLHttpRequest(); code throws an exception when you try to execute this code from an internet explorer browser. Inorder to enable the Ajax functionality internet explorer has it's own ActiveXObject called "Msxml2.XMLHTTP". When the browser catches an exception of not able to create XMLHttpRequest object, code will try to create an instance of the IE Msxml2.XMLHTTP, through new ActiveXObject("Msxml2.XMLHTTP");. For the latest browsers code upto this segment is enough. But for the systems having older editions of internet explorer the above ActiveXObject may through error. To fix this older version of IE has another ActiveXObject called Microsoft.XMLHTTP, the code tries to create the instance for this ActiveXObject through new ActiveXObject("Msxml2.XMLHTTP"); when the creation of above two objects throw exceptions. If all the above 3 instance creations throw exception, it means that your browser do not support Ajax functionality.
Back to the callMethod function where you get the AjaxObject. Now set URL for which you want to make a call. That means the URL from which you want to get the results. Here we chose an xml file which is located in some other domain called www.moneycontrol.com. You can place any url here depending on your requirement.
The next line in the function callMethod sets a property to the ajaxObject, called onreadystatechange which gets rised when ever there is a change in readyState property of ajaxObject and handles the response from the requested URL. In this code the above the onreadystatechange property is set to stateChanged function.
stateChanged is called whenever there is a change in readyState property of ajaxObject. This function verifies the readyState property of ajaxObject and if it is 4, it means that the ajaxObject has the response ready. The ajaxObject have totally 5 readyStates ranging from 0 to 5. Internally these numbers specify the state of ajaxObject. They are:
0 -> The request is not yet initialized.
1 -> The request has been set up. This means the URL is assigned to ajaxObject.
2 -> The request has been sent. This occurs immediately after completion send method.
3 -> The request is in process. This occurs after send method and before the response from the server.
4 -> The request is complete. This means the ajaxObject got the response.
After verifying the readyState property for 4, the code just alerts the content that has come as response. responseText is the property of ajaxObject which prints the text in response. ajaxObjectalso have a property called responseXML which deals with the xml data in the response in document object model(DOM) format.
Once again back to the callMethod function. open(), send() are two methods of ajaxObject where open prepares the ajaxObject to send the request by setting the properties like method to send data (eg: GET, POST), URL (to which the request is to go) and finally a boolean to specify whether the request should go asynchronously or not. And send makes the request to the given URL.
