Often you don’t want to add all the overhead of loading up a big AJAX library like script.aculo.us or YUI just to make a few simple calls back to the server. What you need is a lightweight framework that will able you to make and handle calls back to the server in a simple and consistent manner.

To start with, we’ll take the standard XMLHttp objects common across major browsers and wrap them up in an object:

  function AJAXRequest(){
    this.req = false;
    //Check for a native request object 
    //(IE7+, Firefox etc)
    if (window.XMLHttpRequest) {
      try {this.req = new XMLHttpRequest();}
      catch(e) {this.req = false;}
    }
    //Otherwise we might be dealing with an early IE
    else if(window.ActiveXObject) {
      try {
        this.req = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch(e) {
        try {
          this.req = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e) {this.req = false;}
      }
    }
  }

Now we have our base object, we’ll need to add in a few features to handle the requests. We will want to be able to supply some data to send to the server, we will need to tell the request where to send the data, how to send it (GET or POST) and what to do with the response.

To that end, we create the data, url, method and callBack members for our object and allow the object to receive them as parameters. Our object looks like this:

  function AJAXRequest(objData, strUrl, strMethod, funcCallBack){
    this.data = objData;
    this.url = strUrl;
    this.method = (strMethod.toUpperCase() != "POST" ? "GET" : "POST");
    this.callBack = funcCallBack;

    this.req = false;
    //Check for a native request object (IE7+, Firefox etc)
    if (window.XMLHttpRequest) {
      try {this.req = new XMLHttpRequest();}
      catch(e) {this.req = false;}
    }
    //Otherwise we might be dealing with an early IE
    else if(window.ActiveXObject) {
      try {this.req = new ActiveXObject("Msxml2.XMLHTTP");}
      catch(e) {
        try {this.req = new ActiveXObject("Microsoft.XMLHTTP");}
        catch(e) {this.req = false;}
      }
    }
  }
  AJAXRequest.prototype.objData;
  AJAXRequest.prototype.callBack;
  AJAXRequest.prototype.url;

And we also want to give it a send() method so that we are able to submit the request to a server, and a method of passing back the response data to our supplied callback function:

  AJAXRequest.prototype.send = function(){
    var strURL = this.url;
    // Check for a valid request member
    if(this.req){
      // Define an event handler for the ready
      // state change event
      var _this = this;
      this.req.onreadystatechange = function(){
        _this.handleStateChange(_this.callBack)
      };

      // Open the connection using the supplied
      // parameters
      this.req.open(this.method, this.url);

      // Send the submitted data (if any)
      this.req.send(this.data);
    }
  }

  AJAXRequest.prototype.handleStateChange = function(objCallBackFunction){
    // readyState 4 is "done"
    if (this.req.readyState == 4){
      // Pass the response from the server back to the
      this.callBack.call(this, this.req.responseText);
    }
  }

And there we have it, a lightweight Asynchronous JavaScript And XML object that you can drop into any page you like. Of course, if your project is using JSON then you can use it for that as well.