XSLT - Auf dem Client
XSLT kann verwendet werden, um das Dokument in Ihrem Browser in XHTML umzuwandeln.
Eine JavaScript-Lösung
In den vorangegangenen Kapiteln haben wir erklärt, wie XSLT verwendet werden kann, um ein Dokument von XML in XHTML umzuwandeln. Wir taten dies, indem wir der XML-Datei ein XSL-Stylesheet hinzufügten und den Browser die Transformation durchführen ließen.Auch wenn dies gut funktioniert, ist es nicht immer wünschenswert, eine Stylesheet-Referenz in eine XML-Datei aufzunehmen (z. B. funktioniert es nicht in einem nicht XSLT-fähigen Browser).
Eine vielseitigere Lösung wäre die Verwendung von JavaScript zur Durchführung der Transformation.
Durch die Verwendung von JavaScript können wir:
- Führen Sie browserspezifische Tests durch
- Verwenden Sie je nach Browser- und Benutzeranforderungen unterschiedliche Stylesheets
Das ist das Schöne an XSLT! Eines der Designziele für XSLT bestand darin, die Transformation von Daten von einem Format in ein anderes zu ermöglichen und dabei verschiedene Browser und unterschiedliche Benutzeranforderungen zu unterstützen.
Die XML-Datei und die XSL-Datei
Sehen Sie sich das XML-Dokument an, das Sie in den vorherigen Kapiteln gesehen haben:
<?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>
Und das dazugehörige 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>
Beachten Sie, dass die XML-Datei keinen Verweis auf die XSL-Datei hat.
WICHTIG: Der obige Satz weist darauf hin, dass eine XML-Datei mit vielen verschiedenen XSL-Stylesheets transformiert werden kann.
Umwandlung von XML in XHTML im Browser
Hier ist der Quellcode, der benötigt wird, um die XML-Datei auf dem Client in XHTML umzuwandeln:
Beispiel
<!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>
Tipp: Wenn Sie nicht wissen, wie man JavaScript schreibt, studieren Sie bitte unser JavaScript-Tutorial .
Beispiel erklärt:
Die Funktion loadXMLDoc() macht Folgendes:
- Erstellen Sie ein XMLHttpRequest-Objekt
- Verwenden Sie die open()- und send()-Methoden des XMLHttpRequest-Objekts, um eine Anfrage an einen Server zu senden
- Rufen Sie die Antwortdaten als XML-Daten ab
Die Funktion displayResult() wird verwendet, um die XML-Datei im Stil der XSL-Datei anzuzeigen:
- Laden Sie XML- und XSL-Dateien
- Testen Sie, welche Art von Browser der Benutzer hat
- Wenn Internet-Explorer:
- Verwenden Sie die Methode transformNode(), um das XSL-Stylesheet auf das XML-Dokument anzuwenden
- Legen Sie fest, dass der Hauptteil des aktuellen Dokuments (id="example") das formatierte XML-Dokument enthält
- Bei anderen Browsern:
- Erstellen Sie ein neues XSLTProcessor-Objekt und importieren Sie die XSL-Datei darin
- Verwenden Sie die Methode transformToFragment(), um das XSL-Stylesheet auf das XML-Dokument anzuwenden
- Legen Sie fest, dass der Hauptteil des aktuellen Dokuments (id="example") das formatierte XML-Dokument enthält