Accediendo a un archivo XML con Ajax

En el post anterior vimos un ejemplo sencillo del uso de Ajax, veamos que más podemos hacer:

Supongamos que deseamos acceder a un archivo de texto estructurado, en este caso un archivo XML, que contenga la información de una serie de elementos que queremos desplegar en nuestra página web.

Para el ejemplo, el archivo XML al que vamos a acceder tendrá una estructura como la que se muestra a continuación:


<?xml version="1.0" encoding="ISO-8859-1" ?>
<Obras_literarias>
  <Libro>
     <Autor>Juan Rulfo</Autor>
     <Titulo>Pedro Páramo</Titulo>
  </Libro>
  <Libro>
     <Autor>Juan Rulfo</Autor>
     <Titulo>El Llano en Llamas</Titulo>
  </Libro>
  <Libro>
     <Autor>Pablo Neruda</Autor>
     <Titulo>Veinte poemas de amor y una canción desesperada</Titulo>
  </Libro>
  <Libro>
     <Autor>Miguel de Cervantes Saavedra</Autor>
     <Titulo>Don Quijote de la Mancha</Titulo>
  </Libro>
  <Libro>
     <Autor>Jorge Luis Borges</Autor>
     <Titulo>Ficciones</Titulo>
  </Libro>
</Obras_literarias>

Este archivo, que podemos crear en un editor de texto sencillo como el bloc de notas, recibirá el nombre listaX.xml. Posee una estructura XML algo simple, ya que solo contiene una serie de entradas denominadas elementos sin contar con algún atributo. Más que nada se trata de una lista de libros con sus autores y títulos, que -como en todo archivo XML- se encuentra estructurada en una jerarquía de árbol, en las que el elemento padre -más externo- puede contener contener uno o más elementos hijos -más internos-

Ahora nuestro código Ajax solicitará al servidor Web que le sea devuelto éste archivo de texto, y una vez que el contenido haya sido recibido, el programa procesará la información utilizando un objeto de tipo documento XML, de forma que el contenido podrá ser procesado con métodos DOM para documentos XML, es decir, que el documento XML será manejado como un objeto y poseerá sus propios métodos y propiedades. De modo que crearemos un nuevo archivo HTML basándonos en el código del primer ejemplo con los siguientes cambios:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Obtener lista XML de autores con Ajax</title>
<script type="text/javascript">
function descargaArchivo() {
  // Obtener la instancia del objeto XMLHttpRequest
  if(window.XMLHttpRequest) {
     peticionHttp = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) {
    peticionHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // Preparar la funcion de respuesta
  peticionHttp.onreadystatechange = muestraContenido;
  // Realizar peticion HTTP
  peticionHttp.open('GET', 'http://localhost/listaX.xml', true);
  peticionHttp.send(null);
  function muestraContenido() {
    if(peticionHttp.readyState == 4) {
      if(peticionHttp.status == 200) {
        //Creamos el objeto de tipo documento XML
        var documentoXml = peticionHttp.responseXML;
        //Obtenemos la raíz del documento
        var root = documentoXml.getElementsByTagName("Obras_literarias")[0];
        var tope = root.getElementsByTagName("Libro").length;
        //Recorremos todos los elementos Libro del documento
        for(var i = 0; i < tope; i++){ 
          libro = root.getElementsByTagName("Libro")[i]; 
          autor = libro.getElementsByTagName("Autor")[0].firstChild.nodeValue;
          titulo = libro.getElementsByTagName("Titulo")[0].firstChild.nodeValue;
          muestraHTML('pRespuesta',"Autor: "+autor+", t&iacute;tulo: "+titulo+"<br/>");
        }
      }
    }
  }
  function muestraHTML(id, texto){
    if(document.getElementById){
      document.getElementById(id).innerHTML += texto;
    }
  }
}
window.onload = descargaArchivo;
</script>
</head>
<body>
<p id="pRespuesta"></p>
</body>
</html>

Podemos ver que el proceso ver que el proceso de petición del archivo es casi idéntico al del ejemplo anterior, con la diferencia del nombre del archivo solicitado al servidor Web:

peticionHttp.open('GET', 'http://localhost/listaX.xml', true);

La parte interesante se da al momento de procesar la respuesta dentro de la función muestraContenido, cuando se accede al contenido del archivo XML:

var documentoXml = peticionHttp.responseXML;

En ésta primer línea utilizamos la propiedad responseXML para crear un objeto que manejará la información del documento XML llamado documentoXML. Siguiendo con el código:

var root = documentoXml.getElementsByTagName("Obras_literarias")[0];
var tope = root.getElementsByTagName("Libro").length;

En la primer línea se crea un nuevo objeto llamado root que contendrá la raíz del documento XML, es decir el elemento padre Obras_literarias, y a partir de éste objeto accederemos al resto de la información del documento. En la segunda línea guardamos en la variable tope la cantidad total de elementos hijo Libro que contiene root por medio de su propiedad length.

for(var i = 0; i < tope; i++){
   libro = root.getElementsByTagName("Libro")[i];
   autor = libro.getElementsByTagName("Autor")[0].firstChild.nodeValue;
   titulo = libro.getElementsByTagName("Titulo")[0].firstChild.nodeValue;
   muestraHTML('pRespuesta',"Autor: "+autor+", título: "+titulo+"<br/>");
}

Ésta parte del código consiste en un sencillo ciclo for que recorrerá todos los elementos Libro del objeto root. Con cada elemento Libro se creará un objeto llamado libro, después obtendremos el contenido de los elementos Autor y Titulo de este objeto, almacenando el valor de sus contenidos en las variables autor y titulo respectivamente. Por último, una vez que tenemos estos valores los mostramos en nuestra página web por medio de la función muestraHTML, cuya explicación aparece a continuación:

function muestraHTML(id, texto){
  if(document.getElementById){
    document.getElementById(id).innerHTML += texto;
  }
}

Ésta función recibe como primer parámetro el identificador del elemento de la página HTML, en el que se mostrará el texto que recibe como segundo parámetro.

Una vez que creamos el archivo listaX.xml, lo almacenamos en el servidor Web e implementamos el código HTML que acabamos de revisar, al momento de probar este programa debemos obtener en la pantalla de nuestro navegador un resultado como el que se muestra a continuación:

Autor: Juan Rulfo, título: Pedro Páramo
Autor: Juan Rulfo, título: El Llano en Llamas
Autor: Pablo Neruda, título: Veinte poemas de amor y una canción desesperada
Autor: Miguel de Cervantes Saavedra, título: Don Quijote de la Mancha
Autor: Jorge Luis Borges, título: Ficciones

Donde apreciamos como se accedió correctamente a cada uno de los elementos con contenido de texto del archivo, formándose una lista sencilla de autores y obras literarias.

La importancia de éste segundo ejemplo radica en que al utilizar Ajax, muchas veces es útil obtener respuestas en formato XML, para poder conseguir información más estructurada de nuestro servidor Web y no solo texto simple, sobre todo al momento de combinar Ajax con lenguajes del lado de servidor como PHP y trabajar con bases de datos. A medida que vayamos avanzando en el manejo de Ajax y veamos ejemplos más avanzados, se verá el potencial del manejo de respuestas XML.

En el ejemplo de nuestro siguiente post, veremos como se puede combinar Ajax con PHP, para desde un formulario HTML enviar datos al servidor Web que serán procesados en un programa PHP.

Hasta la próxima.

La cabaña del eremita Web

lunes, 26 de enero de 2009