XSL - On the Client
A JavaScript Solution
 | Previously we discussed 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
<?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>
.
.
. |
<?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. |
| 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. |
Transforming XML to HTML on the client
| Here is the simple source code needed transform the XML file to HTML on the
client run with IE5/6: |
<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 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. |
|