XSL on the Client

HomeXML XSLXSL on the Client

XSL – On the Client

A JavaScript Solution

In the previous chapter I explained how XSL can be used to transform a document from XML to HTML. The trick was to add an XSL stylesheet information to the XML file, and to let the browser do the transformation.

Even if this works fine, it is not always desirable to include a stylesheet reference in the XML file, and the solution will not work in a non XML aware browser.

A much more versatile solution would be to use a JavaScript to do the XML to HTML transformation.

By using a JavaScript we are more open for these possibilities:

  • Allowing the JavaScript to do browser specific testing
  • Using different style sheets according to browser and/or user
    needs

That’s the beauty of XSL. One of the design goals for XSL was to make it possible to transform data from one format to another, supporting different browsers and different user needs.

XSL transformation on the client side is bound to be a major part of the browsers work tasks in the future, as we will se a growth in the specialized browser marked (think: Braille, Speaking Web, Web Printers, Handheld PCs, Mobile Phones …..).

The XML file and the XSL file

Take a new look at the XML document that you saw in the previous chapter (or open it with IE5):

<?xml version="1.0" encoding="ISO8859-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>

And at the companying XSL stylesheet (or open it with IE5):

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
  <html>
  <body>
    <table border="2" bgcolor="yellow">
      <tr>
        <th>Title</th>
        <th>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>

The syntax of the above XSL document was explained in the previous chapter, so it will not be explained here. But be sure to notice that the XML file does not have a reference to the XSL file, and the XSL file does not have a reference to the XML file.

IMPORTANT: The above sentence indicates that an XML file could be transformed using many different XSL files.

Transforming XML to HTML on the client

Here is the simple source code needed transform the XML file to HTML on the client (try it yourself):

<html>
<body>
<script language="javascript">
// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cd_catalog.xml")

// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cd_catalog.xsl")

// Transform
document.write(xml.transformNode(xsl))
</script>

</body>
</html>

(The example above uses JavaScript. If you don’t know to write JavaScript, you should take a trip to JavaScript School.)

The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the XML document into memory. The second block of code creates another instance of the parser and loads the XSL document into memory. The last line of code transforms the XML document using the XSL document, and writes the result to the HTML document.

Nice and simple.