Using AJAX

Continuing from the previous post, I'll first post a small tutorial on using ajax note that AJAX is a browser technology, so far I have tested in firefox and IE, ive read somewhere that SAFARI has partial implementation for it, but I didnt check which version was being discussed. first u'll need to create a factory method in your JS file, this method will , depending on the browser, call the correct library and get the ajax object.
it should look something like this:

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

You can call the function and get the object that will be sending the actual request

var url = “http://www.sample.comm/sample.asp”;
var xmlObj = GetXmlHttpObject(); //get the object from factory method
xmlObj.onreadystatechange = stateChanged;
xmlObj.open("GET",url,false);
xmlObj.send(null);

a line by line explanation of the code

xmlObj.onreadystatechange = stateChanged;

this line assigns the method to an event, whenever the state of the object changes the method you assign here will be called

xmlObj.open("GET",url,false);

here you are setting the options for opening the connection

arg1 = this can be either “GET” or “POST”, “POST” should be used whenever sending data more than 512kb
arg2 = the url of the server page to hit
arg3 = this parameter specifies whether the call should be sync or async

there are two additional arguments that can be passed, I havnt used them but I think they can be used for HTTP basic authentication

arg4 = username
arg5 = password


xmlObj.send(null);

This is the actual call, note that instead of passing null, you can send xml data in the argument.

Now, whenever the state of the object changes the method that you assigned will be called,

xmlObj.onreadystatechange = stateChanged;

lets look at how we can use this event

function stateChanged(){
if (xmlObj.readyState==4 xmlObj.readyState=="complete") {
alert("success");
}
else{
alert("error");
}
}

The readyState can be any one of the following:

0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

In this example I have only used the completed state, note that it might be returning its string counterparts depending on the browser

There are other properties which can be used for testing the state of the xml call object
These are:

responseText : get the response as a stirng
responseXML : get the XML DOM object which can then be parsed

status : status number for http such as 200 ok status or 404 error
statusText : get the status as string like “Not Found” or “OK”

from the server side, you can write anything from the page that you have specified in the callback url in Response.Write(“”) , which will become available in the responseText property of the xml obj once the callis complete

similiary , whole forms can be called and retrieved from response.Text, but its not generally a good idea as discussed in the previous post

head over to w3school.com for more tutorials on calling ajax., but this is pretty much there is to it