XSLT - På klienten

Om din webbläsare stöder XSLT, kan den användas för att konvertera dokument till XHTML.

JavaScript-lösning

I föregående kapitel har vi visat dig hur du använder XSLT för att konvertera en XML-dokument till XHTML. Vi gjorde detta genom att lägga till en XSL-stilbok till XML-filen och genomföra omvandlingen via webbläsaren.

Även om detta sätt fungerar bra, är det inte alltid tillfredsställande att inkludera stilboksnamn i XML-filer (t.ex. fungerar detta inte i webbläsare som inte kan känna igen XSLT).

En mer allmän metod är att använda JavaScript för att slutföra omvandlingen.

Genom att använda JavaScript kan vi:

  • Genomför webbläsartester
  • Använd olika stilböcker baserat på webbläsarens och användarens behov

Det är just här som XSLT:s charm ligger! En av XSLT:s designmål är att göra det möjligt att konvertera från ett format till ett annat, samtidigt som det stödjer olika typer av webbläsare och olika användarbehov.

XSLT-omvandlingar på klienten kommer säkert att bli en av de huvudsakliga uppgifterna som webbläsare kommer att utföra i framtiden, och vi kommer också att se dess tillväxt i specifika webbläsarmarknader (teckenspråk, nätverksskrivare, hörselutrustning, etc.).

XML-filer och XSL-filer

Se denna XML-dokument som redan har visats i föregående kapitel:

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
  <cd>
    <titel>Empire Burlesque</titel>
    <artist>Bob Dylan</artist>
    <land>USA</land>
    <företag>Columbia</företag>
    <pris>10.90</pris>
    <år>1985</år>
  </cd>
.
.
.
</catalog>

Se denna XML-fil.

och tillhörande XSL-stilbok:

<?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>Min CD-samling</h2> 
    <table border="1">
      <tr bgcolor="#9acd32">
        <th align="left">Titel</th> 
        <th 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>

Se denna XSL-fil.

Observera att denna XML-fil innehåller ingen referens till XSL-filen.

Viktigt:Detta innebär att XML-filen kan konverteras till XHTML med hjälp av flera olika XSL-stilark.

Konvertera XML till XHTML i webbläsaren

Detta är källkoden för att konvertera XML-filer till XHTML på klientsidan:

<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>

Tips:Om du inte känner till hur man skriver JavaScript, lär dig vårJavaScript-tutorials》。

Det första avsnittet skapar ett exemplar av Microsofts XML-parser och läser sedan XML-filen in i minnet. Det andra avsnittet skapar ett annat exemplar av parsern och läser sedan XSL-filen in i minnet. Det sista raden använder XSL-dokumentet för att konvertera XML-dokumentet och visar resultatet som XHTML i webbläsaren. Uppgiften är klar!

Se hur det fungerar i IE.