XSLT - Cliente

Se o seu navegador suportar XSLT, ele pode ser usado para converter documentos em XHTML no navegador.

Solução JavaScript

Nos capítulos anteriores, explicamos como usar XSLT para converter um documento XML em XHTML. Fizemos isso adicionando uma folha de estilo XSL ao arquivo XML e realizando a conversão pelo navegador.

Embora este método funcione bem, não é sempre satisfatório incluir referências a folhas de estilo no arquivo XML (por exemplo, este método não funciona em navegadores que não reconhecem XSLT).

Um método mais genérico é usar JavaScript para realizar a conversão.

Usando JavaScript, podemos:

  • Realize testes de confirmação do navegador
  • Use diferentes folhas de estilo com base nas necessidades do navegador e do usuário

Esta é a beleza da XSLT! Um dos objetivos de design da XSLT é tornar possível a conversão de um formato para outro, ao mesmo tempo em que suporta diferentes tipos de navegadores e necessidades de usuários.

A transformação XSLT no lado do navegador será uma das principais tarefas executadas pelos navegadores no futuro, e também veremos seu crescimento em mercados específicos de navegadores (braille, impressoras de rede, dispositivos auditivos, etc.).

Arquivos XML e XSL

Veja este documento XML que já foi apresentado nos capítulos anteriores:

<?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 arquivo XML.

e o estilo XSL correspondente:

<?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>Minha Coleção 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 arquivo XSL.

Observe que este arquivo XML não contém referências ao arquivo XSL.

Materiais Importantes:Esta frase significa que o arquivo XML pode ser convertido usando vários diferentes catálogos de estilos XSL.

Converter XML para XHTML no navegador

Este é o código-fonte utilizado para converter arquivos XML em XHTML no cliente:

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

Dica:Se você não sabe como escrever JavaScript, aprenda nossoTutorial de JavaScript》。

O primeiro código cria uma instância do parser XML da Microsoft e carrega o arquivo XML na memória. O segundo código cria outra instância do parser e carrega o arquivo XSL na memória. A última linha de código usa o documento XSL para transformar o documento XML e exibir o resultado como XHTML no navegador. Tarefa concluída!

Veja como ele funciona no IE.