Explicación del proceso de creación de una conexión Ajax con Mootools y un par de ejemplos sencillos de utilización de la clase Request.
Para realizar conexiones Ajax con la clase Request tenemos que instanciar un objeto de la clase Request, configurándolo tal como necesitemos a través de un objeto de opciones que enviaremos al constructor. Luego deberemos iniciar la solicitud Ajax en cualquier momento, con el método send(). Al realizarse la conexión con el servidor, al completarse o al producirse un error, la clase Request produce eventos, en los que podemos escribir el código Javascript a ejecutar cuando ocurra cada uno de esos casos.
Como podremos imaginar al leer el párrafo anterior, trabajar con Request no es una acción que se hace en un solo paso, sino que tendremos que conocer la clase para poder configurar la conexión, crear el código de algunos eventos que produce y realizar la conexión en si con el método send(). Veamos un caso sencillo.
//instancio el objeto Request
var miAjax = new Request({
"url": "contenido.html"
});
//codifico el evento onSuccess, que se ejecuta cuando la solicitud se ejecutó con éxito
miAjax.addEvent("success", function(respuestaAjax){
//coloco el texto recibido como respuesta en el código HTML de un elemento de la página
$("contenedorajax").set("html", respuestaAjax);
});
//invoco el método send para ejecutar la llamada Ajax
miAjax.send();
En el anterior código, como primer paso, instancio un objeto Request, pasándole al constructor un objeto de opciones con las que configurar la conexión Ajax. En este caso estoy enviando únicamente una propiedad para su configuración que es "url", con la dirección del archivo que quiero solicitar en esta conexión. Existen muchas otras opciones de configuración que nos serán útiles en diversos casos y que veremos más adelante.
Como segundo paso codifico el evento "onSuccess", añadiéndolo al objeto Request instanciado en el paso anterior por medio de la función addEvent(), que recibe el nombre del evento que estamos definiendo y la función que queremos que se ejecute cuando se produzca dicho evento.
El código del evento podría ser el que nosotros necesitásemos, en mi caso simplemente he escrito la respuesta en un elemento de la página, que me llega en una variable que he llamado "respuestaAjax" que recibe la función que tiene el código a procesar en el evento.
El tercer paso es ejecutar el método send(), sobre el objeto instanciado de la clase Request, que iniciará la solicitud Ajax.
Podemos ver una página con este ejemplo en marcha.
El código completo de este ejemplo de solicitud Ajax sería el siguiente:
<html>
<head>
<title>Ejemplo Ajax mootools</title>
<script src="mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script>
window.addEvent("domready", function(){
alert("Página cargada... voy a configurar la conexión Ajax");
//instancio el objeto Request
var miAjax = new Request({
"url": "contenido.html"
});
//codifico el evento onSuccess, que se ejecuta cuando la solicitud se ejecutó con éxito
miAjax.addEvent("success", function(respuesta){
//coloco el texto recibido como respuesta en el código HTML de un elemento de la página
$("contenedorajax").set("html", respuesta);
});
alert("Voy a ejecutar la solicitud Ajax");
//invoco el método send para ejecutar la llamada Ajax
miAjax.send();
});
</script>
</head>
<body>
<h1>Ejemplo de Ajax con Mootools</h1>
<div id="contenedorajax">
</div>
</body>
</html>
Resumir el código de una solicitud Ajax
El código que hemos visto realiza las acciones esenciales para crear una solicitud de Ajax en 3 pasos ya vistos: instanciación del objeto Request, codificación de eventos y llamada al método send() para realizar la conexión propiamente dicha. Sin embargo, el código Javascript y los diversos modos de uso que podemos hacer de Mootools, nos permitirían resumir todas estas acciones en un único paso. Esto nos produciría un código un poco más complejo de leer, pero más corto (por tanto más ligero para la descarga) y elegante.En realidad el código que veremos a continuación hace justo lo mismo que el anterior, pero quizás resulte más interesante. Todo depende del desarrollador y su nivel de experiencia, para sentirse más o menos cómodo con esta otra codificación.
var miAjax = new Request({
"url": "contenido.html",
"onSuccess": function(respuesta){
$("contenedorajax").set("html", respuesta);
}
}).send();
Como se puede ver, se instancia el objeto Request y en las opciones de configuración ya se le envía la función que se tiene que ejecutar con el evento onSuccess. Además, el propio constructor del objeto de la clase Request lo enganchamos con una llamada al método send(), que hará que una vez construido el objeto, se inicie la solicitud Ajax.
Este script se puede ver en marcha en una página aparte.
Hemos visto aquí dos ejemplos de una sencilla solicitud Ajax con Mootools, que en realidad es el mismo script codificado de dos maneras distintas. Con esto podremos crear una conexión Ajax que nos valdrá en muchos casos, aunque a medida que nos pongamos a hacer aplicaciones en el cliente con Ajax veremos que todavía hay muchas de las necesidades que no están cubiertas con lo que hemos visto hasta el momento. Así pues, lo más destacable que se debe conocer de la clase Request es la cantidad de opciones de configuración que nos ofrece, que nos podrán ayudar a solventar los casos de uso que podamos ir encontrando. Todo esto lo veremos dentro de poco en próximos artículos.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...