Ajax Library

Description

AJAX (Asynchronous JavaScript and XML) isn't a new programming language, in fact its been around for a long time... it was just a late bloomer in the popularity department. I have developed an extensive ajax library that I have been using for quite some time. I have stripped it down to its basic structure so its easy to read and allows others to use it as their foundation.

The concept is quite simple. The ajax.js file consists of two classes, the "webRequest" class and the "xmlHttp" class. The webRequest class is responsible for describing what kind of request you are going to make. For instance, what type of request method will you be using, where is the request going, is this to be done asyncronously? The "xmlHttp" class is responsible for adding or removing post data, sending the request and receiving the response. In addition, these classes contain event handlers so your code can degrade gracefully in the event that ajax isn't supported, and it also provides you the flexibility to execute your own functions during every step of the request.

Code

/** 
* @projectDescription  xmlHttp Library
*
* @author Ryan Estes  http://www.codeapedia.com
* @version 2
*/
function xmlHttp(pWebRequest)
{
   this.request = pWebRequest; // webRequest Object
   // (optional) string or queryString Object.
   this.postData = null; 
   
   // event handlers
   this.onError = function(e) { }
   this.onPreRequest = function(sender) { }
   this.onPreRequestComplete = function(sender) { }
   this.onRequest = function(sender) { }
   this.onRequestComplete = function(sender) { }

   this.getResponse = function() {
      var preReqRef = this.onPreRequest;
      var preReqCompleteRef = this.onPreRequestComplete;
      var reqRef = this.onRequest;
      var reqCompleteRef = this.onRequestComplete;
      try
      {
         var objXmlHttpRequest = this.request.xmlHttpRequest;
         objXmlHttpRequest.onreadystatechange = function() 
         {
            if(objXmlHttpRequest.readyState == 0) 
            { 
               preReqRef(objXmlHttpRequest); 
            }
            else if (objXmlHttpRequest.readyState == 1) 
            { 
               preReqCompleteRef(objXmlHttpRequest); 
            }
            else if (objXmlHttpRequest.readyState == 2) 
            { 
               reqRef(objXmlHttpRequest); 
            }
            else if (objXmlHttpRequest.readyState == 4) 
            { 
               reqCompleteRef(objXmlHttpRequest); 
            }
         }
         objXmlHttpRequest.open(
                 this.request.method,
                 this.request.url,
                 this.request.async);

         if(this.request.method == "POST")
         {
            objXmlHttpRequest.setRequestHeader(
                 "Content-Type",
                 "application/x-www-form-urlencoded;");
         }
         if(this.postData != null &&
            typeof(this.postData) != "string")
         {
             objXmlHttpRequest.send(
                this.postData.toString().replace("?","")
             );
         }
         else
         {
            objXmlHttpRequest.send(this.postData);
         }
         
      }
      catch(e)
      {
         this.onError(e);
      }
   }
}

function webRequest()
{
   this.url = (arguments.length == 1)? arguments[0] : null;
   this.method = "GET";
   this.async = false;
   this.xmlHttpRequest = null;
   this.onError = function(e) { }
   
   this.create = function() {
      if(arguments.length == 1)
      {
         this.url = arguments[0];
      }
      try
      {
         if(window.ActiveXObject)
         {
            this.xmlHttpRequest = 
                 new ActiveXObject("Microsoft.XMLHTTP");
         }
         else if (window.XMLHttpRequest)
         {
           this.xmlHttpRequest = new XMLHttpRequest();
           if(this.url.indexOf(".xml") != -1)
           {
             if(this.xmlHttpRequest.overrideMimeType)
             {
               this.xmlHttpRequest.overrideMimeType('text/xml');
               this.async = true;
             }
           }
         }
      }
      catch(e)
      {
         this.onError(e);
      }
   }
   
   if(this.url != null)
   {
      this.create();
   }
}

Example

Place the code above into an external javascript file called "codeapedia.ajax.js" and include the file within the head tag of your document. Create an xml file called "sample.xml" within your root directory. We are going to use my ajax library to grab the contents of whatever you put in sample.xml and alert it back to us.

var ajax = new xmlHttp(new webRequest("sample.xml"));
ajax.onRequestComplete = function(sender)
{
   alert(sender.responseText);
}
ajax.getResponse();

The example above was more for demonstration purposes. If you wish to see a more comprehensive example that would be more applicable to a realistic situation click here.