AJAX

AJAX - What is it?

AJAX is a term used to describe support for client/server communication between a web PAGE and a web server, and it is implemented in Javascript. Ordinary websites involve client/server communication between a web BROWSER and a web server. So AJAX enables communication to occur even when the user does not click or type anything.

This type of communication has existed since the mid-1990s for pages that use Java applets and (later) Flash technology. But now it is possible to make web pages more dynamic without causing the page to unload and reload every time new data arrives. Three examples of AJAX use are Gmail's mail interface updating, ESPN.com's scoreboards, and Artcontext's Screening Circle and Glyphiti (version 2006).

Although the code for this technology makes reference to XML, it is not necessary to use XML as a transport language for the data. It is simply an option.

AJAX enables increased dynamism for non-Flash, non-Java web pages without requiring a plug-in. However, there are numerous similar but not identical implementations of AJAX in the various browsers. This is because Javascript is not implemented in exactly the same way. Microsoft has insisted on developing its own "JScript" language which is functionally almost identical to Javascript (ECMAScript), but really it's not the same. This is yet another reason to hate Microsoft, but sticking with the topic at hand, let's see an example.

Basics

First we will write a function that initializes a connection. This connection will be, ultimately, an HTTP connection that is very similar to the kinds of connections made by browsers when they retrieve web pages and images.

function initHTTP(){
   var xmlhttp = null;
   try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      // okay, if not that, try this...
      try {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        // okay must be mozilla
         if ( (typeof XMLHttpRequest) != 'undefined' ){
             xmlhttp = new XMLHttpRequest();
         }
      }
   }
   return xmlhttp;
}

The above function allows us to create a reference to a connection, as for example:

var xmlhttp = initHTTP();

Now it will be possible using the variable xmlhttp to open outgoing connections to a specified URL and to receive a response from the server.

Next we will open a connection to the server.

function getData(){
   var data;
   var xmlhttp = false;
   xmlhttp = initHTTP();
   if ( xmlhttp) {
     var rand = (""+Math.random()).substring(10);
     xmlhttp.open("GET", "getData.php?"+rand, true);
     xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState != 4 
			|| xmlhttp.status != 200)  return;
        showData(xmlhttp.responseText);
     };
     xmlhttp.send(null);
   }
   else{
       alert("Browser doesn't support XMLHttp (AJAX) features!");
       alert("Use the Firefox browser instead. It's free!");
   }
}

The rand variable lets us reuse this function (and URL) without the browser's cache causing us to receive the same data over and over.
The onreadystatechange = function() line is a way of listening for events in the future. When the call to getData.php has been handled by the server, a result will be sent. Only when it arrives will the function be called.
The browser will put any data received into the variable xmlhttp.responseText
xmlhttp.send(null) is the point at which the connection opens. No data (null) is being sent along with the connection.
We must now write a function that shows us the data we retrieved.

The following function assumes you have a <div id="mydiv"></div> block in your document somewhere.

function showData(data){
  var element = document.getElementById("mydiv");
  element.innerHTML = data;
}

Implementing AJAX

With AJAX, the user doesn't necessarily know that the web page is communicating with the server. Rather than waiting, the user may be doing something else while communication with the server happens in the background. Another possibility is that a periodic call is made to the server in the background. Here's an example of the latter.

<body onLoad="setInterval('getData()',30000)">

This will cause the getData() function to be called every 30 seconds (the variable is in milliseconds). So, if our script returns different results, we can expect the content in the "mydiv" block to change each minute.

You can see the results by viewing the AJAX example. Note that you can see all the relevant code except for the PHP script by viewing the source of the example page.

AJAX - What is it?

Basics

Implementing AJAX

Links