Mootools nos permite integrar fácilmente Ajax según nuestras necesidades, ya sea mediante el envio de formularios o, como lo veremos ahora, el rescate de información desde una fuente externa a nuestra página, sin tener que volver a cargar la página. Primero, construiremos un HTML donde estará un lugar delimitado en que se cargará la info desde otro HTML creado también por nosotros (un lorem ipsum cualquiera). Y claro, un botón que gatillará la acción mediante Ajax.

<a href="" id="comienza">Rescata la info</a><br />
<div id="traelo_aqui"><br />
     <p>Trae aquí la info</p><br />
</div>

Básicamente es un botón que al ser presionado cargará la info [desde una página determinada por nosotros][1] mediante JS hasta el div que definimos. Ahora, mediante Mootools crearemos el evento:

$('boton').addEvent('click', function(e) {<br />
     e = new Event(e).stop();<br />
     var url = "http://www.csslab.cl/ejemplos/ajax_mootools/lipsum.html";<br />
     $('traelo_aqui').empty().addClass('cargando');<br />
          new Ajax(url, {<br />
          method: 'get',<br />
          update: $('traelo_aqui'),<br />
          onComplete: function() {<br />
               $('traelo_aqui').removeClass('cargando')<br />
          }<br />
     }).request();<br />
});

Al elemento con id=“boton” (o sea, ) le agregamos un evento de ‘click’ (addEvent). De ahí, comenzamos una función que a través del método ‘get’, trae lo que esté en la variable url (var url) y refresca lo que esté adentro del id=“traelo_aqui” (o sea