XSLT - Op de klant
XSLT kan worden gebruikt om het document in uw browser om te zetten naar XHTML.
Een JavaScript-oplossing
In de vorige hoofdstukken hebben we uitgelegd hoe XSLT gebruikt kan worden om een document om te zetten van XML naar XHTML. We hebben dit gedaan door een XSL-stijlblad aan het XML-bestand toe te voegen en de browser de transformatie te laten doen.Zelfs als dit prima werkt, is het niet altijd wenselijk om een stylesheetverwijzing op te nemen in een XML-bestand (het werkt bijvoorbeeld niet in een niet XSLT-bewuste browser).
Een meer veelzijdige oplossing zou zijn om een JavaScript te gebruiken om de transformatie uit te voeren.
Door een JavaScript te gebruiken, kunnen we:
- browserspecifieke tests uitvoeren
- gebruik verschillende stijlbladen volgens de behoeften van de browser en de gebruiker
Dat is het mooie van XSLT! Een van de ontwerpdoelen van XSLT was om het mogelijk te maken om gegevens van het ene formaat naar het andere te transformeren, waarbij verschillende browsers en verschillende gebruikersbehoeften worden ondersteund.
Het XML-bestand en het XSL-bestand
Kijk naar het XML-document dat je in de vorige hoofdstukken hebt gezien:
<?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 het bijbehorende XSL-stylesheet:
<?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>
Merk op dat het XML-bestand geen verwijzing naar het XSL-bestand heeft.
BELANGRIJK: De bovenstaande zin geeft aan dat een XML-bestand kan worden getransformeerd met behulp van veel verschillende XSL-stijlbladen.
XML transformeren naar XHTML in de browser
Hier is de broncode die nodig is om het XML-bestand naar XHTML op de client te transformeren:
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>
Tip: Als je niet weet hoe je JavaScript moet schrijven, lees dan onze JavaScript-tutorial .
Voorbeeld uitgelegd:
De functie loadXMLDoc() doet het volgende:
- Een XMLHttpRequest-object maken
- Gebruik de methoden open() en send() van het object XMLHttpRequest om een verzoek naar een server te verzenden
- De responsgegevens ophalen als XML-gegevens
De functie displayResult() wordt gebruikt om het XML-bestand weer te geven dat is gestileerd door het XSL-bestand:
- Laad XML- en XSL-bestanden
- Test wat voor soort browser de gebruiker heeft
- Als Internet Explorer:
- Gebruik de methode transformNode() om het XSL-opmaakmodel toe te passen op het xml-document
- Stel de hoofdtekst van het huidige document (id="example") in om het gestileerde XML-document te bevatten
- Als andere browsers:
- Maak een nieuw XSLTProcessor-object en importeer het XSL-bestand erin
- Gebruik de methode transformToFragment() om het XSL-opmaakmodel toe te passen op het xml-document
- Stel de hoofdtekst van het huidige document (id="example") in om het gestileerde XML-document te bevatten