Last updated January 12, 2012

AJAX Introduction

Background: Ajax delivers a better user experiance in a brower. It is not new - the components have been around for years. Ajax is not a language, but a collection of tools and philosophy. The term stands for Asynchronous Java and XML. Jesse James Garret coined the term to describe how using Javascript, CSS, the DOM, and XMLHttpRequest could provide a richer user experience.

In Ajax the browser is no longer a passive receiver of HTML+CSS, it is an application platform. The work formerly done on the server to format raw data is now done on the client. The server just sends XML data to the browser.

The asynchronous part comes from using something like the XMLHttpRequest method. The XMLHttpRequest object can make an http request and let execution continue. This will allow the user to interact with the UI. When the XMLHttpRequest request is done, it calls a delegate method.

An interesting site using AJAX is del.icio.us

Four Techniques

Four techniques can be used to implement AJAX: XHR, Images, Dynaic Script Loading, and Hidden Frames.

1. Using XMLHttp Requests (XHR)

   Four easy steps to being an AJAX maven with the XMLHttpRequest object:

   1. Get a XMLHttpRequest object To be browser independent you need to get XMLHttpRequest with something like this:

      function getRequester() {
      var req = null;
      try { 
       req = new XMLHttpRequest(); //try Opera, Firefox, IE7, ...
      } catch (error) { 
       try  { 
         req = new ActiveXObject("Microsoft.XMLHTTP"); //IE 6 and below
       }  catch (error) { 
         return false; 
       }
      }
      return req;
      }
      

   2. Assign the callback to a function

      Since we want this call to be asynchronous, we have to give the request object a method to call when its done.

      var requester;
      ...
      requester = getRequester();
      requester.onreadystatechange = ajaxHandler;
      ...
      

   3. Make the call

      var uri = "http://www.fincher.org/tips/web/Ajax/Test.php";
      requester.open("GET", uri);
      requester.send(null);
      

   4. Handle the response

      function ajaxHandler() 
      { 
       if (requester.readyState == 4) 
       { 
       if (requester.status == 200) 
       { 
         sucess();
       } 
       else 
       { 
         alert("Could not connect to server"; 
       } 
      } 
      
      

   That's it. You're done. Let's see at an example on the next page.

   Some disadvantages of using the XHR object method of AJAX:

   1. Browser Back buttons don't work
   2. ActiveX may be disabled in browsers so IE6 and below won't work
   3. You can only call urls in your current domain (unless you use a proxy)
2. Using Images for the AJAX effect

   You can use images with cookies to get info asynchronously from a server.

   function showImageCallback() {
   var myImage = document.createElement("img");
   myImage.onload = function() {
       alert("Image Loaded.");
   }
   myImage.onerror = function() {
       alert("Houston, we have a problem.");
   }
   myImage.src = "ClearImage.gif";
   }
   
   

   Now we can set a cookie on the server and read it from the javascript

   function showHumidity() {
   var myImage = document.createElement("img");
   myImage.onload = function() {
       alert("Humidity is "+getCookie("Humidity"));
   }
   myImage.onerror = function() {
       alert("Houston, we have a problem.");
   }
   myImage.src = "Image2.php";
   }
   
   
   function getCookie(c_name)
   {
   if (document.cookie.length>0)
     {
     c_start=document.cookie.indexOf(c_name + "=")
     if (c_start!=-1)
       { 
       c_start=c_start + c_name.length+1 
       c_end=document.cookie.indexOf(";",c_start)
       if (c_end==-1) c_end=document.cookie.length
       return unescape(document.cookie.substring(c_start,c_end))
       } 
     }
   return ""
   }
   
   

   The php page looks like this:

   <?php
   	setcookie("Humidity", rand(60,100));
   	header("Content-type: image/gif");
   	header("Location: ClearImage.gif");
   ?>
   
3. Dynamic Script Loading
4. Hidden Frame