Trabajar con la clase Request de Mootools

  • Por
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.
En el artículo anterior introdujimos las clases que debes conocer para trabajar con Ajax en Mootools, es decir, la clase Request y sus heredadas, que nos ofrecen la infraestructura para configurar y ejecutar varios tipos de solicitudes Ajax. Ahora veremos un ejemplo sencillo para que aprendamos a trabajar con 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.

Nota: cuando utilizo addEvent() no tengo que poner el "on" de "onSuccess" en el nombre del evento que quiero añadir.

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.

Nota: La función de este evento también podríamos haberla escrito como una de las propiedades del objeto de options enviado al constructor para instanciar el objeto Request. Veremos pronto un ejemplo.

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>

Nota: La solicitud Ajax se realiza por http. Esto quiere decir que el navegador va a necesitar que la respuesta le llegue por http, es decir, desde un servidor web, ya sea en un espacio de hosting o bien en un servidor web que tengas instalado en tu ordenador. Si ejecutas el código tal cual sin pasar por un servidor el Ajax no funcionará. Además, en el servidor también tendrás que colocar una página que es la que solicitas por Ajax, que has indicado en la propiedad "url" de las options del constructor. En este caso, como sólo se indica el nombre del archivo "contenido.html" se entiende que la página con el script Mootools / Ajax está en el mismo directorio que el archivo que accedemos por Ajax "contenido.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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir