XSLT no Cliente

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

Solução JavaScript

Nos capítulos anteriores, explicamos como usar XSLT para converter um documento XML para XHTML. Fizemos isso adicionando uma tabela de estilo XSL ao arquivo XML e convertendo através do navegador.

Embora este método funcione bem, não é sempre satisfatório incluir referências a tabelas 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 completar a conversão.

Usando JavaScript, podemos:

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

Esta é a magia do XSLT! Um dos objetivos de design do 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 conversão XSLT no lado do navegador será uma das principais tarefas que os navegadores futuros executarão, e também veremos seu crescimento no mercado específico 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 as tabelas de estilo XSL associadas:

<?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 CD</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.

Atenção, este arquivo XML não contém referências ao arquivo XSL.

Importante:Esta frase significa que o arquivo XML pode ser transformado usando várias diferentes tabelas de estilos XSL.

Converter XML em XHTML no navegador

Este é o código-fonte usado para converter arquivos XML em XHTML no 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>

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

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

Veja como ele funciona no IE.