Syed Abdul Baqi

Archive for the ‘Ajax’ Category

AJAX(Asynchronous Javascript and XML). With AJAX you can create better, faster, and more user-friendly web applications. AJAX is based on JavaScript and HTTP requests. In other words there is no AJAX, if there is no Javascript.

The best way to learn AJAX is to directly dive into code, analyze the code below

var ajaxRequest;
try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
var str = ajaxRequest.responseText;
document.getElementById('result').innerHTML = str;
}
else
{
document.getElementById('status').innerHTML = 'Loading.....';
}
}
query = id;
ajaxRequest.open("GET", "url.php?query="+query, true);
ajaxRequest.send(null);

So have you understood anything, if yes thats very good, if no then you will understand within few minutes 🙂

OK lets analyze the code step by step:var ajaxRequest;just creating a variable to hold XMLHttpRequest object, which we are going to use to make Asynchronous calls to server.
further,

try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser broke!");return false;
}
}
}

in the above code snippet we are creating a XMLHttpRequest object and assigning it to, javascript variable ajaxRequest which we have created earlier.

ajaxRequest=new XMLHttpRequest() this is for the Firefox, Opera, and Safari browsers. If that fails, try ajaxRequest=new ActiveXObject(”Msxml2.XMLHTTP”) which is for Internet Explorer 6.0+, if that also fails, try ajaxRequest=new ActiveXObject(”Microsoft.XMLHTTP”) which is for Internet Explorer 5.5+

further,

ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
var str = ajaxRequest.responseText;
document.getElementById('status').innerHTML = '';
document.getElementById('result').innerHTML = str;
}
else{document.getElementById('status').innerHTML = 'Loading.....';
}
}

ok so what do we have here, some bunch of blah blah code, not exactly
onreadystatechange property stores the function that will process the response from a server. And once the server side processing is done, readyState is SET to 4 means data is available from server. This data can be used from ajaxRequest.responseText

aren’t we forgetting something,before receiving response from server, we should first send request to the server 😀

ajaxRequest.open("GET", "view_user.php?query="+query, true);
ajaxRequest.send(null);

The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously. The send() method sends the request off to the server.

Frankly speaking I don’t prefer writing all this code every time an Ajax request is to be made, any professional developer would mind. I would suggest newbies to start looking into some javascirpt framework, like prototype, jQuery, YUI, etc for using Ajax. Personally I prefer using jQuery.

Comments are welcomed….

Advertisements