XSLT - Client-Side

If your browser supports XSLT, it can be used in the browser to convert the document to XHTML.

JavaScript Solution

In the preceding chapters, we have explained to you how to use XSLT to convert an XML document to XHTML. We accomplish this task by adding an XSL stylesheet to the XML file and then completing the transformation through the browser.

Even though this method works well, it is not always satisfactory to include style sheet references in XML files (for example, this method will not work in browsers that cannot recognize XSLT).

A more general method is to use JavaScript to complete the transformation.

Using JavaScript, we can:

  • Perform browser confirmation tests
  • Use different style sheets according to the browser and user needs

This is where the charm of XSLT lies! One of the design purposes of XSLT is to make it possible to convert from one format to another, while supporting different types of browsers and different user needs.

Browser-side XSLT transformations will definitely become one of the main tasks that future browsers will execute, and we will also see its growth in specific browser markets (braille, web printers, audio devices, etc.).

XML files and XSL files

Please see the XML document that has been demonstrated in the preceding chapters:

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

View this XML file.

as well as the accompanying XSL style sheet:

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

View this XSL file.

Please note that this XML file does not include references to the XSL file.

Important Note:The above statement means that XML files can be converted using multiple different XSL style sheets.

Convert XML to XHTML in the browser

This is the source code used to convert XML files to XHTML on the 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:If you don't know how to write JavaScript, please learn ourJavaScript Tutorial》。

The first piece of code creates an instance of Microsoft's XML parser and loads the XML file into memory. The second piece of code creates another instance of the parser and loads this XSL file into memory. The last line of code uses the XSL document to transform the XML document and displays the result as XHTML in the browser. Task completed!

See how it works in IE.