Internet Explorer
In Internet Explorer, the DOMElement object supports the transformNode method. However, each time this method is called, the XSL stylesheet must be recompiled, making it very sluggish.
Microsoft does however provide the MSXML2.XslTemplate Active X control which is similar to the XSLTProcessor. The compiled stylesheet is cached by the browser, therefore transformations are a lot quicker. Like the XSLTProcessor object in Firefox and PHP, the stylesheet is imported as DomDocument object.
The XSLTemplate object requires a FreeThreadedDomDocument, which implements an identical interface to the standard DomDocument object, with the difference of allowing simultaneous access to the object from multiple threads.
var oXsl = new ActiveXObject(‘Msxml2.FreeThreadedDOMDocument.3.0’);
oXsl.async = false;
oXsl.load(‘book_summary.xsl’);
If an error occurred while parsing the XML, the parseError, property of the DOMDocument will be available and the errorCode will be non zero:
if ((oXsl.parseError) && (oXsl.parseError.errorCode != 0)) {
/* an error occurred while loading the document */
}
We now need to load the style sheet into the processor and we are ready to make the transformation:
var oXslt = new ActiveXObject(“Msxml2.XSLTemplate.3.0”);
oXslt.stylesheet= oXsl;
oXsltProcessor = oXslt.createProcessor();
oXsltProcessor.input = oXmlDom;
oXsltProcessor.transform();
var transformedXml = oXsltProcessor.output;
An XSLT and Ajax Example
This is where the technologies of XML, XSLT and xPath all come together. Through the correct utilisation of these technologies, where available, you can reward your visitors with a feature-rich user interface.
Extending our original XSLT application by adding an Ajax module, we will display the picture and the book synopsis when the users mouse pointer hovers over a link to a specific book. If the web browser supports XSLT, the PHP script will return the XML for the book requested and allow the browser to transform it. If not, the XML is transformed by the PHP script and returned as HTML.
Book Summary Display
The XSL Stylesheet
We first start by making a small change to the book_summary.xsl stylesheet, adding a small CSS stylesheet and a link to the external Javascript containing the Ajax engine to the root template.
XSL:
<xsl:template match=”/library”>
<html>
<head>
<title>XML Library</title>
<style type=”text/css”>
.bookcover {
float: left;
margin: 5px 15px 20px 0px;
}
/* the book summary won’t be displayed unless Aajx is supported */
#bookSummary {
position: absolute;
border: 3px solid black;
background-color: gray;
display: none;
padding: 5px;
margin-right: 100px;
}
</style>
</head>
<body>
<ul id=”bookList”>
<xsl:for-each select=”books/book”>
<xsl:sort select=”title”/>
<xsl:variable name=”isbn” select=”@isbn” />
<li>
<a href=”{$script-path}?isbn={$isbn}”>
<xsl:value-of select=”title”/>
</a>
</li>
</xsl:for-each >
</ul>
<xsl:apply-templates select=”books/book[@isbn=$select-isbn]” />
<div id=”bookSummary”></div>
<script src=”xml_helper_functions.js” type=”text/javascript”></script>
<script src=”book.js” type=”text/javascript”></script>
</body>
</html>
</xsl:template>
We also need an additional XSL stylesheet which will transform the XML for a single book, to HTML.
XSL – single_book_html.xsl:
<xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>
<xsl:output method=”html” encoding=”UTF-8″
/>
<xsl:template match=”book”>
<div>
<xsl:variable name=”isbn” select=”@isbn” />
<xsl:if test=”hascover = ‘yes'”>
<img class=”bookcover” src=”book_covers/{$isbn}.jpg” />
</xsl:if>
<div>
<h2><xsl:value-of select=”title” /></h2>
<p><xsl:value-of select=”synopsis” /></p>
</div>
</div>
</xsl:template>
</xsl:stylesheet>
