A common practice with Ajax is to update the content of a DOM element with the results of an Ajax request. In other words, fetch new html and replace the inner HTML of some DOM element with the new HTML.

MooTools provides a Request extension that automates this for you. Here is the documentation for Request.HTML.js. It takes all the same options as Request plus three new ones:

The Element to insert the response text of the Request into upon completion of the request.
If set to true, script tags inside the response will be evaluated. Defaults to true.
If set to true, the entire response will be evaluated. Defaults to false.

Here's an actual working Request request you can execute:

This is a div that we'll insert our ajax response into.

new Request.HTML({
	url: '/Ajax.Request.Example.html',
	method: 'get',
	update: 'ajaxExample',
	evalScripts: true, /* this is the default */
	onComplete: function(){console.log('ajax complete!')}
execute this code

Note that you can keep the Request object around:

var myRequest = new Request(...);

Also note that creating an instance of the class doesn't actually fire the request; you need to call the method .send() to do that.

mootorial/07-request/01-request.html.txt · Last modified: 2009/03/18 17:09 by aaron-n