<$BlogRSDUrl$>

13 marzo 2006

Tutorial AJAX - Lección 5 - AJAX 

Recapitulemos lo que hemos visto:
Hemos visto cómo modificar elementos de la página mediantes JavaScript, DOM y CSS.
Hemos visto cómo comunicarnos con el servidor (de una forma fácil gracias a Prototype) de forma asíncrona.
Cómo recoger los datos que nos dá el servidor y tratarlos.
Pero en los dos ejemplos anteriores éstos datos eran texto simple que colocabamos a nuestra elección. Y nos falta la X de AJAX: XML.

Vamos a estudiar ésto con un ejemplo: Tendremos nuestra página web con varios botones que realizarán diferentes peticiones al servidor. El servidor devolverá diferentes documentos XML con la siguiente estructura:

<?xml version="1.0"?>
<cambio>
<id_elemento>identificador</id_elemento>
<contenido>contenido</contenido>
</cambio>


El significado está claro: nos devuelve datos de un elemento de la página (en nuestro ejemplo serán capas) y qué hay que poner en ese elemento. Podría ser tan complejo como quisiéramos, pero de momento nos es suficientes con ésto ¿no os parece?
Veamos el código HTMl:

<input type="button" id="boton1" onclick="pide('leccion5_1.xml')" value="Uno">
<input type="button" id="boton2" onclick="pide('leccion5_2.xml')" value="Dos">
<input type="button" id="boton3" onclick="pide('leccion5_3.xml')" value="Tres">

<div id="leccion5_capa1" style="border: 1px solid black; overflow: auto; width: 300px; height: 150px;float:left"></div>
<div id="leccion5_capa2" style="border: 1px solid black; overflow: auto; width: 300px; height: 150px;float:left"></div>
<div id="leccion5_capa3" style="border: 1px solid black; overflow: auto; width: 300px; height: 150px;"></div>

Nada raro, cada botón pide un XML distinto que contendrá instrucciones distintas.
Veamos ahora la función pide():

function pide(url)
{
var myAjax = new Ajax.Request(url, {method: 'get', onComplete: procesa});
}

Fácil tambien, ¿no? Se pide el archivo (en este caso XML) que venía en el parámetro y cuando se tenga se ejecuta procesa. Veamos esta función:

function procesa(peticion)
{
var respuesta = peticion.responseXML;
var txt = peticion.responseText;
var elemento = respuesta.getElementsByTagName('id_elemento').item(0).firstChild.data;
var contenido = respuesta.getElementsByTagName('contenido').item(0).firstChild.data;
$(elemento).innerHTML = contenido;
}

Nada nuevo excepto:

Con ésto termina la lección cuyo ejemplo podéis encontrar aquí. Siento la publicidad, de la que no me llevo nada (si me llevo de la que hay en este blog), pero no he encontrado nada mejor.
La siguiente lección será de acceso a bases de datos por petición (offline) de los alumnos.

0 Comentarios
Comentarios: Publicar un comentario
Nedstat Basic - Estadisticas gratis