Ryan Morr

There is something inherently powerful about what direct data interaction and manipulation is capable of and the ease at which it performs. XSLT may be called a stylesheet but it is nothing like CSS, it deals directly in data management and presentation, utilizing advanced functionality typically reserved for a scripting language. Similar to what Smarty is to PHP templates, XSLT basically defines the rules for rendering an XML file, with one simportant distinction – the data is live. The data is subject to further XSL manipulation after the XML document has been initially tranformed, faciliating many dynamic features. This has great implications on the web applications of the future; loading a widget could be as simple as dynamically loading an XML document which contains all settings and instructions, performing an XSLT transformation and appending the result document within the DOM. With those kind of capabilities the potential for such an application is limitless. The promise of both XML and XSLT or its greater implications may not be well known but it’s also not new. For a while now it has been speculated to be the next “big thing” in web development, some even went so far as to claim XML would replace HTML as the dominant markup language (I suppose XHTML is the first step, albeit a small one). However, aside from simple data transfer its popularity is far from it’s anticipated potential due in large part to a lack of browser support. I should however mention some of the great work I’ve seen out of Backbase with their various UI widgets, but nevertheless XML really hasn’t caught on the way I hoped it would.

In light of my new found appreciation of XML and XSLT I decided to put a little script together for your basic XML and XSLT importation and manipulation. Hopefully we can get those wheels turning again, maybe one day I can see that potential and not just read about it.

The script itself is fairly lightweight and handles the basic functions associated with XML and XSLT manipulation in Javascript as I’ve outlined below. If your looking for something a little more full featured, Sarissa is a great option as it can handle just about everything including the kitchen sink, you can find it here; http://dev.abiss.gr/sarissa/.

Features

• Load local XML and XLST files
• Encode and decode an XML string
• Serialize an XML string into a document
• Parse XML document into a string
• Transform an XML file with an XSLT stylesheet and apply to element
• Perform an XPath query on an XML document
• Supports IE6+, FF, Opera, Safari, and Chrome
• No browser detection

Example

The following example illustrates a simple transformation involving an XML document, XSLT stylesheet, and an element (container) that will house the results of the transformation. See it in action here

var processor = new XMLProcessor();
var container = document.getElementById('container');
 
processor.loadXML('xml.xml');
processor.loadXSLT('xslt.xsl');
processor.transform(container);

The topic of XML and XSLT and their use within a web application deserves its own post (there is a lot more to it then when I’ve discussed here) and I think I’ll probably do that in the not to distant future.  For now you can find more information on XML, XSLT, and their various elements and functions at the W3C and W3 Schools, two resources that I referred to in preparation of this article.

Download

• Compressed (3kb)
• Fully Documented (6kb)