XSLT - No Cliente
XSLT pode ser usado para transformar o documento em XHTML em seu navegador.
Uma solução JavaScript
Nos capítulos anteriores, explicamos como o XSLT pode ser usado para transformar um documento de XML em XHTML. Fizemos isso adicionando uma folha de estilo XSL ao arquivo XML e deixamos o navegador fazer a transformação.Mesmo que isso funcione bem, nem sempre é desejável incluir uma referência de folha de estilo em um arquivo XML (por exemplo, não funcionará em um navegador que não reconhece XSLT).
Uma solução mais versátil seria usar um JavaScript para fazer a transformação.
Usando um JavaScript, podemos:
- fazer testes específicos do navegador
- use folhas de estilo diferentes de acordo com as necessidades do navegador e do usuário
Essa é a beleza do XSLT! Um dos objetivos de design do XSLT era possibilitar a transformação de dados de um formato para outro, suportando diferentes navegadores e diferentes necessidades do usuário.
O arquivo XML e o arquivo XSL
Veja o documento XML que você viu nos 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>
E a folha de estilo XSL que acompanha:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<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>
</xsl:template>
</xsl:stylesheet>
Observe que o arquivo XML não tem uma referência ao arquivo XSL.
IMPORTANTE: A frase acima indica que um arquivo XML pode ser transformado usando muitas folhas de estilo XSL diferentes.
Transformando XML em XHTML no navegador
Aqui está o código-fonte necessário para transformar o arquivo XML em XHTML no cliente:
Exemplo
<!DOCTYPE html>
<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>
Dica: Se você não sabe escrever JavaScript, por favor estude nosso tutorial JavaScript .
Exemplo explicado:
A função loadXMLDoc() faz o seguinte:
- Criar um objeto XMLHttpRequest
- Use os métodos open() e send() do objeto XMLHttpRequest para enviar uma solicitação a um servidor
- Obtenha os dados de resposta como dados XML
A função displayResult() é usada para exibir o arquivo XML estilizado pelo arquivo XSL:
- Carregar arquivos XML e XSL
- Testar que tipo de navegador o usuário tem
- Se o Internet Explorer:
- Use o método transformNode() para aplicar a folha de estilo XSL ao documento xml
- Defina o corpo do documento atual (id="example") para conter o documento xml com estilo
- Se outros navegadores:
- Crie um novo objeto XSLTProcessor e importe o arquivo XSL para ele
- Use o método transformToFragment() para aplicar a folha de estilo XSL ao documento xml
- Defina o corpo do documento atual (id="example") para conter o documento xml com estilo