XSLT – Na klientovi
XSLT lze použít k transformaci dokumentu na XHTML ve vašem prohlížeči.
Řešení JavaScriptu
V předchozích kapitolách jsme vysvětlili, jak lze XSLT použít k transformaci dokumentu z XML do XHTML. Udělali jsme to přidáním šablony stylů XSL do souboru XML a nechali prohlížeč provést transformaci.I když to funguje dobře, není vždy žádoucí zahrnout odkaz na šablonu stylů do souboru XML (např. nebude fungovat v prohlížeči, který nepodporuje XSLT).
Všestrannějším řešením by bylo použití JavaScriptu k provedení transformace.
Pomocí JavaScriptu můžeme:
- provést testování specifické pro prohlížeč
- používat různé šablony stylů podle potřeb prohlížeče a uživatele
To je krása XSLT! Jedním z cílů návrhu XSLT bylo umožnit transformaci dat z jednoho formátu do druhého, podporující různé prohlížeče a různé potřeby uživatelů.
Soubor XML a soubor XSL
Podívejte se na dokument XML, který jste viděli v předchozích kapitolách:
<?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>
A doprovodná šablona stylů 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="/">
<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>
Všimněte si, že soubor XML nemá odkaz na soubor XSL.
DŮLEŽITÉ: Výše uvedená věta naznačuje, že soubor XML lze transformovat pomocí mnoha různých šablon stylů XSL.
Transformace XML do XHTML v prohlížeči
Zde je zdrojový kód potřebný k transformaci souboru XML na XHTML na klientovi:
Příklad
<!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>
Tip: Pokud nevíte, jak psát JavaScript, prostudujte si prosím náš JavaScript tutoriál .
Vysvětlený příklad:
Funkce loadXMLDoc() provádí následující:
- Vytvořte objekt XMLHttpRequest
- K odeslání požadavku na server použijte metody open() a send() objektu XMLHttpRequest
- Získejte data odezvy jako data XML
Funkce displayResult() se používá k zobrazení souboru XML stylizovaného souborem XSL:
- Načtěte soubory XML a XSL
- Vyzkoušejte, jaký má uživatel prohlížeč
- Pokud Internet Explorer:
- Použijte metodu transformNode() k použití šablony stylů XSL na xml dokument
- Nastavte tělo aktuálního dokumentu (id="example") tak, aby obsahovalo stylizovaný dokument xml
- Pokud jiné prohlížeče:
- Vytvořte nový objekt XSLTProcessor a importujte do něj soubor XSL
- Použijte metodu transformToFragment() k použití šablony stylů XSL na xml dokument
- Nastavte tělo aktuálního dokumentu (id="example") tak, aby obsahovalo stylizovaný dokument xml