Vamos a mostrar, a través de un ejemplo, la sencilla manera en la que podemos integrar JavaScript y XML.
Supongamos que queremos incluir en nuestra web un apartado que contenga una lista de hipervínculos (o links). El problema es que esta lista va a variar continuamente y no queremos andar modificando el HTML cada vez.
La solución consiste en tener la lista de hipervínculos en un archivo XML externo y cargar la lista dinámicamente ayudados de JavaScript y su parser XML.
Nuestro archivo XML tiene el siguiente formato:
<?xml version="1.0" encoding="iso-8859-1"?>
<lista>
<link>
<titulo>Google</titulo>
<href>http://www.google.es</href>
</link>
<link>
<titulo>Metafísica de Costumbres</titulo>
<href>http://metafisicadecostumbres.blogspot.com</href>
</link>
<link>
<titulo>Metafísica Informática</titulo>
<href>http://metafisicainformatica.blogspot.com</href>
</link>
</lista>
Un detalle importante es la cabecera XML. Necesitamos especificar encoding="iso-8859-1" para evitar problemas con las tildes y las ñ. De no hacerlo, nos aparecerían símbolos raros en lugar de ñ y vocales acentuadas.
El código JavaScript que necesitamos para resolver nuestro problema es el siguiente:
<html>
<body>
<div id="links"></div>
<script type="text/javascript">
// En la variable div_links obtenemos el contenedor div con el id 'links'
var div_links = document.getElementById('links');
var xmlDoc = cargarXMLDoc('links.xml');
if (xmlDoc != null)
{
// Obtenemos la lista de links
var links_tag = xmlDoc.getElementsByTagName("lista")[0].getElementsByTagName("link");
for (var i = 0; i < links_tag.length; i++)
{
// Obtenemos el título del link
var titulo = links_tag[i].getElementsByTagName("titulo")[0].childNodes[0].nodeValue;
// Obtenemos el hipervínculo del link
var href = links_tag[i].getElementsByTagName("href")[0].childNodes[0].nodeValue;
// Modificamos el contenido html del contenedor div
div_links.innerHTML += "<p><a href=" + href + ">" + titulo + "</a></p>";
}
}
function cargarXMLDoc(archivoXML)
{
var xmlDoc;
if (window.XMLHttpRequest)
{
xmlDoc = new window.XMLHttpRequest();
xmlDoc.open("GET", archivoXML, false);
xmlDoc.send("");
return xmlDoc.responseXML;
}
// para IE 5 y IE 6
else if (ActiveXObject("Microsoft.XMLDOM"))
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(archivoXML);
return xmlDoc;
}
alert("Error cargando el documento.");
return null;
}
</script>
</body>
</html>
Puedes encontrar información detallada sobre el parser XML (en inglés) aquí.
