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.
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>
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.
Compartir en redes sociales
Usuarios: 
11 de enero de 2010
Valoración del artículo:
