AJAX - The Complete Reference

Chapter 4: Data Formats 165

PART I

After the loop is finished executing, finish off the table:

</tbody></table>

</xsl:template>

</xsl:stylesheet>

If you had an XML document holding the XSLT shown here in a variable named

bookmarkStylesheet, you could quickly apply it to the fetched bookmark content held in

xhr.responseXML:

var xsltProcessor = new XSLTProcessor();

xsltProcessor.importStylesheet(bookmarkStylesheet);

var resultDocument = xsltProcessor.transformToFragment(xhr.responseXML, document);

and then all you have to do is append the resulting markup into the document like so:

responseOutput.appendChild(resultDocument);

You can find the Firefox version of this example at http://ajaxref.com/ch4/xmlxsltff.html.

Of course, the Internet Explorer way has to be different, otherwise our lives as Web

developers would be far too easy. First, you use the ActiveX-based XML parser to load up

the fetched XML document containing the bookmarks:

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

/* we also could use our createDocument() wrapper function here but for

clearly acknowledging the ActiveX parsing involved we leave this here.

The online version does however use the wrapper */

xmlDoc.async="false";

xmlDoc.loadXML(xhr.responseText);

Next, you fetch the XSL file used to transform the XML into the table:

var xsl = new ActiveXObject("Microsoft.XMLDOM");

xsl.async = false;

xsl.load("bookmarks.xsl");

Now apply the XSLT to the first DOM tree with a simple command:

var transformed = xmlDoc.transformNode(xsl);

and then output the result into the document:

responseOutput.innerHTML = transformed;

The Internet Explorer version of the XSLT transformation can be found at http://ajaxref

.com/ch4/xmlxsltie.html.

Once again, let’s turn to the Sarissa library discussed in the XPath section to mitigate the

cross-browser issues. First, include the appropriate libraries:

<script type="text/javascript" src="sarissa.js"></script>

<script type="text/javascript" src="sarissa_ieemu_load.js"></script>

<script type="text/javascript" src="sarissa_ieemu_xpath.js"></script>