Kalkran.COM

Hey,

You've probably heard of AJAX. It's an acronym for "Asynchronous Javascript And XML". It basically means you could use Javascript for updating a page, submitting info without refreshing and so forth. I've only just found out the basics of AJAX myself. It's not hard, but it requires (very) basic understanding of Javascript and HTML.

The biggest part about using AJAX is understanding the XMLHttpRequest() object. This object has a wide range of properties, functions and what not. But for basic AJAX you'll only need a couple.

Initializing the XMLHttpRequest object

 
function GetXML() {
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
}
}
}
return xmlHttp;
}

That is the function I'm using to get the object. Usually you could just use the XMLHttpRequest(), but since the (oh-so-loved) Internet Explorer doesn't support it. You need to make a complete function and have it return the object.

You can now use:

 
ajax = getXML();

to get the object instantiated.

Sending information

Okay, having this object is all nice and dandy, but we might want to use it and send info to other pages and retrieve the information. This is done as follows:

 
ajax.open(STRING method, STRING url, BOOL asynchronous);

So if we (e.g.) wanted to submit a star-rating for a specific id, we would want to pass on the id and the actual rating:

 
ajax.open("GET", "save_rating.php?id=WUT&rating="+rating,true)

Now Ajax has cached our request, ready to be sent:

 
ajax.send();

Ajax is now sending the request and receiving some information for itself and we might want to do something with the information we received.

Receiving information

Sending and receiving sound like a logical order here, but while using AJAX you might want to declare your ajax handler, and then immediately setup a function to handle the incoming traffic. Since AJAX uses functions to receive it:

 
ajax.onreadystatechange=function()
{
// On ready state change (Loading, Finished Loading.. etc)
//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
if(ajax.readyState==4)
{
// Received information.
document.getElementById('rating').innerHTML=ajax.responseText;
}
}

Woot. The only vital part here is ajax.responseText. And noticing you're passing a function to the ajax.onreadystatechange.

That's all for now, I'll write a tutorial about the star-rating system I've coded probably monday since I've got work tomorrow :(.

Thanks for reading!