(Post 21/02/2006) This article assumes that you know the basics of AJAX, a server-side technology, and are comfortable with basic database interactions. Although the primary focus of this article is AJAX patterns, I’ll provide samples to give you an idea of how to implement these patterns in your applications. All the samples are available for download here. Before we focus on the patterns, let’s take a look at the standard web application and AJAX models.

Figure 1: A standard AJAX model.

A standard web application begins with an HTTP request that’s triggered by a user event. This request is sent to the server, resulting in a delay while the server deals with the request appropriately and returns a new HTML page. This can cause a disconnect between the user and the application because every time the window refreshes the user has a delay in his experience. This is where AJAX plays a very important role in the user experience.

AJAX provides an entirely different way of dealing with HTTP requests than the standard web application model. Whereas the standard web application starts with a user making a choice that sends a request to the server and returns a new HTML page, the standard AJAX model does this without refreshing the page and stopping the user experience to exchange data that the user shouldn’t always have to be aware of in the first place. The standard AJAX model starts with the user interface. A JavaScript event, which could be anything from a page load to a button click, triggers an AJAX request and sets a callback method for later use. AJAX makes an HTTP request to a server-side language, which queries the database. On successful completion of the database interaction, the server-side language responds to the callback method that was set during the AJAX request with an XML or text response. The callback method typically does some custom rendering or validation on the client side and writes the updated data back into the user interface. The flow chart in Figure 1 shows the steps in a standard AJAX model.

As an example for this article, I’m using an object-oriented AJAX engine that I created to make requests more reusable. Following is an example of the AJAX engine object:

document.write("<script type=\"text/javascript\" src=\"js/HTTP.js\"></script>");

function Ajax()

{

  this.toString = function() { return "Ajax"; }

  this.http = new HTTP();

  this.makeRequest = function(_method, _url, _callbackMethod)

  {

    this.request = (window.XMLHttpRequest)? new XMLHttpRequest(): new ActiveXObject("MSXML2.XMLHTTP");

    this.request.onreadystatechange = _callbackMethod;

    this.request.open(_method, _url, true);

    this.request.send(_url);

  }

  this.checkReadyState = function(_id, _1, _2, _3)

  {

    switch(this.request.readyState)

    {

      case 1:

        document.getElementById(_id).innerHTML = _1;

        break;

      case 2:

        document.getElementById(_id).innerHTML = _2;

        break;

      case 3:

        document.getElementById(_id).innerHTML = _3;

        break;

      case 4:

        return this.http.status(this.request.status);

    }

  }

}

This AJAX object is extremely easy to use, as it only takes two lines of code to make a request and one to check the readyState. First, you need to instantiate the object and pass the method of request—the path to the file that you’re requesting and a callback method to the makeRequest method:

var ajax = new Ajax();

ajax.makeRequest(’GET’, ’xml/data.xml’, onResponse);

Once you write your callback method, you can check the ready state with the checkReadyState method of the AJAX object:

function onResponse()

{

  if(ajax.checkReadyState() == "success")

  {

    // add your parsing code here

  }

}

As an addition to the AJAX object, I’ve created an HTTP object that handles the status of the request and returns a value depending on the status code. There are many more HTTP status codes to handle, but this example has the most common:

function HTTP()

{

  this.toString = function() { return "HTTP"; }

  this.status = function(_status)

  {

    switch(_status)

    {

      case 200:

        return "success";

        break;

      case 404:

        return "File not found.";

        break;

      default:

        return "HTTP Status: " + _status;

     }

  }

}

The standard AJAX model is very effective and aids in creating an intuitive user experience, but there are specific situations that call for more advanced data flow.

Kris Hadlock
(theo www.informit.com)