XSLT - On Client Side

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

JavaScript Solution

In the previous chapter, we have explained how to use XSLT to convert an XML document to XHTML. We completed this task by adding an XSL stylesheet to the XML file and performing the conversion through the browser.

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

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

By using JavaScript, we can:

  • Perform browser confirmation tests
  • Use different stylesheets based on browser and user needs

This is the charm of XSLT! One of the design goals 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 perform, and we will also see its growth in specific browser markets (braille, web printers, audio devices, etc.).

XML and XSL files

Please see the XML document shown in the previous chapter:

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

<?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 contain references to the XSL file.

Important Note:This means that the XML file can be transformed using multiple different XSL style sheets.

Convert XML to XHTML in the browser

This is the source code used to convert an XML file 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 are not familiar with how to write JavaScript, please study ourJavaScript Tutorial》。

The first segment of code creates an instance of Microsoft's XML parser and then loads the XML file into memory. The second segment 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. The task is completed!

See how it works in IE.