XSLT - En el cliente
XSLT se puede utilizar para transformar el documento a XHTML en su navegador.
Una solución JavaScript
En los capítulos anteriores hemos explicado cómo se puede usar XSLT para transformar un documento de XML a XHTML. Hicimos esto agregando una hoja de estilo XSL al archivo XML y dejando que el navegador hiciera la transformación.Incluso si esto funciona bien, no siempre es deseable incluir una referencia de hoja de estilo en un archivo XML (por ejemplo, no funcionará en un navegador que no admita XSLT).
Una solución más versátil sería utilizar JavaScript para realizar la transformación.
Mediante el uso de un JavaScript, podemos:
- hacer pruebas específicas del navegador
- use diferentes hojas de estilo de acuerdo con el navegador y las necesidades del usuario
¡Esa es la belleza de XSLT! Uno de los objetivos de diseño de XSLT era hacer posible la transformación de datos de un formato a otro, compatible con diferentes navegadores y diferentes necesidades de los usuarios.
El archivo XML y el archivo XSL
Mira el documento XML que has visto en los capítulos anteriores:
<?xml version="1.0" encoding="UTF-8"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>
Y la hoja de estilo XSL adjunta:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th style="text-align:left">Title</th>
<th style="text-align:left">Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title" /></td>
<td><xsl:value-of select="artist" /></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
Tenga en cuenta que el archivo XML no tiene una referencia al archivo XSL.
IMPORTANTE: La oración anterior indica que un archivo XML podría transformarse utilizando muchas hojas de estilo XSL diferentes.
Transformación de XML a XHTML en el navegador
Aquí está el código fuente necesario para transformar el archivo XML a XHTML en el cliente:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename)
{
if (window.ActiveXObject)
{
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
else
{
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
try {xhttp.responseType = "msxml-document"}
catch(err) {} // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject
|| xhttp.responseType == "msxml-document")
{
ex =
xml.transformNode(xsl);
document.getElementById("example").innerHTML
= ex;
}
// code for Chrome, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
{
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument =
xsltProcessor.transformToFragment(xml, document);
document.getElementById("example").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<div
id="example" />
</body>
</html>
Sugerencia: si no sabe cómo escribir JavaScript, estudie nuestro tutorial de JavaScript .
Ejemplo explicado:
La función loadXMLDoc() hace lo siguiente:
- Crear un objeto XMLHttpRequest
- Use los métodos open() y send() del objeto XMLHttpRequest para enviar una solicitud a un servidor
- Obtener los datos de respuesta como datos XML
La función displayResult() se usa para mostrar el archivo XML al estilo del archivo XSL:
- Cargar archivos XML y XSL
- Probar qué tipo de navegador tiene el usuario
- Si Internet Explorer:
- Use el método transformNode() para aplicar la hoja de estilo XSL al documento xml
- Configure el cuerpo del documento actual (id="example") para que contenga el documento xml con estilo
- Si otros navegadores:
- Crear un nuevo objeto XSLTProcessor e importarle el archivo XSL
- Use el método transformToFragment() para aplicar la hoja de estilo XSL al documento xml
- Configure el cuerpo del documento actual (id="example") para que contenga el documento xml con estilo