Site Moved

This site has been moved to a new location - Bin-Blog. All new post will appear at the new location.

Bin-Blog

jx Ajax Library - in Object Notation

I have been planning to rewrite the jx Ajax Library using object notation. I have been putting it off for some time now. But after reading Dustin's JSON article I could not wait any longer. So here it is...

////////////////////////////////// jx Library ///////////////////////////////////////////
var jx = {
 http : false, // We create the HTTP Object
 
 //Create a xmlHttpRequest object - this is the constructor. 
 getHTTPObject : function() {
  var xmlhttp;
  
  //Use IE's ActiveX items to load the file.
  if(typeof ActiveXObject != 'undefined') {
   try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
     xmlhttp = false;
    }
   }
  //If ActiveX is not available, use the XMLHttpRequest of Firefox/Mozilla etc. to load the document.
  } else if (XMLHttpRequest) {
   try {
    xmlhttp = new XMLHttpRequest();
   } catch (e) {
    xmlhttp = false;
   }
  } else {
   xmlhttp = false;
  }
  return xmlhttp;
 },

 //This function is called from the user's script. It will take a url and an optional callback function.
 // Then it will read the url file, expecting a json string. Once the file is loaded, the script
 // will phase the json string using 'eval' and call the user defined callback function with this
 // array as the argument.
 //Arguments - 
 // url - The url of the serverside script that is to be called. Append all the arguments to 
 //   this urls as GET params - like get_data.php?id=5&car=benz
 // callback - Name of the function that should be called once the data is ready. If a callback
 //   function is not given, then the default function 'jx_processResults' will be used.
 // type - The return type for this function. Could be 'json' or 'text'. If it is json, the string will be
 //   'eval'ed before returning it. Default:'text'
 getData : function (url,callback,type) {
  if(!this.http) return;
  if(!type) var type = "text"; //Default type is 'text'
 
  this.http.open("GET", url, true); 
 
  //Call a anonymous function when the state changes.
  this.http.onreadystatechange = function () {
   if (jx.http.readyState == 4) {//Ready State will be 4 when the document is loaded.
    var result = "";
    if(jx.http.responseText) result = jx.http.responseText
    
    //If the return type is json, we have to 'eval' the string before returning it.
    if(type == "json" || type == "j" || type == 1) {
     //Careful - if the responseText is not a valid json string, 
     //  there will be javascript errors here.
     result = eval(result); //Yes, I know I used eval - its JSON, stupid.
    }
    
    if(callback) {
     callback(result); //Give the data to the user defined function.
    } else { //If there is no user defined function...
     //Call a predefined  function with the result.
     if(jx_processResults) jx_processResults(result);
    }
   }
  }
  this.http.send(null);
 },

 init : function() {
  this.http = this.getHTTPObject();
 }
}

//Call it like this.
function init() {
 jx.init();
 jx.getData("data.php",function (data) {
  alert(data);
 },'t');
}
window.onload=init;

If you have any opinions about how to improve it, please feel free to use the comment area below. I major drawback of this system over the 'global function' approach is that this method needs to call the jx.init() at the beginning of the code. In the previous method, we could call the jx_getData function without any other code. If you have any suggestions on how it can be avoided, they are very welcome.

0 Comments: