Mejoramos el ejemplo anterior de Ajax con Mootools, para que el contenido traído con Ajax se muestre en una capa div.
Como decía, la idea es realizar una conexión con Ajax, así que la única diferencia es que, al mostrarse el contenido del archivo, se mostrará en una capa en el mismo contenido de la página., sin recargarla, por supuesto. Así que, de la conexión que hacemos con el objeto de la clase Request, lo único que cambia es lo que va a pasar en caso que la conexión se realice con éxito (Evento onSuccess).
Antes de continuar, si se desea, puede verse en ejemplo en marcha.
Código HTML
El HTML que necesitaremos para el ejemplo debe contener además un contenedor para mostrar la respuesta Ajax.
<a href="javascript:void(0)" id="mienlace">Pulsa el enlace</a>
<p>
<div id="cajaactualizacion">
Aquí voy a actualizar el texto!
</div>
El enlace no ha cambiado, lo que se puede ver a continuación es que tenemos un DIV llamado "cajaactualizacion", que es donde mostraremos el contenido del archivo.
Código Javascript relativo al Ajax con Mootools
El código es exactamente igual, pero se ha utilizado una función distinta en el evento onSuccess.
var nuevoRequest = new Request({
method: 'get',
url: 'archivo-html-solicitud.html',
onRequest: function() { alert('Empezando la solicitud con Ajax!'); },
onSuccess: function(texto, xmlrespuesta){ $('cajaactualizacion').set('html',texto);},
onFailure: function(){alert('Error!');}
}).send();
Como se decía, lo único que debemos entender, de manera adicional a lo que ya vimos en el ejemplo del artículo anterior, es esto:
$('cajaactualizacion').set('html',texto);
Simplemente se está haciendo una llamada a un método del elemento $('cajaactualizacion'), que es el DIV donde se iban a escribir los resultados de la conexión Ajax. A este $('cajaactualizacion') le pasamos el método set, pasando a su vez los parámetros "html", para decir que queremos cambiar el innerHTML de la capa, y luego la variable texto, que contiene el texto del archivo traído por Ajax.
El código del segundo ejemplo de Ajax y Mootools
<html>
<head>
<title>Request de Mootools</title>
<script src="mootools-1.2-core-yc.js" type="text/javascript"></script>
</head>
<body>
Clase Request de Mootools, un envoltorio de XMLHttpRequest. Para Ajax!
<p>
<a href="javascript:void(0)" id="mienlace">Pulsa este enlace</a>
<p>
<div id="cajaactualizacion">
Aquí voy a actualizar el texto!
</div>
<script>
window.addEvent('domready', function(){
//función a ejecutar cuando esté listo el dom
$('mienlace').addEvent('click', function(evento){
var nuevoRequest = new Request({
method: 'get',
url: 'archivo-html-solicitud.html',
onRequest: function() { alert('Empezando esta solicitud Ajax!'); },
onSuccess: function(texto, xmlrespuesta){ $('cajaactualizacion').set('html',texto);},
onFailure: function(){alert('Error!');}
}).send();
});
});
</script>
</body>
</html>
Podemos ver en marcha el ejemplo en una página aparte.
Atentos a las otras explicaciones y recomendaciones adicionales tratadas en el artículo anterior!, que hay cosas que no hemos comentado aquí por haberse dado por entendidas.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...