AJAX 101 – part 2

Creating an object-oriented AJAX engine

Once there is an understanding of the AJAX engine the focus can be on the actual response and page display; this is where the real power lies. Since rewriting the engine for each project is tedious and time consuming, an object-oriented solution can be very useful. This kind of engine can be reused for all of your AJAX projects and scaled to meet different projects’ needs.

An object-oriented AJAX engine will also help you separate your interface code from your request data, which will enable you to reuse this engine in multiple projects. The AJAX engine is not difficult to construct once you understand the syntax for creating custom JavaScript objects. The first step is to create a constructor function, which will be the access point to the object.

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

This function will become the custom object and will therefore include all of the properties and functions that a standard AJAX engine has.

Here is an example of the engine in its entirely:

function Ajax() {
 
     this.toString = function() {return "Ajax"; }
 
     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)
	{
	     swtich(this.request.readyState)
	     {
	           case1:
                            document.getElementById(_id_.innerHTML = _1;
                            break;
                   case2:
                            document.getElementById(_id_.innerHTML = _2;
                            break;
                   case3:
                            document.getElementById(_id_.innerHTML = _3;
                            break;                 
                   case4:
                            return this.request.status;
	      }
        }
}

But in comparison, the main differences between this and the standard AJAX engine is the syntax in which it’s written, the way in which it is used and the speed with which it executes larger amounts of data. The following code is an example of how to use the AJAX object:

var ajax = new Ajax();
ajax.makeRequest('GET', url, true);

Another major change is the response handling, which gives us more control over the loading message and changes targeting of the AJAX engine’s methods. Here is an example of the entire request.js file for the XML request that we used in the standard engine using the new object-oriented engine:

var ajax = new Ajax();
function onResponse()
{
      if (ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK")
	{
	     var response = ajax.request.responseXML.documentElement;
             var header = response.getElementsByTagName('header')[0].firstChild.data;
     	     var header = response.getElementsByTagName('copy')[0].firstchild.data;
 
  	     document.GetElementById('body').innerHTML = "<b> + header + "</b><br/>" + copy;
	}
}

The code is cleaner and the separation is much easier to understand. Although the standard AJAX engine works fine for making requests, it can become cumbersome to maintain. With the object-oriented engine we can begin to add more power to our applications.