I’m writing this article because my old article about the Mootools ajax class is outdated because of the API changes in Mootools version 1.0. This article will be an update of the previous article.

Using th XHR class

The XHR class is new since Mootools 1.0. It’s a basic wrapper for the XMLHTTPRequest. To have a better understanding of the options of the XHR class let’s take a look at it’s source.

var XHR = new Class({

	options: {
		method: 'post',
		async: true,
		onRequest: Class.empty,
		onStateChange: Class.empty,
		onSuccess: Class.empty,
		onFailure: Class.empty,
		headers: {}
	},

	initialize: function(options){
	...

So you can see the default values for the options. The meaning of each options is described in the Mootools docs. As you can see an XHR object is initialized by new XHR({options object}). No url is set when making a new XHR object. Here’s a basic example of an ajax call to 'location/myscript.php' and when the call’s successfull it let shows you the response in an alert box.

var showSuccess = new function(req){
	alert(req);
};

//a GET request
new XHR({method: 'get', onSucces: showSuccess}).send('location/myscript.php', 'answerme=1&q=test');

//this does the same, but using POST
new XHR({onSuccess: showSucces}).send('location/myscript.php', 'answerme=1&q=test');

Using the Ajax class

In the old Mootools there where two constructors for the Ajax class. New Ajax objects were created by new ajax(...) and new Ajax(...). In version 1.0 it’s only possible to use new Ajax(...).

The Ajax class is a very simple way to make requests to server-side scripts. Now, check the following code, it’s a small part of the Ajax class I took from SVN lately.

var Ajax = XHR.extend({

	options: {
		postBody: null,
		update: null,
		onComplete: Class.empty,
		evalScripts: false,
		evalResponse: false,
		encoding: 'utf-8'
	},

	initialize: function(url, options){

What exactly can we learn from this code? We can see the the Ajax class extend the XHR object, so it depends on the XHR class. We can also see that the Ajax class is initialized by new Ajax(url,options) where url is a string containing the location of a server-side script. The second argument is the options object, of which we can see the default in the default options object of the Ajax class. The options shown in are not the complete set of options. Because Ajax extends the XHR class, the options of the XHR class can also be set. Here’s an example of how to make a POST request to a script located at 'location/myscript.php', the response will be shown when the call fails.

var showFailure = function(){
	alert('Call failed!');
}

new Ajax('location/myscript.php', {postBody:'answerme=1&q=2', onFailure: showFailure}).request();

As you can see the onFailure option isn’t set in the default options of the Ajax class. The Ajax class takes the onFailure option from the XHR class because it extends it.

Which one should I use?

Ok, Mootools provides two classes for making ajax calls, which should you use? If, you’re sending forms by the use of asynchronous requests, you should use the Ajax class. In the Mootools docs is described how to send a form through ajax. In most other ways you won’t need it and you’ll be good with the XHR class.

A more advanced example

Here’s an example that shows an ajax loader image when the request is being processed:

//element with the ajax loader image
var loadingImg = $('ajaxLoader');

//function that switches visibility of loadingImg
var showLoad = new function(show){
	if(show){
		loadingImg.style.display = 'block';
	}else{
		loadingImg.style.display = 'none';
	}
};

//request function
var xhrFunc = new function(){
	//show loader image
	showLoad(true);

	new XHR({
		onSuccess: function(req){
			//hide image
			showLoad(false);
			//alert request
			alert(req);
		}}).send('location/myscript.php','answerme=1');
};

This should get you started, for further reading I refer to my older article about the ajax class.