Los últimos tutoriales de desarrollo web
 

XSLT - En el cliente

❮ Anterior Siguiente Capítulo ❯

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 XSLT puede ser utilizado para transformar un documento de XML a XHTML. Hicimos esto mediante la adición de una hoja de estilo XSL para el archivo XML y dejar que el navegador haga la transformación.

Incluso si esto funciona bien, no siempre es deseable incluir una referencia de hoja de estilo en un archivo XML (eg it will not work in a non XSLT aware browser.)

Una solución más versátil sería usar un JavaScript para hacer la transformación.

Mediante el uso de un JavaScript, podemos:

  • hacer la prueba específica del navegador
  • utilizar diferentes hojas de estilo según las necesidades del usuario y del navegador

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, apoyando diferentes navegadores y diferentes necesidades de los usuarios.

El archivo XML y el archivo XSL

Mira el documento XML que se ha 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>

Ver el archivo XML .

Y el interior la hoja de estilo XSL:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <body>
  <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>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

Ver el archivo XSL .

Notice that the XML file does not have a reference to the XSL file.

IMPORTANT: La frase anterior indica que un archivo XML podría ser transformada usando muchas diferentes hojas de estilo XSL.

La 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

<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>
Inténtalo tú mismo "

Tip: Si usted no sabe cómo escribir JavaScript, por favor estudiar nuestro tutorial de Javascript .

Ejemplo Explicación:

The loadXMLDoc() function does the following:

  • Crear un objeto XMLHttpRequest
  • Utilizar el open() y send() métodos del objeto XMLHttpRequest para enviar una petición a un servidor
  • Obtener los datos de respuesta como datos XML

The displayResult() function is used to display the XML file styled by the XSL file:

  • Cargar archivos XML y XSL
  • Probar qué tipo de navegador que el usuario tiene
  • Si Internet Explorer:
    • Usar la transformNode() método para aplicar la hoja de estilo XSL para el documento XML
    • Ajuste el cuerpo del documento actual (id="example") para contener el documento XML de estilo
  • Si otros navegadores:
    • Crear un nuevo objeto XSLTProcessor e importar el archivo XSL a ella
    • Usar la transformToFragment() método para aplicar la hoja de estilo XSL para el documento XML
    • Ajuste el cuerpo del documento actual (id="example") para contener el documento XML de estilo

❮ Anterior Siguiente Capítulo ❯