Download the actual object here, read on for instructions.

AJAX, which stands for Asynchronous JavaScript And XML, is a cool new method of doing things on a web page. No longer are web pages forced to be cold and static. With AJAX, you can use javascript to send requests back to the server to update the page with new data, or to save data to the server.

Not a lot of people know it, but javascript is object oriented. Once you learn how to create objects they can save you a lot of time. I decided to create an object that would encapsulate all the functionality needed to do a request via AJAX, and I'm gonna share it with all of you!

First off, you'll need the object it self, which you can download here. Open it up and take a look thru it. Object oriented js is strange so if you don't understand it all, just google around for "Object Oriented javascript" or something like that. I'll go over the methods found in the class object, but I'm not going into how to write OO js.

In order to create an instance of the ajaxRequest object you'll need to initialize it:
var req = new ajaxRequest();

The above line creates an instance of the ajaxRequest object called req. The next thing to do is to tell your request object which function, if any, to call when the request returns:

req.setCallBackFunc( function()
	{
		alert( 'The request returned' ); 
	} );

The above line will create an anonymous function which contains the alert statement. If you wanted to pass the request object into the anonymous function you could do that like this:

 req.setCallBackFunc( function( req ) {
 	alert( req.responseText ); 
} ); 

The above example passes the request object into the anonymous function and alerts the response text.

The next function on the list is called processReqChange but you don't have to worry about it. Its for the object itself to use as a call back function. That function calls whatever function you tell it to call using the setCallBackFunc function. It also creates some data members, namely responseText and responseXML.

The final function you need to know about inorder to make this work is doPost( url, qryStr ). doPost expects 2 input parameters, the url you want the request to be sent to, and a query string, formatted just like a GET request's query string ( var1=val1&var2=val2 ) to use as the post variables. This function simply wraps up all he calls you need to make in order to do a post request. Example:

// Create the ajaxrequest object
req = new ajaxRequest();

// Set the call back function
req.setCallBackFunc( function( req ) 
	{
		alert( req.responseText );
	} );
	
// Build the query string and the url
var url = 'http://tolley.digitalpeer.com';
var qryStr = 'var1=val1&var2=val2';

// Send the request
req.doPost( url, qryStr );

When this request returns it will alert whatever is in the response text. You can also access the response xml just like you would a normal xmlHTTPRequest object, req.responseXML. There are a few more functions available but I'll leave them as an exercise to the reader. The are all commented and named after xmlHTTPRequest object function that they wrap around, so it shouldn't take you too long of figure any one of them out.

The only other function that I feel I should mention is a very handy one. Its called debug and it will take the responseText and insert it into a new div tag at the end of your document so you can see whats going on when ever you need to.
Example:

 req.debug(); 

Thats it, thats all you have to do.

Feel free to use this object. It could use some error handling and theres maybe one or two other things I'm thinking about doing to it, but I'm currently using it as is on this site and at work so I'm comfortable with it. If you do use this, or any of my code, anywhere, hit my contact page and let me know. I just like to know my work is out there helping other people.