The first article since the new design of solutoire.com is about mootools, an Object-Oriented javascript framework. Mootools extended the moo.fx library with some neat features. Of course Valerio Proietti optimized everything just like moo.fx, so mootools is lightweight.

Getting started

If you haven’t used moo.fx or mootools before, a good place to start is at the mootools wiki. At the time of writing the wiki is far from finished but there’s enough info to learn about the ‘mootools style of javascripting’.
When you think you’re ready for it, go to the mootools download page. I suggest you take the release version, because it’s tested and stable. I had some trouble with the revision 70 to get drag and drop working under IE6. When I tried the same with the release version (revision 64), it just worked.
You’ll see the mootools framework is modular. You can choose which files you want. In this tutorial we’ll need the following files:

  • Moo.js – the main library, required by all the scripts
  • Function.js – contains chains, function methods, type detection
  • Array.js – contains array methods such as each, copy, extend, test
  • String.js – contains string methods, such as test, camelCase, capitalize, trim and clean
  • Element.js – one of the most important mootools element
  • Ajax.js – successor of moo.ajax, used for asynchronous requests

Before you press the button that says ‘generate your download’, make sure the compression is set to ‘none’. When set to ‘high’ or ‘normal’, the generated code isn’t readable, and since we’re learning how to use mootools, we need to take a look at the source a few times.

Using the ‘ajax’ class

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 class’ source.

var Ajax = ajax = new Class({
	setOptions: function(options){
		this.options = {
			method: \'post\',
			postBody: \'\',
			async: true,
			onComplete: Class.empty,
			update: null,
			evalScripts: false
		};
		Object.extend(this.options, options || {});
	},
	initialize: function(url, options){
		this.setOptions(options);
		this.url = url;
		this.transport = this.getTransport();
	},

You can see the class is initialized by new ajax(url, options) where url is the location of your server-side script.
Note that new Ajax() and new ajax() can be used for initialization. The options and their defaults are shown in the setOptions method. Here’s an example using the ajax class:

new ajax(\'path/to/script.php\',{postBody:\'answerme=1\', onComplete: showResponse, update: \'container\'}).request();

The example code makes an asynchronous request ('.request()') to ‘path/to/script.php?answerme=1′ and show all text echoed by ‘path/to/script.php’ in a element with id ‘container’. Note that the class only makes the request when the request() method is called. The function showResponse(request) is called when the request is completed. An example of a request with an inline onComplete function is:

new ajax(\'path/to/script.php\',{onComplete: function(request){alert(request.responseText);}).request();

This example shows an alert with the text that is returned by ‘path/to/script.php’. So there are two ways two get the response of the server-side script, namely with onComplete and update. Both function retrieve all data echoed by the server-side script. The difference is how they treat the data. When using 'update' the specified element’s innerHTML is replaced by the echoed data. When 'onComplete' is used, the function retrieves the data and you can do with it whatever you want.
The ajax class contains one very interesting option I haven’t written about yet. It’s 'evalScripts'. When set to true, the request will evaluate any script between ‘script’ tags in the server response. Here’s an example of the showResponse function:

function showResponse(request){
	alert(request);
}

Example

I made an example so you can see how it works. This is the server-side script (PHP):

<?php
	if(!empty($_POST) && isset($_POST[\'answerme\'])){
			echo \"answerme: \".$_POST[\'answerme\'];
	}
?>

All it does is echo back the ‘answerme’ value sent to the server. The following functions I used for sending and retrieving the data:

function ajaxRequest(){
	new ajax(\'ajax1.php\',{postBody:\'answerme=ok\', onComplete: showResponse, update:\'container\'}).request();
	return false;
};

function showResponse(request){
    alert(request);
};

You can see it working over here.

That will be it for now. if you have any question please ask!