Online World

AJAX-Example Source Code

Hi!

As promised I am back to present an example -source code of AJAX. This is a very simple AJAX example but, it should be enough to get you started.
So let's not waste time and get into business right way.
Well, this example would consist of a combo box from which one can choose an ID. As soon as user selects one of the ID, information pertaining to that particular ID is presented.

So here we go...
First let's create the main file that would host the AJAX concepts:
-> ajax_demo.html

First we need to make a simple form (as we would do normally)
so it would look like:

<form name="ajax_ex"><select name="ajax_select"><option value="" selected="selected">Please Choose</option><option value="1">ID#1</option><option value="2">ID#2</option></select></form>

Now to this let us introduce a onChange function so that as soon as an user chooses one of the ID a java script function can be called. So now our code looks like

<form name="ajax_ex"><select name="ajax_select" onchange= "abc();"><option value="" selected="selected">Please Choose</option><option value="1">ID#1</option><option value="2">ID#2</option></select></form>

abc() being the function called as user selects an ID.

Let's look at the abc() function now:

function abc()
{
var xhReq;
xhReq = createXMLHttpRequest();
xhReq.open('get', 'test_ajax.php?id='+ document.ajax_ex.ajax_select.selectedIndex);
xhReq.onreadystatechange = onSumResponse;
xhReq.send(null);
}

Now does that look too much. Don't worry we will cover each one gradually.

The first line declares a variable.
Now, let's look at the second line. It is calling a function and the returned value from that function is being stored in a variable that we declared in line 1.

This function createXMLHttpRequest(); creates an XMLHTTP object depending on user agent. If a user is using Internet Explorer then the object created would be ActiveXObject("Microsoft.XMLHTTP"); and so forth.

The function createXMLHttpRequest() looks like

function createXMLHttpRequest()
{
try
{
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {}

try
{
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
try
{
return new XMLHttpRequest();
} catch(e) {}
alert("XMLHttpRequest not supported");
return null;
}

So, this is pretty much clear function which creates a XMLHttp object depending on user agent. If it encounters an error it would show an error message.

Now let’s look at our third line which looks like:
xhReq.open('get', 'test_ajax.php?id='+ document.ajax_ex.ajax_select.selectedIndex);

Here we are opening the XMLHTTP object created. This piece of code sends the data from our select form field 'id' to test_ajax.php using GET method.The data from the select is in $_GET['id']. Now here we are using certain parameters like:
method, url, and third parameter that we could use is true or false which we have not used here.
The second parameter that we used here extracts the value selected by the user using the combo box and concatenates it along with the url.

Let’s look at the line four of the abc() function which is
xhReq.onreadystatechange = onSumResponse;

This tries to track the ready state of the object. During this process of XMLHTTP request a whole cycle is maintained. It starts with a status of 1 which means loading, 2 means loaded and 4 means finished. Now as soon as the ready state is changed (let’s say from 1 to 2) xhReq.onreadystatechange = onSumResponse;
Function is called automatically which further tracks down the status. Now let’s look at this function onSumResponse;

function onSumResponse()
{
if(xhReq.readyState != 4)
{
document.getElementById('div_area').innerHTML='Loading....';
return;
}
var serverResponse = xhReq.responseText;
document.getElementById('div_area').innerHTML=serverResponse;
}

So while the state is 1 we see ‘loading….’
And as soon as we have the data we display the data (request.responseText holds the response we got from the server) to the user using document.getElementById('div_area').innerHTML
So pretty clear. Right?

Now let’s through some light on the last line of our abc() function which is xhReq.send(null);

It is simply sending the whatever we need to send. Unless we are using POST as method, the parameter is always NULL.

Now let’s look at the PHP file (test_ajax.php) which would process this request.

It looks pretty simple:

";
echo "\n----------------";
echo "
Name: John Mathews";
echo "
Dept: R & D";
echo "\n----------------";
}
else if($temp==2)
{
echo "The details are:
";
echo "\n----------------";
echo "
Name: Ravi Anand ";
echo "
Dept: R & D";
echo "\n----------------";

}
?>

It simply finds out what ID user selected using $_GET[‘id’]; and then processes the request accordingly. We simply echo whatever we want to appear on the screen.

So this is pretty much AJAX. I know it is very simple example but then it is better to start with simple example.

That’s all for today. Your feedback are more than welcome. Catch you later with some more examples and source code until then, keep smiling :).