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.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton’s column.