Introduction

AJAX is not a programming language, nor is it a new technology. AJAX has been technically available since the inclusion of the XMLHttpRequest component (which is a part of MSXML) in Internet Explorer 5.0. Now, that dates back to the year 1999. But the word “AJAX” is all new. AJAX stands for “Asynchronous JavaScript and XML”, and was coined by Jesse James Garrett, founder of Adaptive Path.

AJAX relies on XMLHttpRequest, CSS, DOM, and other technologies. The main characteristic of AJAX is its “asynchronous” nature, which means it can send and receive data from the server without having to refresh the page. Yes, you heard me right...without having to refresh the page.

So what is asynchronous?

In a traditional web page, when a user sends a request (like clicking on a Submit button), the user waits until the page gets reloaded. During the normal wait period, which ranges from anywhere between a few seconds to “ages”, the user would be presented with a blank browser screen to stare at. In asynchronous mode, the client and the server will work independently and also communicate independently, allowing the user to continue interaction with the web page, independent of what is happening on the server.

And what about JavaScript?

Now, here lieth the secret. JavaScript is used to make the asynchronous request to the server. Once the response is received from the server, JavaScript is used to modify the content of the page displayed to the user, to show that the user-initiated action was successful.

And XML?

The data that is sent asynchronously from the server to the client, is packaged in an XML format, so it can be easily processed by JavaScript. Though generally the data is sent to the client in XML format, it can also be sent in a lot of other formats (like simple text).

There’s nothing really new about AJAX. Normally, we make a request, and receive a page as the response. This is how the web works already — the only difference is that now we can make these requests from JavaScript.

Let me show you an example

Let's begin with a simple example of getting the server's time and displaying it on the page using AJAX. In this example, just to make things a little less complicated, we would be using text to send the data from the server to the client, instead of XML. Create a new ASP.NET web application. Create a new WebForm, and rename it "ClientServerTime.aspx". Add this piece of code inside the <body> of the page.

This contains a div “serverTime” that would be used to display the time from the server. showServerTime is the function that will be called when you click on the button. This function would contain the code to retrieve the server's time and display it.

To get the entire thing to work, first we need to create a request object.

xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
//Send the xmlHttp get to the specified url
xmlHttp.open('GET', url, true);

The xmlhttp.open is used to specify the page you are using to send the request. We are using GET in this case, instead of POST, because we are just getting some value from the server.

Next, we need to have a callback function that will wait until the response is sent from the server.

readyState = 4 or ‘complete’ means that the response is complete, and we can proceed with what we want to do with the data received.

Take a look at the complete script. Add this inside your <script> tags:

var xmlHttp;
var requestURL = 'getServerTime.aspx';
var is_ie5 = (navigator.appVersion.indexOf("MSIE 5.5")!=-1) ? 1 : 0;
function showServerTime()
{
//Append the name to search for to the requestURL
var url = requestURL;
var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP';
xmlHttp = new ActiveXObject(strObjName);
xmlHttp.onreadystatechange = CallBackHandler;
//Send the xmlHttp get to the specified url
xmlHttp.open('GET', url, true);
xmlHttp.send(null);
}
// This function will be called when the state
// has changed, i.e. when data is returned from the server
function CallBackHandler()
{
// State of 4 or 'complete' represents that data has been returned
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 'complete'){
//Gather the results from the callback
var str = xmlHttp.responseText;
//Populate the innerHTML of the div with the results
document.getElementById('serverTime').innerHTML = str;
}
}

Create another WebForm and remove all the lines in the .aspx page except the Page directive. Rename the WebForm "getServerTime.aspx". On the code-behind (getServerTime.aspx.vb), add the following line in the Page_Load function:

Response.Write(Date.Now.ToString)

We are done

Build the project and run it. When the button is clicked, it would display the time from the server without refreshing the page.

Note that subsequent clicks after the first click would not display the correct time. This is because the page is getting cached. To overcome this, you need to add a little query string to your requestURL in the showServerTime function.

var url = requestURL + ‘?q=’ + Math.random();

Source code

You could download the source code using the link at the top of this page. In the source code, data from the server is returned in XML format, instead of the simple text that was returned in the above example. This requires inclusion of an extra page "ServerTime.xslt" which is used as the XML transformation file. You would have to create a new ASP.NET application, add these files into the project, build it, and run the "PageServerTime.aspx" page.

Share

About the Author

When Tingz Abraham was old enough to realize that computers were going to invade the world, he decided to pursue a career that would keep him close to computers. That landed him a job as an IT Solutions Consultant in Seattle, USA where he currently works. He believes he can program in many languages, including English. Ctrl+C and Ctrl+V are his favorite keys on the keyboard.

After he found he sucked real bad at playing the violin, he just stuck to the guitar and piano. He has a ravishing need for speed and takes a fancy to anything with wheels, including his black Mustang which he's aptly named 'Tingzmobile'.

At work you can constantly hear him say - "Oh! The things I learn after I know it all!" He keeps himself very busy, and in his spare time he keeps wondering why '24 hours a day is just not enough'.

Comments and Discussions

Just one quick criticism....in your callback function, you're (correctly) checking readystate, but it is possible to get a readystate of 4, but still not get the data you were after. Look at this list of status codes...[^]

What I tend to do is also check the status code. Although in most cases it's unnecessary, I personally like to make sure before I start doing stuff...

"Now I guess I'll sit back and watch people misinterpret what I just said......" Christian Graus At The Soapbox