Ejemplo 2 de Ajax utilizando Mootools

  • Por
Mejoramos el ejemplo anterior de Ajax con Mootools, para que el contenido traído con Ajax se muestre en una capa div.
Acabamos de ver el primer ejemplo de Ajax con Mootools. Ahora vamos a publicar unas modificaciones bien sencillas, simplemente para hacer que los contenidos traídos por Ajax se muestren en la misma página, pero en el propio cuerpo de la página y no en una caja de alerta. El ejemplo es bien parecido, así que antes de leer esto, debemos haber leído el anterior taller de Ajax con Mootools.

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.

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

Comentarios

leonard

12/12/2008
sabes que uso el Ejemplo 2 de Ajax utilizando Mootools y quiero actualizar un div pero con info de indicadores economicos en una tablita. cada valor lo cargo llamandolo desde un enlace como este:
<script type="text/javascript" src="http://indicadores.latlink.net/variable2.asp?valor2=dolarcomprador"></script>

El tema es que cargo los valores sin problema en un html. pero cuando quiero usar dicho html para llamarlo y actualizarlo en un div con la tecnica del ejemplo, los valores no aparecen en la tabla.

cual sera el problema?

gracias, la web me ha servido mucho, los manuales son muy utiles y bien explicados.

saludos

fortalezar

01/11/2009
Ajax para direccionar a div "contenido" para varios link de menú
Hola,

Soy principiante y estoy trabajando en un sitio web. Para hacer los menúes tomé este ejemplo, pero cuando pongo el tercer link, me da un error. cómo hago para utilizar la función para 8 links en el menú?

Desde ya muchas gracias por la ayuda, saludos desde Argentina