 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Ejemplo 2 de Ajax utilizando Mootools
Mejoramos el ejemplo anterior de Ajax con Mootools, para que el contenido traído con Ajax se muestre en una capa div.
25/7/08 - 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.
+ 2 categorias relacionadas
+ 1 comentario no revisado
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
+ Entrar en Frameworks Javascript
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
 | Añadir un comentario del artículo |
Ir arriba
|
||||||||||
