Well, there are similar ones out there. jQuery, YUI and AjaxObject are just to name a few, which has their own implementations along with other in-built functionalities. Then there is mine, which is done in a much simpler way with the cost of flexibility. If you’re just looking for a simple reusable JavaScript class for making AJAX calls (and AJAX calls only), you're at the right place.
For Beginners:
For the sake of the simplicity of this article, i will not be going in much detail about the basics of HTTP calls, the different modes (POST, GET) of communications and their related topics. Let’s just say that, an HTTP call or an AJAX call can be made to a URL (Ex: http://www.mywebsite.com) using either GET (where URL has all the information like http://www.mywebsite.com?name=john&age=25) or POST (where the form data is submitted as key-value pair like key1=value1&key2=value2 with appropriate header information on the request). Oops! did i just said everything about HTTP calls in one sentence? No, there is more.
The ajaxRequest Snippet
Here is the ajaxRequest’s code. The code is pretty straightforward and is designed in such a way that it works with minimum arguments. There are comments embedded in the code (download from below) and sample usage code provided below to make it’s use seamless.
function ajaxRequest(url, method, postData) {
//validation start
if (url == undefined) return false;
this.method = method == undefined ? "GET" : method.toUpperCase();
if (this.method != "GET" && this.method != "POST") return false;
if (url == undefined || url == "") return false;
//validation end
this.url = url + ((url.indexOf('?') > 0) ? "&ajts" : "?ajts") + new Date().getTime();
var mainCls = this;
this.inProgress = false;
this.xmlHttpObj = null;
this.postData = postData;
this.toString = function() { return "Ajax by Sanal"; }
this.abort = function() {
if (mainCls.inProgress) {
mainCls.xmlHttpObj.abort();
mainCls.inProgress = false;
mainCls.xmlHttpObj = null;
}
}
this.execute = function(statusChangeFunction) {
try {
// Firefox, Opera 8.0+, Safari
mainCls.xmlHttpObj = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
mainCls.xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
mainCls.xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
return false; //No support for AJAX
}
}
}
mainCls.xmlHttpObj.onreadystatechange = function() {
if (statusChangeFunction) {
statusChangeFunction(mainCls.xmlHttpObj.readyState, typeof (mainCls.xmlHttpObj.responseText) == "unknown" ? null : mainCls.xmlHttpObj.responseText, typeof (mainCls.xmlHttpObj.responseXML) == "unknown" ? null : mainCls.xmlHttpObj.responseXML, mainCls.xmlHttpObj.readyState==4 ? mainCls.xmlHttpObj.status : null);
}
if (mainCls.xmlHttpObj.readyState == 4) {
mainCls.inProgress = false;
mainCls.xmlHttpObj = null;
}
}
mainCls.xmlHttpObj.open(mainCls.method, mainCls.url, true);
if (mainCls.method == "POST") {
mainCls.xmlHttpObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
mainCls.xmlHttpObj.setRequestHeader("Content-Length", mainCls.postData.length);
}
mainCls.inProgress = true;
mainCls.xmlHttpObj.send(mainCls.method == "POST" ? mainCls.postData : null);
return true;
}
}Code Download
The above code with embedded comments, along with the minified version, can be downloaded from here. [In case, if you don't know, minified version will not have the comments and spaces, to keep the file size to a minimum possible, making the server-browser communication faster.]
Sample usage:
Provide a reference
First, let the browser know that it needs to load the script.
If you're using the minified version, change the file name appropriately.
Create an Object
Then, in another scripting place, create an object for ajaxRequest as shown below. In the example below, the testAjax function will be the function that triggers the AJAX call to the server url “ajaxprocessor.aspx” which in turn processes the aynschronous requests. Since there are no other arguments passed, the call is defaulted to a GET call and the URL is expected to have input parameters for server processing.
function testAjax() {
var myAjaxRequest = new ajaxRequest("ajaxprocessor.aspx?name=john");
myAjaxRequest.execute(processMyRequest);
myAjaxRequest = null;
}One minor point to note here. Among the query strings that are being passed to the URL, it is not recommended to use the key "ajts" (AJAX timestamp) since that is being used by the ajaxRequest to make every AJAX call unique to the browser. This is applicable to both GET and POST requests.
Track your AJAX call
The “processMyRequest” function in the above code is the callback method, that gets executed when for every state change of your AJAX call. A simple implementation of the “processMyRequest” can be something like this. I’m assuming that you have a DIV with the id “myDIV” placed in your web page. [Beginners, you might want to know more about readyState and status for asynchronous calls]
function processMyRequest(readyState, responseText) {
if (readyState == 1)//loaded
document.getElementById("myDIV").innerHTML = "Loading...";
else if (readyState == 4)//complete
document.getElementById("myDIV").innerHTML = responseText;
} The callback function can be created with any number of arguments depending on the need. The arguments are in the order as specified in the main ajaxRequest code comments.
The sample approach can be used to make a POST call by changing the object creation as
var myAjaxRequest = new ajaxRequest("ajaxprocessor.aspx","POST","key1=value1&key2=value2”);Refer the downloaded ajaxRequest code for more technical details on each of these methods and variables.
Browser Compatibility
This code has been tested with IE, Firefox and Chrome and is expected to be working in most of the browsers. If problems are found, share them so that everyone will know.
Enhancements
Well, as mentioned at the beginning of this article, this might not be flexible enough. if you dig deep enough, you might find functionalities that could’ve included to make it better. Feel free to change the code for your usage and let me know what was missing.
Technorati Tags:
AJAX,
JavaScript,
fast,
Simple,
Object,
Class,
Snippet,
Minify,
Server,
Free,
LightWeight
