Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

DOM IV

Acceso al DOM en XML

Acceder con javascript

En HTML accedemos al documento o DOM simplemente con la palabra clave document, el propio documento y la página web son el mismo archivo, por lo que no tenemos que crear nuevos archivos para mostrar el documento.

En XML el documento muestra simplemente una información estructurada. Los archivos XML son en sí archivos de datos estructurados. por lo tanto para acceder al documento con javascript, lo haremos desde otra página en HTML.

Debemos por tanto "capturar" el documento XML y pasarlo a javascript como un objeto del tipo "HTML-Document". para ello la mayoría de los navegadores tienen una objeto o método llamado XMLHttpRequest() el cual captura el documento XML y lo devuelve como un objeto documento.

Capturar el documento XML

Como hemos explicado anterioremente el Documento XML lo capturamos mediante el método XMLHttpRequest(). Veamos cómo funciona este método. Supongamos que tenemos un archivo XML llamado agenda.xml, queremos capturar este archivo en otra página html (miagenda.html), para mostrar todos o algunos datos del archivo XML. Para ello en el archivo html, abrimos un script javascript con el siguiente contenido:

if (window.XMLHttpRequest) {
   xhttp=new XMLHttpRequest();
   }
xhttp.open("GET","agenda.xml",false);
xhttp.send();
xmlDoc=xhttp.responseXML; 

Expliquemos este script:

A partir de aquí la variable xmlDoc contiene el objeto documento del archivo XML, desde el cual podremos acceder a todos sus contenidos.

Esto funciona para la mayoría de los navegadores, pero no con todos, ya que Internet Explorer version 5 y 6 no reconocen el objeto XMLHttpRequest() como un método de window. En su lugar debemos poner un objeto "ActiveX". Esto nos obliga a modificar el código anterior para que pueda funcionar también con estos navegadores:

if (window.XMLHttpRequest) {
   xhttp=new XMLHttpRequest();
   }
//con Explorer 5 y 6:
else {
   xhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
xhttp.open("GET","agenda.xml",false);
xhttp.send();
xmlDoc=xhttp.responseXML;

Ahora ya tenemos el código completo para obtener el DOM en un documento XML. El código para obtener el DOM de cualquier página XML es siempre el mismo, y lo único que cambia es la ruta del documento, que la pondremos como segundo parámetro del método open()

Archivo javascript aparte

Ya que para obtener el DOM de un documento XML usamos siempre el mismo código (excepto la ruta del archivo), por comodidad, rapidez y para no tener que repetir el código para cada documento XML, podemos crear una función, que contenga el código anterior.

A esta función le pasaremos como parámetro la ruta del archivo, y nos devolverá el xmlDoc o objeto-documento de la página. Para poder acceder a la función desde varias páginas lo pondremos en un archivo javascript aparte, Creamos así el archivo cargaDocXML.js con el siguiente contenido:

function cargaDocXML(rutaxml)
{
if (window.XMLHttpRequest) {
   xhttp=new XMLHttpRequest();
   }
else {
   xhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
xhttp.open("GET",rutaxml,false);
xhttp.send();
return xhttp.responseXML;
}

Una vez que hemos creado y guardado el archivo anterior, desde la página html (miagenda.html) sólo tenemos que abrir un link´javascript a este archivo en la cabecera, y luego en el código javascript llamar a la función cargaDocXML(), pasando como parámetro la ruta de la página XML, por ejemplo:

<html>
<head>
<title>mi agenda</title>
<script type="text/javascript" src="cargaDomXML.jx"></script>
<script type="text/javascript">
xmlDoc=cargaDocXML("agenda.xml");
// ... continua el código javascript ...
</script>
</head>
<body>
.....
</body>
</html>

En negrita vienen destacadas las líneas con las que accedemos al DOM del XML. En la primera cargamos la función (en un archivo aparte) con la que accedemos al DOM, y en la segunda llamamos a la función, concretando (en el parámetro) la ruta del archivo.

ç

A partir de aquí la variable xmlDoc (o la que pongamos en su lugar), actua igual que el objeto document del HTML. Podemos acceder a los elementos del archivo XML de la misma manera que accedemos a los elementos de un archivo HTML, es decir usando las mismas propiedades y métodos del DOM que usamos con document, pero en este caso con xmlDoc.

Veremos esto en las siguientes páginas de este manual. De momento veamos un ejemplo sencillo de como acceder a algunos elementos de un archivo XML con javascript. Tenemos el siguiente archivo XML llamado milibro.xml.

<?xml version="1.0" encoding="iso-8859-15"?>
<libro>
  <titulo>Don Juan Tenorio</titulo>
  <autor>José Zorrilla</autor>
  <genero>teatro clásico</genero>
  <año>1844</año>
</libro>

Ponemos en el mismo directorio el archivo javascript con la función de cargar el archivo XML cargaDocXML.js .

Creamos el archivo HTML donde recogemos los datos del archivo XML y los sacamos en pantalla. le llamamos milibro.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<script type="text/javascript" src="cargaDocXML.js"></script>
<script type="text/javascript">
//cargar el documento XML
xmlDoc=cargaDocXML("milibro.xml");
//obtener datos y preparar su salida
mititulo=xmlDoc.getElementsByTagName("titulo")[0].childNodes[0].nodeValue;
mititulo="<p>Libro: "+mititulo+"</p>";
miautor=xmlDoc.getElementsByTagName("autor")[0].childNodes[0].nodeValue;
miautor="<p>Autor: "+miautor+"</p>";
migenero=xmlDoc.getElementsByTagName("genero")[0].childNodes[0].nodeValue;
migenero="<p>Género: "+migenero+"</p>";
mianyo=xmlDoc.getElementsByTagName("año")[0].childNodes[0].nodeValue;
mianyo="<p>Ano: "+mianyo+"</p>";
//sacar datos en la página
window.onload=function() {
texto=document.getElementById("milibro");
texto.innerHTML=mititulo+miautor+migenero+mianyo;
}
</script>
</head>
<body>
<h1>Libro</h1>
<div id="milibro"></div>
</body>
</html>

El archivo milibro.html recoge los datos obtenidos en el archivon XML. Este quedará como en el siguiente enlace:

milibro.html

Para obtener los datos del archivo XML en primer lugar hemos accedido al documento mediante la función en archivo externo que activa el objeto XMLHttpRequest().

El objeto devuelto por la función (xmlDoc) actúa igual que el objeto document en HTML, pero con el archivo XML. Para obtener los datos del archivo XML le aplicamos los siguientes métodos y propiedades:

  • getElementsByTagName() : Accedemos a las etiquetas que tengan como nombre el indicado en el parámetro. Como este método devuelve un array, indicamos que queremos acceder al primer elemento de ese array mediante [0].
  • childNodes[0] : Mediante esta propiedad accedemos al primer nodo hijo del elemento anterior, el cual es el nodo de texto de la etiqueta.
  • nodeValue : Esta propiedad nos da el valor del nodo de texto anterior, el cual no es otro que el propio texto de la etiqueta.

En este ejemplo hemos accedido al texto de las etiquetas de la página XML. En las siguientes páginas seguiremos viendo las posibilidades que hay de ver o cambiar el archivo XML.

NOTA: En algunos navegadores como Internet Explorer necesitamos además subir la página al servidor (el cual debe tener PHP o ASP) para poder verla, o en su defecto tener instalado un servidor local en el ordenador, como el que instala el programa XAMPP (en windows). -Ver curso PHP 1.3 Instalar XAMPP para la instalación de este programa.






En la siguiente página veremos cómo obtener mediante javascript los distintos elementos de la página XML

Acceso a elementos XML



Manual de DOM

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo