Como todos sabemos tener datos en XML es algo muy útil y cada vez más habitual. El poder mostrar unos datos en un formato de texto plano y estándar nos sirve para poder compartir esos datos y poder leerlos desde casi cualquier aplicación y/o lenguaje de programación.

En este artículo vamos a usar JavaScript para mediante DOM leer el contenido de un XML simple.

Usaremos un XML muy simple y sencillo:
rammstein.xml

<?xml version="1.0" encoding="iso-8859-1"?>
<miembros>
 <miembro idmiembro="0" nombre="Till Lindemann" fecha_nacimiento="04-01-1963" instrumento="vocales" />
 <miembro idmiembro="1" nombre="Richard Z. Kruspe" fecha_nacimiento="24-06-1967" instrumento="guitarra" / >
 <miembro idmiembro="2" nombre="Paul Landers" fecha_nacimiento="09-12-1964" instrumento="guitarra" / >
 <miembro idmiembro="3" nombre="Christoph Schneider" fecha_nacimiento="11-05-1966" instrumento="bateria" / >
 <miembro idmiembro="4" nombre="Oliver Riedel" fecha_nacimiento="11-04-1971" instrumento="bajo" / >
 <miembro idmiembro="5" nombre="Flake Lorenz" fecha_nacimiento="06-11-1966" instrumento="teclados" / >
</miembros>

Antes que nada deberemos de hacer la llamada y creación del objeto XML, deberemos de tener en cuenta para esto que la forma de crear el objeto es totalmente distinta para IE y para Mozilla/Firefox. Asi que empezaremos creando un archivo llamado ajax.js que es el que contendrá la llamada del objeto.

ajax.js
1.- Creamos la variable que va a contener el objeto xml, xmlDoc

var xmlDoc;

2.- Creamos la funcion ‘crearObjetoXML()’.
Esta función se encargará de crear el objeto XML correspondiente dependiendo del
navegador utilizado por el usuario (IE o Mozilla/Firefox). Le pasamos como parámetro el nombre del archivo XML

function crearObjetoXML(archivoXML){
   //--- Compruebo si se trata de IE o no.
   //--- Si es IE el objeto ActiveXObject existirá.
   if(window.ActiveXObject){
      //--- Creo un nuevo objeto de la librería Microsoft.XMLDOM que es la que se encarga
      //--- en Internet Explorer de 'parsear' un archivo XML.
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      //--- Defino la asincronización a false
      xmlDoc.async = false;
      xmlDoc.load(archivoXML);
      parsearXML();
   }else if(document.implementation && document.implementation.createDocument){
      xmlDoc = document.implementation.createDocument("","",null);
      xmlDoc.load(archivoXML);
      //--- Le decimos que cuando haya terminado de cargar el XML
      //--- ejecute la función de parsear el mismo.
      //--- NOTA: Se le llama a la función sin los paréntesis. Si se le colocan no funciona
      xmlDoc.onload = parsearXML;
   }else{
      alert ('Su navegador no puede soportar este script');
   }
}

Posteriormente creamos otro archivo javascript, functions.js que contendrá la función para parsear el XML.

Bien repasaremos las funciones de JavaScript que vamos a usar:
firstChild: Nos devuelve el primer nodo hijo del nodo superior
childNodes: Devuelve el nodo/s hijos del nodo superior.
getElementsByTagName(’miembro’)[i]: Hace referencia al tag indicado en su posición i.
getAttribute(’idmiembro’): Devuelve el valor del atributo indicado entre paréntesis siempre refiriéndose al nodo en el que se encuentra.

Pues una vez que sabemos que vamos a usar para parsearlo, solo nos queda armar la función.

1.- Creamos dos variables que harán referencia al id ‘contenido’ del HTML y otra a la longitud del documento XML

var contenido = document.getElementById('contenido');
var longitudXML = xmlDoc.firstChild.childNodes.length;

2.- Recorreremos el XML partiendo de las funciones vistas más arriba y de la longitud del XML

for(var i=0;i< =longitudXML-1;i++){
   contenido.innerHTML += xmlDoc.firstChild.getElementsByTagName('miembro')[i].getAttribute('idmiembro')+' - ';
   contenido.innerHTML += xmlDoc.firstChild.getElementsByTagName('miembro')[i].getAttribute('nombre')+' - ';
   contenido.innerHTML += xmlDoc.firstChild.getElementsByTagName('miembro')[i].getAttribute('fecha_nacimiento')+' - ';
   contenido.innerHTML += xmlDoc.firstChild.getElementsByTagName('miembro')[i].getAttribute('instrumento')+'
‘;
}

Asi el código del archivo final sería:
functions.js

function parsearXML(){
   var contenido = document.getElementById("contenido");
   var longitudXML = xmlDoc.firstChild.childNodes.length;

   for(var i=0;i< =longitudXML-1;i++){
      contenido.innerHTML += xmlDoc.firstChild.getElementsByTagName('miembro')[i].getAttribute('idmiembro')+' - ';
      contenido.innerHTML += xmlDoc.firstChild.getElementsByTagName('miembro')[i].getAttribute('nombre')+' - ';
      contenido.innerHTML += xmlDoc.firstChild.getElementsByTagName('miembro')[i].getAttribute('fecha_nacimiento')+' - ';
      contenido.innerHTML += xmlDoc.firstChild.getElementsByTagName('miembro')[i].getAttribute('instrumento')+'
‘;
   }
}

Por último y para acabar, pero no menos importante es el código XHTML con la div que contendrá el resultado de parsear el XML, así como las llamadas a los archivos javascript.
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" language="javascript" src="ajax.js"></script>
<script type="text/javascript" language="javascript" src="functions.js"></script>
<title>:: AJAX :: Ejemplo. XMLParser</title<
</head>
<body onload="crearObjetoXML('rammstein.xml');">
   <div id="contenido">
   </div>
</body>
</html>

Si lo deseis podeis ver un ejemplo online funcionando aquí.
www.martinpulido.com/lab/ajax/xmlParser/