XSLT en el cliente

Si su navegador admite XSLT, se puede usar en el navegador para convertir el documento a XHTML.

Solución JavaScript

En el capítulo anterior, le explicamos cómo usar XSLT para convertir un documento XML a XHTML. Lo logramos de la siguiente manera: agregamos una hoja de estilo XSL al archivo XML y realizamos la conversión a través del navegador.

Aunque este método funciona bien, no siempre es satisfactorio incluir referencias a hojas de estilo en archivos XML (por ejemplo, en navegadores que no reconocen XSLT, este método no funciona).

Un método más general es usar JavaScript para completar la conversión.

Al usar JavaScript, podemos:

  • Realizar pruebas de confirmación del navegador
  • Usar diferentes hojas de estilo según el navegador y las necesidades del usuario

¡Esa es la belleza de XSLT! Uno de los objetivos de diseño de XSLT es hacer posible la conversión de un formato a otro, al mismo tiempo que admite diferentes tipos de navegadores y diferentes necesidades de usuarios.

La transformación XSLT en el lado del cliente será una de las principales tareas que los navegadores ejecutarán en el futuro, y también veremos su crecimiento en el mercado específico de navegadores (braille, impresoras web, dispositivos auditivos, etc.).

Archivos XML y XSL

Vea este documento XML que se ha presentado en el capítulo anterior:

<?xml version="1.0" encoding="ISO-8859-1"?>
<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 este archivo XML.

así como las hojas de estilo XSL adjuntas:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html>
  <body>
    <h2>Mi Colección de CDs</h2> 
    <table border="1">
      <tr bgcolor="#9acd32">
        <th align="left">Título</th> 
        <th align="left">Artista</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 este archivo XSL.

Tenga en cuenta que este archivo XML no contiene referencias al archivo XSL.

Puntos importantes:Esta frase significa que el archivo XML se puede convertir usando múltiples hojas de estilo XSL diferentes.

Convertir XML a XHTML en el navegador

Este es el código fuente utilizado para convertir archivos XML en XHTML en el cliente:

<html>
<body>
<script type="text/javascript">
// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")
// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>

Consejo:Si no conoce cómo escribir JavaScript, aprenda nuestroTutoriales de JavaScript》。

El primer código crea una instancia del analizador XML de Microsoft y luego carga el archivo XML en la memoria. El segundo código crea otra instancia del analizador y luego carga este archivo XSL en la memoria. La última línea de código utiliza el documento XSL para transformar el documento XML y muestra los resultados como XHTML en el navegador. ¡La tarea se ha completado!

Vea cómo funciona en IE.