Cross-Browser XML and XSLT Processing

Ryan Morr — Wed, 07 Jan 2009 05:06:16 +0000

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 important distinction – the data is live. The data is subject to further XSL manipulation after the XML document has been initially transformed, facilitating 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 to 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 what I’ve discussed here. 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 for this article.

Ryan Morr » XML

Cross-Browser XML and XSLT Processing

Features

Example

Download