jx Ajax Library Code (Beta Version)

Remember the Ajax Library I talked about in the last post? I am releasing the first version of its code. This is a beta version and the final one will be much different - but the underlying concept will be the same...

////////////////////////////////// ax Library ///////////////////////////////////////////
var jx_http = jx_getHTTPObject(); // We create the HTTP Object
//Create a xmlHttpRequest object - this is the constructor. 
function jx_getHTTPObject() {
 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'
function jx_getData(url,callback,type) {
 if(!jx_http) return;
 if(!type) var type = "text"; //Default type is 'text'

 jx_http.open("GET", url, true); 

 //Call a anonymous function when the state changes.
 jx_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
   else result = "";
   
   //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);
   }
  }
 }
 jx_http.send(null);
}

//This is the function that is called when the javascript fetches the given url. We can put our code
//  in it.
function jx_processResults(data) {
 return;
}

We can call this script using the code

//This is the function that is called when the javascript fetches the given url. We can put our code
//  in it.
function jx_processResults(data) {
 if(data) {
  alert("The user 'binnyva' exists in the database. Please choose another username.");
 } else {
  alert("The username 'binnyva' is free!");
 }
}
jx_getData("user_exists.php?login=binnyva");

...OR...

jx_getData("user_exists.php?login=binnyva",function(data) {
 if(data) {
  alert("The user 'binnyva' exists in the database. Please choose another username.");
 } else {
  alert("The username 'binnyva' is free!");
 }
});

... OR with JSON ...

function showUser(data) {
 alert("Username : " + data['username'] +
  "\nLocation : " + data['location'] +
  "\nWebsite : " + data['website'] +
  "\nEmail : " + data['email']);
}
jx_getData("user_details.php?login=binnyva",showUser,"json");

This is a preview release - the functions are not finalized yet. I will probably put a wrapper class around it - like this...

jx = {
 "http":this.getHTTPObject();

 "getHTTPObject": function() {
  /*...*/
 }
 
 //Rest of the functions.
 /*...*/
}

If you have any suggestions, this is the best time to let me know.

Filed Under...

• javascript
• web
• development
• ajax
• jx
• library
• function