SweetVision Javascript and other web programming topics

The MooTools Ajax class, the easiest path to dynamic content.

The guys over at MooTools created a whole series of remote server JavaScript classes that make it easier to communicate asynchronously with the server. One of the easiest is the object found in MooTool’s Ajax.js file aptly named the Ajax object.

The Ajax object is not really designed for complex handling of the response from the server; it is really a down and dirty go here and put what you find there in this element kind of object. So the basic syntax is:

1
2
3
4
5
<div id="showTime"></div>

<script language="JavaScript">&gr;

var myAjax = new Ajax('http://www.sweetvision.com/servertime.php', {update: $('showTime')});

myAjax.request();

</script>&gr;

In the preceding code we are creating a new Ajax object that accesses the URL ‘http://www.sweetvision.com/servertime.php’ and what ever is retuned by that URL is injected into the DIV identified by “showTime”. Request() is the member function of the Ajax object that actually sends the request, the object handles the rest.

Another thing that the Ajax object simplifies for you is sending the contents of a form asynchronously. If you have included Ajax in your download of MooTools then any time you reference a form with $(‘formID’) it automatically has an Ajax object in it and you can use $(‘formID’).send() to send the form to the server. Send() takes the same options that the Ajax() constructor takes so you can use update: just like in the example above to display the results of your form submission on your page. You also might want to pass in a function to the onComplete event and hide the form when the ajax request is completed.