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:
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:
Nada raro, cada botón pide un XML distinto que contendrá instrucciones distintas.
Veamos ahora la función pide():
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:
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
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:
- peticion.responseXML que devuelve un objeto XML partiendo de la respuesta.
- La función getElementsByTagName que es la que obtiene los datos del el objeto XML. La veremos más en profundidad más delanete, de momento quedaros con que se usa para recorrer el XML y obtener sus datos.
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