JavaScript and XML : Part 2 | JavaScript: The Definitive Guide, Fifth Edition | WebReference

JavaScript and XML : Part 2 | JavaScript: The Definitive Guide, Fifth Edition


JavaScript and XML: Part 2

By  David Flanagan

21.3 Transforming XML with XSLT

Once you've loaded, parsed, or otherwise obtained a Document object representing an XML document, one of the most powerful things you can do with it is transform it using an XSLT stylesheet. XSLT stands for XSL Transformations, and XSL stands for Extensible Stylesheet Language. XSL stylesheets are XML documents and can be loaded and parsed in the same way that any XML document can. A tutorial on XSL is well beyond the scope of this book, but Example 21-8 shows a sample stylesheet that can transform an XML document like the one shown in Example 21-6 into an HTML table.

Example 21-8. A simple XSL stylesheet

XSLT transforms the content of an XML document using the rules in an XSL stylesheet. In the context of client-side JavaScript, this is usually done to transform the XML document into HTML. Many web application architectures use XSLT on the server side, but Mozilla-based browsers and IE support XSLT on the client side, and pushing the transform off the server and onto the client can save server resources and network bandwidth (because XML data is usually more compact than the HTML presentation of that data).

Many modern browsers can style XML using either CSS or XSL stylesheets. If you specify a stylesheet in an xml-stylesheet processing instruction, you can load an XML document directly into the browser, and the browser styles and displays it. The requisite processing instruction might look like this:

Note that the browser performs this kind of XSLT transformation automatically when an XML document containing an appropriate processing instruction is loaded into the browser display window. This is important and useful, but it is not the subject matter of this section. What I explain here is how to use JavaScript to dynamically perform XSL transformations.

The W3C has not defined a standard API for performing XSL transformations on DOM Document and Element objects. In Mozilla-based browsers, the XSLTProcessor object provides a JavaScript XSLT API. And in IE, XML Document and Element objects have atransformNode() method for performing transformations. Example 21-9 shows both APIs. It defines an XML.Transformer class that encapsulates an XSL stylesheet and allows it to be used to transform more than one XML document. The transform() method of an XML.Transformer object uses the encapsulated stylesheet to transform a specified XML document and then replaces the content of a specified DOM element with the results of the transformation.

Example 21-9. XSLT in Mozilla and Internet Explorer

At the time of this writing, IE and Mozilla-based browsers are the only major ones that provide a JavaScript API to XSLT. If support for other browsers is important to you, you might be interested in the AJAXSLT open-source JavaScript XSLT implementation. AJAXSLT originated at Google and is under development at