Why XML transformation via XSLT in the browser is limited

by Tony Patton | Apr 17, 2006 5:45:00 PM

Tags: Tony Patton, XSLT language, Web browser, XSLT, XML, Web Development Zone Newsletter

Takeaway: There are many options when working with XML data. You may extract individual data elements from the XML via your favorite language and use accordingly, or you can utilize XSLT to transform the XML to another format like XHTML for displaying in the browser. See how XSLT puts control into the developer's hands.

The last couple of weeks we've examined the AJAX approach to browser-based development with the XMLHttpRequest object and JavaScript. While working with XML data is straightforward, you can easily manipulate XML with XSLT stylesheets. However, using XSLT in the browser is limited, so server-based processing is preferred.

What is XSLT?

XSLT is basically a stylesheet language for XML, much in the same way CSS is a stylesheet language for HTML. You may use XSLT to transform an XML document to XML, HTML, or XHTML.

The XSLT language allows you to control the output of the transformation. You may add or remove elements and attributes based on conditions or developer decision. In addition, you can take it further by sorting or rearranging elements any way necessary.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

XSLT takes advantage of XPath to navigate an XML document's elements and attributes. XPath is used to define parts of the source document that should match one or more predefined templates. The matching parts of the document are transformed or formatted by XLST and are included in the resulting document. Here are a couple of points worth remembering: XSLT stylesheets are XML documents, and the XSLT processing paradigm is pattern matching.

XSLT in action

We can utilize the XML from last week's article to demonstrate the application of XSLT. The sample XML follows:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<response>

<telephone>502-000-0000</telephone>

<companyname>TechRepublic.com</companyname>

</response>

We can utilize an XSL stylesheet to format the XML data according to our needs. The sample in Listing A presents the data in an HTML table.

A few notes on the XSL stylesheet:

A stylesheet consists of one or more sets of rules, which are called templates. Each template contains rules to apply when a specified node is matched. The match attribute is used to associate a template with an XML element. The backslash (/) says the template is for the entire XML document.
The stylesheet can process multiple data elements within the XML document. The for-each statement loops through all elements. The select attribute defines what element it processes. In our case, the root response element is used.
The statements contained within a for-each element (opening and closing tags) defines how the data within the response element is handled.
The value-of element pulls a piece of data from the XML document. The select attribute specifies what is pulled from the XML document. In this example, we use the companyname and telephone elements.

We now have a template to go with our XML, so the final step is combining the two (or applying the stylesheet). Internet Explorer includes a XSLT engine, so it is easy to apply it. The following listing combines the two and spits out the HTML:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<?xml-stylesheet type="text/xsl" href="tr.xsl"?>

<response>

<telephone>502-000-0000</telephone>

<companyname>TechRepublic.com</companyname>

</response>

The second line tells the system what stylesheet to use. Loading the XML document in Internet Explorer applies the specific style sheet and presents the data as specified. Also, we can utilize the Microsoft XML parser to perform the transformation, as you can see in Listing B.

A few notes about the code:

An instance of the XML parser object is created to work with both the XML document as well as the stylesheet.
The files are loaded into memory via the load method.
The transformNode method of the XML parser applies the stylesheet to the XML, and the JavaScript document.write command presents it in the requesting client.

Note that Mozilla-based browsers like Firefox provide XSLT support via an XSLTProcessor object, but I'm always wary of building a public site that won't function for all visitors. This may not be a problem for intranet-based sites where the client environment is controlled. Otherwise, I prefer to handle XSLT on the server. Of course, utilizing the backend negates the power of a development approach like AJAX.

Choose your path

Working with XML provides a variety of ways to load and present data. You may utilize the XMLHttpRequest object along with XPath to load and extract pieces of the data, or you may utilize an XSL stylesheet to do the work for you. XSLT provides a language for processing and transforming an XML document into the necessary format for your application. While XSLT in the browser is a bit limited, you can always implement a server-side solution.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.