Vamos a ofrecer unas notas para aprender a programar con Ajax usando el framework Javascript Mootools, a través de la realización de un sencillo ejemplo. El ejercicio consiste en crear un enlace que, al pulsarlo, realizará una conexión con Ajax para traerse los contenidos de un archivo HTML, para mostrarlos en una caja de alerta.

Para los que no sepan lo que es Mootools, debemos referirles a nuestro Manual de Mootools. En este artículo vamos a dar por sabidas muchas cosas de Mootools, pero esperamos que con unos mínimos conocimientos se pueda seguir el ejemplo. La versión del framework que estamos utilizando en estos momentos es Mootools 1.2.

Para realizar estos ejemplos sencillos de Ajax utilizaremos la clase Request de Mootools. Dicha clase es como un envoltorio del XMLHttpRequest de Javascript, que se utiliza para crear conexiones Ajax.

Para realizar una conexión Ajax tenemos que instanciar un objeto de la clase Request, que se crea indicando una serie de opciones y eventos, que nos servirán para configurar la conexión y especificar las acciones a realizar durante el proceso de ejecución de la conexión. En este primer caso veremos un reducido juego de opciones y eventos de los que podemos utilizar en la clase.

Podemos ir viendo el objetivo a conseguir en este ejercicio.

Código HTML

Antes que nada, veamos el código HTML que necesitaríamos para crear un enlace, luego modificaremos su comportamiento con Mootools.

<a href="javascript:void(0)" id="mienlace">Pulsa este enlace</a>

El enlace tiene dos cosas que comentar. Primero el href="javascript:void(0)", que sirve para que el enlace no haga nada al pulsarse. Luego id="mienlace", que sirve para darle un nombre a ese enlace para poder referirnos a él desde Javascript.

Configurar una conexión Ajax con Request de Mootools

Ahora veamos qué se debería hacer para configurar una conexión conAjax mediante la clase Request de Mootools.

var prueboRequest = new Request({
   method: 'get',
   url: 'archivo-html-solicitud.html',
   onRequest: function() { alert('Acabas de iniciar una solicitud por Ajax!'); },
   onSuccess: function(texto, xmlrespuesta){ alert('Respuesta:\n' + texto);},
   onFailure: function(){alert('Fallo');}
}).send();

Como se puede ver, se ha creado un objeto prueboRequest que es una instancia de la clase Request. Para configurar la conexión se envían una serie de opciones:

method:
Sirve para definir que el método de conexión. En nuestro ejemplo será por GET

url:
Con esto indicamos la URL a la que queremos conectar con Ajax, para traernos el contenido de la misma. Simplemente indicamos la ruta relativa donde está el archivo al que nos conectamos. Por cierto que el archivo 'archivo-html-solicitud.html' debemos haberlo creado en nuestro servidor. Tal como está la ruta al archivo se entiende que se ha colocado en el mismo directorio que el script.

onRequest:
Esto sirve para definir un evento en la conexión, que se ejecutará cuando se inicie la conexión con el archivo. La función escrita a continuación del onRequest contiene el código que de va a ejecutar al inicio de la conexión Ajax. En nuestro ejemplo es un simple alert() de Javascript.

onSuccess:
Esto sirve para especificar un evento, que se ejecutará en caso que la conexión se realice con éxito. A continuación se debe escribir el código de la función que se ejecutará al desatarse el evento, que tiene la particularidad de recibir dos parámetros. El primero es el código HTML del archivo traído por Ajax. El segundo contendrá la respuesta XML del Request. En nuestro ejemplo la función simplemente muestra en una caja de alert() de Javascript el contenido del código HTML.

onFailure:
Con este otro evento definimos qué hacer en el caso que la conexión con Ajax haya dado un error.

También debemos fijarnos en el último .send(), que es un método que se llama sobre el objeto Request creado. Este método sirve para poner en marcha la conexión Ajax.

Asociar esa conexión a un evento de clic en el enlace

Hasta ahora tenemos un enlace HTML y una instaciación de un objeto de la clase Request. Pero tenemos que conectar estos dos elementos, para que al pulsar el enlace se cree la conexión. Para ello tenemos que añadir un evento al enlace y debemos realizarlo así en Mootools:

//función que se va a ejecutar cuando esté listo el dom
window.addEvent('domready', function(){
   //añado un evento al enlace para ejecturar al hacer clic
   $('mienlace').addEvent('click', function(evento){
      //creo y ejecuto un request como se ha visto anteriormente
   });
});

El ejemplo sencillo de conexión Ajax con Mootools completo

El código completo del ejemplo es el siguiente.

<html>
<head>
   <title>Request de Mootools</title>
   <script src="mootools-1.2-core-yc.js" type="text/javascript"></script>
</head>

<body>
Request de Mootools, un envoltorio de XMLHttpRequest.
<p>
<a href="javascript:void(0)" id="mienlace">Pulsa este enlace</a>

<script>
window.addEvent('domready', function(){
   //función que se va a ejecutar cuando esté listo el dom
   
   //añado un evento al enlace para ejecturar al hacer clic
   $('mienlace').addEvent('click', function(evento){
      //creo un request
      var prueboRequest = new Request({
         method: 'get',
         url: 'archivo-html-solicitud.html',
         onRequest: function() { alert('Acabas de iniciar una solicitud de contenidos por Ajax!'); },
         onSuccess: function(texto, xmlrespuesta){ alert('Respuesta:\n' + texto);},
         onFailure: function(){alert('Fallo');}
      }).send();      
   });
});
</script>
</body>
</html>

Podemos ver el ejemplo en funcionamiento en una página aparte.

Últimas aclaraciones para que este ejemplo Ajax-Mootools funcione

Ahora bien, conviene decir un par de cosas para terminar de aclarar este ejemplo y que cualquiera de vosotros pueda ponerlo en marcha en su ordenador o en su servidor web.

Como se puede haber entendido por las explicaciones anteriores, para la puesta en marcha de este ejemplo necesitamos dos páginas distintas. Una es la que tiene el código fuente del ejercicio y otra página que es la que se conecta por Ajax para mostrar sus contenidos. El archivo con el código Javascript lo podemos llamar de cualquier manera, pero el archivo que nos traemos por Ajax debe llamarse 'archivo-html-solicitud.html', para que la ruta de la conexión realizada en el Request funcione. Ambos archivos deben estar en el mismo directorio.

Además, para que funcione correctamente la conexión con Ajax debemos poner los archivos en un servidor Web. Si intentamos colocar los archivos en un directorio cualquiera de nuestro disco duro y luego abrir la página con código del ejemplo en un navegador, al intentar hacer la conexión http por Ajax, nos dará un error. Si abrimos directamente el archivo no se podrá realizar la conexión con Ajax. Por lo tanto debemos pasar por un servidor web para que funcione. Para ello debemos de hacer una de estas dos cosas:

1. Podemos tener un servidor web instalado en local en nuestro ordenador. Entonces simplemente colocamos los archivos en un directorio de publicación y accedemos a ellos a través de localhost. Algo como http://localhost/mootools-ajax/request-alert.html
2. Colocar los archivos en un servidor de hosting que tengamos contratado. Para ello los subimos por FTP a nuestro servidor como habitualmente habremos hecho.

Esto es todo. Espero que este primer ejemplo de Ajax con Mootools haya podido entenderse bien. Ahora puedes seguir leyendo y aprendiendo con unas modificaciones a este script, para mostrar los contenidos Ajax en el propio cuerpo de la página.