XSLT - Cliente

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

Solución con 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 las necesidades del navegador y del usuario

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

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

Archivos XML y archivos XSL

Mire este documento XML que se ha mostrado anteriormente 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.

y 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 a archivos XSL.

Importante:Esta frase significa que los archivos XML pueden ser convertidos 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">
// Cargar XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")
// Cargar XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")
// Transformar
document.write(xml.transformNode(xsl))
</script>
</body>
</html>

Consejo:Si no sabes cómo escribir JavaScript, aprende 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. ¡Tarea completada!

Vea cómo funciona en IE.