XSLT - Op die kliënt
XSLT kan gebruik word om die dokument na XHTML in jou blaaier te transformeer.
'n JavaScript-oplossing
In die vorige hoofstukke het ons verduidelik hoe XSLT gebruik kan word om 'n dokument van XML na XHTML te transformeer. Ons het dit gedoen deur 'n XSL-stylblad by die XML-lêer te voeg en die blaaier die transformasie te laat doen.Selfs al werk dit goed, is dit nie altyd wenslik om 'n stylbladverwysing in 'n XML-lêer in te sluit nie (bv. dit sal nie in 'n nie XSLT-bewuste blaaier werk nie.)
'n Meer veelsydige oplossing sou wees om 'n JavaScript te gebruik om die transformasie te doen.
Deur 'n JavaScript te gebruik, kan ons:
- blaaierspesifieke toetse doen
- gebruik verskillende stylblaaie volgens blaaier- en gebruikersbehoeftes
Dit is die skoonheid van XSLT! Een van die ontwerpdoelwitte vir XSLT was om dit moontlik te maak om data van een formaat na 'n ander te transformeer, wat verskillende blaaiers en verskillende gebruikersbehoeftes ondersteun.
Die XML-lêer en die XSL-lêer
Kyk na die XML-dokument wat jy in die vorige hoofstukke gesien het:
<?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>
En die meegaande XSL-stylblad:
<?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>
Let daarop dat die XML-lêer nie 'n verwysing na die XSL-lêer het nie.
BELANGRIK: Die sin hierbo dui aan dat 'n XML-lêer getransformeer kan word deur baie verskillende XSL-stylblaaie te gebruik.
Die transformasie van XML na XHTML in die blaaier
Hier is die bronkode wat nodig is om die XML-lêer na XHTML op die kliënt te transformeer:
Voorbeeld
<!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>
Wenk: As jy nie weet hoe om JavaScript te skryf nie, bestudeer asseblief ons JavaScript-tutoriaal .
Voorbeeld verduidelik:
Die loadXMLDoc() funksie doen die volgende:
- Skep 'n XMLHttpRequest-objek
- Gebruik die open() en send() metodes van die XMLHttpRequest-objek om 'n versoek na 'n bediener te stuur
- Kry die responsdata as XML-data
Die displayResult()-funksie word gebruik om die XML-lêer te vertoon wat deur die XSL-lêer gestileer is:
- Laai XML- en XSL-lêers
- Toets watter soort blaaier die gebruiker het
- As Internet Explorer:
- Gebruik die transformNode() metode om die XSL-stylblad op die xml-dokument toe te pas
- Stel die liggaam van die huidige dokument (id="voorbeeld") om die gestileerde xml-dokument te bevat
- As ander blaaiers:
- Skep 'n nuwe XSLTProcessor-objek en voer die XSL-lêer daarheen in
- Gebruik die transformToFragment() metode om die XSL-stylblad op die xml-dokument toe te pas
- Stel die liggaam van die huidige dokument (id="voorbeeld") om die gestileerde xml-dokument te bevat