Introducción al AJAX con Mootools 1.2.1
Introducción.
De vuelta a Mootools, fue el primero de los frameworks de Javascript que utilicé hace un poco mas de un año. Después he experimentado un poco mas con Prototype/Scriptaculous y ahora estoy empezando a leer un poco acerca de jQuery. Sin embargo siempre me ha gustado Mootools y es hora de documentar, tal y como se hizo con Prototype, como se realizan los llamados asíncronos (AJAX) con él.
En este artículo voy a describir las cuatro maneras como es posible realizar llamados con AJAX utilizando MooTools.
- El método load de los elementos.
- El método Request.HTML.
- El objeto Request directamente.
- El método Request.JSON.
1. El método load de los elementos.
Este método lo tienen los elementos (componentes) de Mootools. Es muy útil porque permite actualizar rápidamente cualquier elemento con el contenido HTML retornado por un llamado asíncrono. A pesar de ser muy fácil de utilizar, carece de las opciones y la flexibilidad de los métodos siguientes, por ejemplo, del paso de parámetros.
Para hacer uso de este método se utiliza la siguiente instrucción.
$('componente').load(urlRemota);
Donde componente es el elemento que se desea actualizar (un div por ejemplo) y urlRemota es el URL que se invoca de manera asíncrona para obtener el código HTML con el que se reemplazará el contenido del elemento.
Para más información acerca de este método consultar la documentación de Request.HTML.
2. El método Request.HTML.
Este método es una facilidad implementada sobre el método analizado a continuación. Permite obtener el mismo objetivo del método anterior con una mayor flexibilidad.
var myHTMLRequest = new Request
.HTML({
url: urlRemota,
update: 'componente',
method: 'post',
data: $('formulario'),
onRequest: function()
{
// Al iniciar la solicitud.
},
onComplete: function(html)
{
// Al completarse la solicitud.
},
onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript)
{
// Si la solicitud se completó exitosamente.
/*
responseTree - (element) The node list of the remote response.
responseElements - (array) An array containing all elements of the remote response.
responseHTML - (string) The content of the remote response.
responseJavaScript - (string) The portion of JavaScript from the remote response.
*/
},
onFailure: function(elemento)
{
// Si la solicitud se completó con problemas.
}
})
.send();
De manera similar al método anterior, el atributo url define el URL que se invocará para obtener de manera asíncrona el código HTML para actualizar el elemento referenciado por el atributo update. El atributo method define si se utilizará POST o GET para la invocación del llamado.
El resto de atributos son opcionales. El atributo data permite especificar variables que van a ser incluídas con el requerimiento. Pueden especificarse como un query string de la forma "var1=valor1&var2=valor2", como un hash de la forma {"var1": "valor1", "var2": "valor2"} o enviando un formulario por completo de la forma $('id_formulario').
Los atributos onXXX son manejadores de eventos a manera de callbacks y son ejecutados según lo que acontezca durante la solicitud del llamado asíncrono.
- onRequest: ha sido iniciado el proceso de la solicitud.
- onComplete: la solicitud ha terminado.
- onSuccess: la solicitud ya ha terminado y terminó exitosamente.
- onFailure: la solicitud ya ha terminado y terminó de manera fallida.
Para más información acerca de este método consultar la documentación de Request.HTML.
3. El objeto Request directamente.
Esta es la forma mas flexible de utilizar AJAX con MooTools ya que permite realizar la solicitud y manipular que se desea hacer con el resultado obtenido, ya no necesariamente actualizar un elemento.
var myRequest = new Request({
url: urlRemota,
method: 'post',
data: $('formulario'),
onRequest: function()
{
// Al iniciar la solicitud.
},
onComplete: function(html)
{
// Al completarse la solicitud.
},
onSuccess: function(responseText, responseXML)
{
// Si la solicitud se terminó exitosamente.
/*
responseText - (string) The returned text from the request.
responseXML - (mixed) The response XML from the request.
*/
// Aquí se implementa que hacer con la respuesta del llamado asíncrono
// cuando el procedimiento fue exitoso.
/*
Actualizando manualmente el componente,
reproduce la funcionalidad de Request.HTML:
$('componente').set('html', responseText);
*/
},
onFailure: function(xhr)
{
// Si la solicitud se completó con problemas.
/*
xhr - (XMLHttpRequest) The transport instance.
*/
// Aquí se implementa que hacer con la respuesta del llamado asíncrono
// cuando el procedimiento fue fallido.
},
onCancel: function()
{
// La solicitud fue cancelada.
},
onException: function(headerName, value)
{
// La transmisión de la cabecerá falló.
/*
headerName - (string) The name of the failing header.
value - (string) The value of the failing header.
*/
}
}).send();
Se incluyen dos manejadores de eventos adicionales.
- onCancel: la solicitud ha sido cancelada.
- onException: la transmisión de la cabecera (header) provocó una excepción.
Se incluyen además, entre otras cosas, la propiedad running que permite verificar si el objeto myRequest se encuentra o no actualmente procesando una solicitud y al método cancel() que permite cancelar la solicitud activa, generando consecuentemente un evento de cancelación (ver onCancel).
Para más información acerca de este método consultar la documentación de Request.
4. El método Request.JSON.
Es una facilidad construída sobre el objeto Request que permite manipular respuestas de llamadas asíncronas en formato JSON (Javascript Object Notation).
var jsonRequest = new Request.JSON({
url: urlRemota,
method: 'post',
data: $('formulario'),
onRequest: function()
{
// Al iniciar la solicitud.
},
onComplete: function(responseJSON)
{
// Al completarse la solicitud.
},
onSuccess: function(responseJSON, responseText)
{
// Si la solicitud se terminó exitosamente.
/*
responseJSON - (object) The JSON response object from the remote request.
responseText - (string) The JSON response as string.
*/
/*
La información recibida del llamado asíncrono se puede obtener como atributos
del objeto responseJSON, por ejemplo acceder a responseJSON.nombres
*/
},
onFailure: function(xhr)
{
// Si la solicitud se completó con problemas.
/*
xhr - (XMLHttpRequest) The transport instance.
*/
}
}).send();
Para más información acerca de este método consultar la documentación de Request.JSON.
Ejemplo funcional.
La aplicación de ejemplo obtiene información dinámica del servidor de manera asíncrona, para actualizar los campos DIV de la página utilizando cada una de las cuatro técnicas descritas en este artículo.
Para la generación de la información dinámica del lado del servidor se utilizaron dos scripts muy simples desarrollado en PHP, uno de ellos genera una cadena constante junto con la fecha actual y el otro prepara la respuesta JSON a partir de la información recibida. Además muestra la información recibida a través del POST. El script ContenidoRemoto.php es utilizado para los métodos 1, 2 y 3 mientras que el script Contenido RemotoJson.php es utilizado para el método 4.
Para consultar el ejemplo funcionando en el servidor de demostración se debe seguir este enlace.
Para consultar el código fuente de cada uno de los archivos que componen el ejemplo se deben seguir los enlaces dispuestos a continuación: index.php, ContenidoRemoto.php y ContenidoRemotoJson.php.
Enlaces.
- MooTools.
http://mootools.net/ - Documentación de MooTools.
http://mootools.net/docs/- Request.
http://mootools.net/docs/Request/Request - Request.HTML.
http://mootools.net/docs/Request/Request.HTML - Request.JSON.
http://mootools.net/docs/Request/Request.JSON
- Request.
- Definición de AJAX.
http://en.wikipedia.org/wiki/AJAX - Definición de JSON.
http://en.wikipedia.org/wiki/JSON
