Neueste Web-Entwicklung Tutorials
 

XSLT - auf dem Client

❮ Zurück Weiter Kapitel ❯

XSLT kann das Dokument zu XHTML in Ihrem Browser zu transformieren werden.

Eine JavaScript-Lösung

In den vorangegangenen Kapiteln haben wir erklärt, wie XSLT kann ein Dokument von XML zu XHTML zu transformieren werden. Wir taten dies, indem sie ein XSL-Stylesheet auf die XML-Datei hinzufügen und lassen Sie den Browser, um die Transformation tun.

Auch wenn dies funktioniert, ist es nicht immer wünschenswert , eine Stylesheet - Referenz in einer XML - Datei enthält (eg it will not work in a non XSLT aware browser.)

Eine vielseitigere Lösung wäre, eine JavaScript zu verwenden, um die Transformation zu tun.

Durch die Verwendung eines JavaScript, können wir:

  • Sie browserspezifische Tests
  • verwenden unterschiedliche Stylesheets nach Browser und die Bedürfnisse der Nutzer

Das ist die Schönheit von XSLT! Eines der Entwurfsziele für XSLT war es möglich zu machen, Daten zu einem anderen von einem Format zu transformieren, verschiedene Browser und unterschiedliche Bedürfnisse der Nutzer zu unterstützen.

Die XML-Datei und die XSL-Datei

Schauen Sie sich die XML-Dokument, 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>

Sehen Sie sich die XML - Datei .

Und der dazu gehö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="/">
  <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>

Sehen Sie die XSL - Datei .

Notice that the XML file does not have a reference to the XSL file.

IMPORTANT: Der obige Satz gibt an, dass eine XML - Datei umgewandelt werden könnte viele verschiedenen XSL - Stylesheets verwenden.

Transformieren von XML zu XHTML im Browser

Hier ist der Quellcode benötigt, um die XML-Datei zu XHTML auf dem Client zu verwandeln:

Beispiel

<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>
Versuch es selber "

Tip: Wenn Sie nicht wissen , wie JavaScript zu schreiben, studieren Sie bitte unsere JavaScript - Tutorial .

Beispiel erläutert werden:

The loadXMLDoc() function does the following:

  • Erstellen Sie ein XMLHttpRequest-Objekt
  • Verwenden Sie die open() und send() Methoden des XMLHttpRequest Objekt eine Anfrage an einen Server zu senden ,
  • Holen Sie sich die Antwortdaten als XML-Daten

The displayResult() function is used to display the XML file styled by the XSL file:

  • Laden von XML und XSL-Dateien
  • Prüfen Sie, welche Art von Browser der Anwender
  • Wenn Internet Explorer:
    • Verwenden Sie die transformNode() Methode , um den XSL - Stylesheet auf das XML - Dokument anwenden
    • Stellen Sie den Körper des aktuellen Dokuments (id="example") das gestylten XML - Dokument zu enthalten ,
  • Wenn andere Browser:
    • Erstellen Sie ein neues Objekt XSLTProcessor und importieren die XSL-Datei, um es
    • Verwenden Sie die transformToFragment() Methode , um den XSL - Stylesheet auf das XML - Dokument anwenden
    • Stellen Sie den Körper des aktuellen Dokuments (id="example") das gestylten XML - Dokument zu enthalten ,

❮ Zurück Weiter Kapitel ❯