XSLT pode ser usado para transformar o documento em XHTML no seu browser.
Uma solução JavaScript
Nos capítulos anteriores nós explicamos como XSLT pode ser usado para transformar um documento de XML para XHTML. Nós fizemos isso adicionando uma folha de estilo XSL para o arquivo XML e deixar o navegador fazer a transformação.Mesmo se isso funciona bem, nem sempre é desejável incluir uma referência de folha de estilo em um arquivo XML (eg it will not work in a non XSLT aware browser.)
Uma solução mais versátil seria usar um JavaScript para fazer a transformação.
Usando um JavaScript, podemos:
- fazer testes específicos de navegador
- usar folhas de estilo diferentes de acordo com as necessidades do browser e do usuário
Essa é a beleza de XSLT! Uma das metas de design para XSLT era fazê-lo possível transformar dados de um formato para outro, apoiando diferentes browsers e diferentes necessidades dos utilizadores.
O arquivo XML e o arquivo XSL
Olhe para 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 o que acompanha folha de estilo XSL:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<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>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Notice that the XML file does not have a reference to the XSL file.
IMPORTANT: A frase acima indica que um arquivo XML pode ser transformado usando muitas folhas de estilo XSL diferentes.
Transformando XML para XHTML no Browser
Aqui está o código fonte necessário para transformar o arquivo XML para XHTML no cliente:
Exemplo
<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> Tente você mesmo " Tip: Se você não sabe como escrever JavaScript, por favor estudar nosso tutorial JavaScript .
Exemplo Explicado:
The loadXMLDoc() function does the following:
- Criar um objeto XMLHttpRequest
- Use o open() e send() métodos do objeto XMLHttpRequest para enviar uma solicitação para um servidor
- Obter os dados de resposta como dados XML
The displayResult() function is used to display the XML file styled by the XSL file:
- XML carga e arquivos XSL
- Testar que tipo de navegador o usuário tem
- Se o Internet Explorer:
- Use o transformNode() método para aplicar a folha de estilo XSL para o documento XML
- Definir o corpo do documento atual (id="example") para conter o documento xml estilo
- Se outros navegadores:
- Crie um novo objeto XSLTProcessor e importar o arquivo XSL a ele
- Use o transformToFragment() método para aplicar a folha de estilo XSL para o documento XML
- Definir o corpo do documento atual (id="example") para conter o documento xml estilo