XSLT - Klantzijde

Als je browser XSLT ondersteunt, kan het worden gebruikt om documenten te converteren naar XHTML.

JavaScript-oplossing

In de vorige hoofdstukken hebben we je uitgelegd hoe je een XML-document kunt converteren naar XHTML met behulp van XSLT. We hebben dit gedaan door een XSL-stijlsheet toe te voegen aan het XML-bestand en de conversie te voltooien via de browser.

Hoewel deze methode goed werkt, is het niet altijd bevredigend om verwijzingen naar stijlsheets op te nemen in XML-bestanden (bijvoorbeeld, als browsers XSLT niet kunnen herkennen, werkt deze methode niet).

Een meer universele methode is om de conversie te voltooien met behulp van JavaScript.

Door het gebruik van JavaScript, kunnen we:

  • Voer browserbevestigingstests uit
  • Gebruik verschillende stijlsheets op basis van de browser en de gebruikersbehoeften

Dit is de charme van XSLT! Een van de doelen van het ontwerp van XSLT is om het mogelijk te maken om van de ene formaat naar de andere te converteren, terwijl het ook ondersteuning biedt voor verschillende soorten browsers en verschillende gebruikersbehoeften.

XSLT-transformaties op de clientzijde zullen zeker een van de belangrijkste taken worden die toekomstige browsers uitvoeren, en we zullen ook zien hoe het in specifieke browsermarkten groeit (blinde teksten, webprinters, auditieve apparaten, enz.).

XML-bestanden en XSL-bestanden

Bekijk deze XML-document die al is getoond in de vorige hoofdstukken:

<?xml version="1.0" encoding="ISO-8859-1"?>
<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>

Bekijk dit XML-bestand.

en bijbehorende XSL-stijlsheet:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html>
  <body>
    <h2>Moet CD-verzameling</h2> 
    <table border="1">
      <tr bgcolor="#9acd32">
        <th align="left">Titel</th> 
        <th align="left">Artiest</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>

Bekijk dit XSL-bestand.

Let op, deze XML-bestand bevat geen verwijzingen naar XSL-bestanden.

Belangrijke mededeling:Deze zin betekent dat een XML-bestand kan worden geconverteerd naar XHTML met behulp van meerdere verschillende XSL-stijlsheets.

Converteer XML naar XHTML in de browser

Dit is de broncode die gebruikt wordt om XML-bestanden om te zetten naar XHTML op de client-side:

<html>
<body>
<script type="text/javascript">
// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")
// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>

Tip:Als je niet weet hoe je JavaScript kunt schrijven, leer dan onze <JavaScript Handleiding>

De eerste code heeft een instantie van de Microsoft XML-parser gemaakt en heeft het XML-bestand in het geheugen geladen. De tweede code heeft een andere instantie van de parser gemaakt en heeft dit XSL-bestand in het geheugen geladen. De laatste regel heeft het XML-document getransformeerd met het XSL-document en heeft het resultaat in de browser als XHTML weergegeven. Taak voltooid!

Zie hoe het in IE werkt.