How Ajax works?

How Ajax works?

Ajax stands for Asynchronous JavaScript and XML, is a group of interrelated web development techniques used on the client-side to create interactive web applications or rich Internet applications. The best example you can see the effect of Ajax is your GMAIL, when you click any link there it won’t refresh the whole page, the particular content area only will get refreshed. They wont even use any IFrames. It is a technology invented ny MS and later it is made as a standard and an open source technology. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.

It is not a new language to learn. If you know java script and html, it is enough. Before using that, we must create object for it. It differs for browsers, mainly for Firefox and Internet Explorer.
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

Now we need to create a callable function and also an onreadystatechange handler.

function getdetails()
{
xmlhttp.open(“POST”,”data.php”);
xmlhttp.onreadystatechange=ajaxfunc;
xmlhttp.send(“name=random&id=4247”);
}

function ajaxfunc()
{

if(xmlhttp.readyState==4)
{
alert(“Details: “+xmlhttp.responseText;
xmlhttp.close;
}
}
/* Each state has different description:
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
*/

The xmlhttp.open method call opens a connection to the mentioned page, the first parameter is POST or GET depending on the method you want to use. There is only one difference between get and post method. If you use get method, the data you are passing will be displayed in your browser address bar. But it wont be displayed if you are using post method. The second parameter is the filename of the page relative to the current directory. In the next line, whenever it goes through a statechange to call a certian function, the handler. xmlhttp.send passes variables to the script that we are calling.

The handler function gets called every time that xmlhttp changes state. We have the if statement so that it will only execute when readyState==4 (4 is completed). The last statement of course retrieves the data from the xmlhttp object. If you are getting most types of data you should use the responseText property, for actual XML data use the responseXML property. The next statement just closes the socket connection establishment.

Leave a Reply

Your email address will not be published.