XSLT and JavaScript

Web 2.0 describes a new approach to Web applications where the functionality is responsive, similar to desktop applications. Two of the main Web 2.0 approaches to building applications include working with Flash/Flex and Ajax.

The Ajax approach to building Web applications includes many existing technologies:

• XHTML and CSS to describe the interface
• DOM to work with the interface and loaded XML data
• XML and XSLT to store and transform the data
• The XMLHttpRequest object to connect to external data sources, usually XML documents
• JavaScript to bind the technologies together to load data, manipulate the interface and respond to user interactions

In this article, I want to look at using JavaScript to apply an XSLT transformation to an XML document. XSLT (Extensible Stylesheet Language Transformations) allows you to change an XML document into another kind of output. It transforms a source XML tree into a results tree and is often used to generate XHTML from an XML document.

Specifically, in the article I’ll

• provide an overview of XSLT
• show how to apply transformations with JavaScript
• work through a simple example

An XSLT stylesheet is just an XML document so you can use any of the browser scripting techniques that you’ve seen previously. You can load the stylesheet with an XMLHttpRequest object and use DOM scripting techniques to traverse the document. You can also use JavaScript to apply the transformation client-side.

While we could also apply a transformation server-side, applying it on the client-side frees up the server and can make an application seem more responsive. Be careful though - you can’t use client-side transformations on Opera 8 and below, and on Safari.

You can download the reference files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

Let’s start by looking more closely at XSLT.