Online World

How Ajax is Different


An Ajax application does not need the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server.
Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf. The AJAX engine does not allow user to stay idle . It makes user’s interaction with the application to happen asynchronously — independent of communication with the server. So now user don’t need to watch an hour glass after they clik on any link.

Following image shows the work of AJAX:



AJAX engine is cable of handling some simple task of it’s own like simple data validation, editing data in memory, and even some navigation. So for such simple task no communication to server is required. Now each user interaction which would normally take the form of HTTP request is now takes the form of a JavaScript call to the Ajax engine instead. If the engine needs something from the server in order to respond — if it’s submitting data for processing, loading additional interface code, or retrieving new data — the engine makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application.

That's all from today. Please let me know whether you liked this post.

Live AJAX Examples:

Some of the live AJAX examples includes:

1. GMAIL by Google

2. Google Suggests by Google

3. Google Maps by Google

4. Yahoo Instant Search

5. MSN Virtual Earth

AJAX is catching every body. It is indeed going to revolutionize Web-Programming. In fact, has already started.

That's all for today. Catch you later.

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 :).

AJAX-A New Technology

AJAX also known as Asynchronous Java and XML is an interesting technology where we can utilize full potential of already existing technologies like Java Script and XML. Ajax incorporates:- standards-based presentation using XHTML and CSS;- dynamic display and interaction using the Document Object Model;- data interchange and manipulation using XML and XSLT;- asynchronous data retrieval using XMLHttpRequest;- and JavaScript binding everything together.
I expect to publish some example source codes of AJAX in my next post.
Until the enjoy.