El lenguaje XML
Como ya se ha comentado en la introducción, el lenguaje XML es una lenguaje de etiquetado que nos va a servir para realizar la comunicación entre cliente y servidor en nuestras conexiones AJAX.
La definición formal es la siguiente:
XML, siglas en inglés de eXtensible Markup Language ('lenguaje de marcas extensible'), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). Es una simplificación y adaptación del SGML y permite definir la gramática de lenguajes específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML). Por lo tanto XML no es realmente un lenguaje en particular, sino una manera de definir lenguajes para diferentes necesidades, de ahí que se le denomine metalenguaje1 . Algunos de estos lenguajes que usan XML para su definición son XHTML, SVG, MathML. (wikipedia)
Pero lo que nos interesa sobre XML en este curso es la aplicación que le vamos a dar. El lenguaje XML nos permite expresar información estructurada de una forma abstracta y reutilizable. Esto significa que tenemos información organizada (estructurada) de forma jerárquica siguiendo unas normas claras. Por ejemplo, podremos enviar información de un librería que contendrá un listado de libros (siguiendo la jerárquica libería → libros). A su vez, podemos reutilizar la información de los libros de forma independiente en otro documento XML. Todo esto se ve de forma mucha más clara en el siguiente apartado donde mostraremos un documento XML y las partes que lo compone.
Partes de un documento XML
Dentro de un documento XML podemos encontrar varias partes diferenciadas. Al principio encontramos la cabecera donde se indica la versión de XML que estamos usando y el tipo de codificación que se va a emplear:
<?xml version="1.0" encoding="ISO-8859-1" ?>
Justo después de la cabecera tenemos el cuerpo del documento. Esta es la parte donde encontraremos la información que queremos transmitir. El cuerpo esta formado por un elemento raíz (único y necesario) que contienen una sucesión de nodos anidados (elementos) que entablan entre ellos una jerarquía padre/hijo:
<raiz>
<alumno>
<nombre>Luis</nombre>
</alumno>
</raiz>
Los elementos pueden tener atributos, que son una manera de incorporar características o propiedades a los elementos de un documento. Por ejemplo en el elemento "
<alumno dni="48355380Z">
<nombre>Luis</nombre>
</alumno>
También podemos encontrarnos de forma frecuente en un documento XML secciones CDATA. Estas secciones son una forma fácil de encapsular código que contenga palabras y caracteres reservados por la sintaxis XML. Para hacerlo se escribe <![CDATA[ justo después de la apertura del nodo y ]]> antes del cierre del mismo. Esto nos puede ocurrir al intentar usar los simbolos mayor que y menor que en un documento:
<alumno dni="48355380Z">
<nombre>Luis</nombre>
<nota><![CDATA[>5]]></nota>
</alumno>
Es recomendable que la información de tipo texto (descripciones, resúmenes etc...) este dentro de secciones CDATA, así como los nombres de ficheros. Siguiendo el curso y como resumen, vamos a mostrar un ejemplo de un documento XML completo con información sobre libros:
<?xml version="1.0" encoding="utf-8"?>
<raiz>
<libro isbn="0000000001">
<titulo>Don Quijote de la Mancha</titulo>
<autor>Cervantes</autor>
<imagen><![CDATA[imagen1.jpg]]></imagen>
</libro>
<libro isbn="0000000002">
<titulo>Episodios Nacionales</titulo>
<autor>B. Perez Galdos</autor>
<imagen><![CDATA[imagen2.jpg]]></imagen>
</libro>
<libro isbn="0000000003">
<titulo>Yo, Robot</titulo>
<autor>Isaac Asimov</autor>
<imagen><![CDATA[imagen3.jpg]]></imagen>
</libro>
</raiz>
¿Por qué usar XML con AJAX?
Hasta ahora hemos visto como enviar y recibir información entre cliente (JAVASCRIPT) y servidor (PHP) por AJAX con texto plano. Esto puede valernos si solo necesitamos recuperar o enviar un mensaje simple (pj: “tarea realizada”) o un fragmento de código HTML. Pero a la hora de recibir o transmitir información estructurada, como vectores, matrices y objetos, necesitamos un lenguaje que entiendan tanto cliente como servidor.
Elegir XML para esta comunicación tiene varias ventajas:
- Es un lenguaje fácil de leer para los humanos (con un simple vistazo basta para identificar rapidamente que tipo de información contiene).
- Permite crear una jerárquica entre los datos (anidando nodos).
- Es la forma más frecuente en software para enviar y recibir datos entre arquitecturas y lenguajes diferentes.
También existen desventajas a la hora de usarlo:
- La información devuelta no nos sirve directamente. Es necesario llevar a cabo un proceso de lectura/recorrido del documento XML.
- El sistema de etiquetado que emplea XML duplica información en lo documentos y los hace pesados.
- Necesitamos que tanto el lenguaje cliente como el servidor tengan las librerías necesarias para tratar con XML.
Leer un documento XML en Javascript
A la hora de recoger y leer un documento XML en Javascript cada navegador incorpora una serie de herramientas y librerías diferentes para el tratamiento de ficheros XML (recodar que la implementación de Javascript difiere entre versiones y desarrolladores). Para poder trabajar de una forma común usaremos el framework jQuery que ya hemos estudiado.
Navegar por un documento DOM de XML es muy parecido a navegar por un documento DOM de HTML: se trata de una estructura jerárquica de nodos. Al igual que en el DOM de HTML nos encontramos con elementos como forms, imagenes, etc., cuando recorremos el cuerpo de un documento XML tenemos elementos con las siguientes propiedades:
- attributes (con esta propiedad accederemos a los atributos de un elemento, por ejemplo al dni en el elemento
Jose ) - childNodes (nos devolverá un array con todos los elementos hijo)
- firstChild / lastChild (accederemos directamente al primero o último hijo)
- nextSibling / previousSibling (no devolverá el nodo hermano a la izquierda o a la derecha)
- parentNode (accede al elemento padre)
- nodeValue (da el valor del nodo, es el caso de
Yo, Robot sería: “Yo, Robot”) - getElementsByTagName(nombre) (devolvera un array con todos los elementos que contenga el nombre elegido, por ejemplo en documento XML de ejemplo de libros escrito anteriormente, si buscaramos por “libro” nos devolvería un array con 3 elementos)
- getAttribute (nombre) (nos devolverá directamente el valor del atributo “nombre”).
En el siguiente código se muestra un ejemplo de llamada Ajax por jQuery de tipo GET. Recogida de un documento XML, lectura del mismo y creación de una tabla con los datos obtenidos. Puede observarse como cuando se carga el documento (en el onLoad del body) se llama a la función “enviar()” que envía una petición GET al fichero libros.xml (este fichero contiene la misma información que el documento XML de ejemplo de libros). Cuando la llamada AJAX es recogida se lanza la función leerDatos que haciendo uso de las propiedades del DOM de XML recoge la información para mostrarla finalmente en forma de tabla.
<html>
<head>
<script type="text/JavaScript" src="jquery.js"></script>
<script>
function enviar()
{
$.get("libros.xml",null,leerDatos,'xml');
}
function leerDatos(originalRequest)
{
html = "";
datos = originalRequest;
libro = datos.getElementsByTagName("libro");
libros = libro.length;
titulo = datos.getElementsByTagName("titulo");
autor = datos.getElementsByTagName("autor");
html += "<table><tr><td width='100'>ISBN</td>”;
html += “<td width='150'>TITULO</td>”;
html += “<td width='150'>AUTOR</td></tr>";
for(var i=0; i < libros; i++)
{
nombreTitulo = titulo[i].firstChild.nodeValue;
nombreAutor = autor[i].firstChild.nodeValue;
isbn = libro[i].getAttribute("isbn");
html += "<tr>"
html += "<td>"+isbn+"</td>"
+"<td>"+nombreTitulo”;
html += "</td>"+"<td>"+nombreAutor+"</td>";
html += "</tr>"
}
html += "</table>";
$('datosLibros').html(html);
}
</script>
</head>
<body onLoad="enviar()">
<div id="datosLibros">
<table width="400">
<tr><td align="center"><img
src="indicator.gif"></td></tr>
</table>
</div>
</body>
</html>
El resultado en el navegador:
