Dave has just received a request to change the weather portlet on the homepage. The image must now be on the bottom, not the top, and the wording should be more precise. The browser receives periodic weather updates in the form of an XML specification and uses Browser-Side XSLT to get HTML for the portlet. The stylesheet is embedded inside the static homepage HTML file. So Dave just has to tweak the XSLT to get all the browsers rendering the new design.

How can you render incoming XML?

Apply XSLT to convert “XML Message”s into XHTML. XSLT - Extensible Stylesheet Language Transformations - is a language for transforming XML documents into other forms. Here, XML is transformed to XHTML, a type of HTML that conforms to the XML standard. (You could get away with converting to plain-old HTML, but things works better if you stick to XHTML.) XSLT is fairly well-supported in modern browsers and, although browser APIs vary, there are good cross-browser toolkits available.

XSLT is well-suited to rendering XML. An XML document is designed to encapsulate a data object, and an XSLT stylesheet is a strategy for presenting such objects. Previously, XSLT has been used as a server-side technology - the server grabs some XML from a repository or another process and creates a web page by transforming it into XHTML. All that happens on the server. More recently, browsers have incorporated XSLT functionality, so the browser can automatically create an HTML page by marrying together an XML document with an XSLT stylesheet.

Browser-Side XSLT is slightly different. Here, the XML document does not constitute the contents of the entire page, but a response from an “XMLHttpRequest Call”. The transformation to XHTML can take advantage of the browser's built-in XSLT support, or alternatively an XSLT processor can be implemented in Javascript, building on the browser's more primitive XML features. However the XSLT occurs, you're unlikely to be implementing it yourself. There are a couple of good cross-browser libraries available, discussed in the Real-World Examples below.

It's beyond the scope of this pattern to explain XSLT in any detail; however, here's a quick overview:

This discussion has focused on the most obvious application of Browser-Side XSLT: conversion to HTML for display to the user. You can also convert the XML to Javascript too, and then execute it with the eval() method. For example, it would be possible to build a native Javascript object by converting some XML into some code that creates the object.

This refactoring is similar to that performed in “Browser-Side Templating”, but using XSLT instead of templating. The starting point, the Basic Drilldown Demo, converts XML to HTML using a series of Javascript string concatenations. The callback function, which receives the XML, therefore performs lots of string concatenations as follows:

    html+="<div id='categoryName'>" + categoryName + "</div>";

In this refactoring, all that string-handling is replaced by an XSLT transformation, using the Sarissa library. One slight complication is the stylesheet - how does the script access it? The solution here is to keep it as a separate file on the server and pull it down on page load:

    var xsltDoc;
    window.onload = function() {
      ...
      ajaxCaller.getXML("./drilldown.xsl",function(response) {xsltDoc = response;});
      ...
    }

As was mentioned in the Decisions above, there's a race condition here, because the XML response may come before the stylesheet. To deal with this, the drilldown callback function keeps looping until the stylesheet is defined:

    function onDrilldownResponse(xml) {
      if (xsltDoc==null) {
        setTimeout(function() { onDrilldownResponse(xml); }, 1000);
        return;
      }
      ...
    }

Beyond that, the callback function is simply an invocation of Sarissa's XSLT processor:

    function onDrilldownResponse(xml) {
      ...
      var xsltProc  = new XSLTProcessor();
      xsltProc.importStylesheet(xsltDoc);
      var htmlDoc = xsltProc.transformToDocument(xml);
      var htmlString = Sarissa.serialize(htmlDoc);
      $("drilldown").innerHTML = htmlString;
    }

The only thing left is the stylesheet itself, shown below. I'll spare a walkthrough. The output here is the same as that in the Basic Drilldown Demo, which generates the HTML using manual Javascript processing.

    <?xml version="1.0"?>
    <xsl:stylesheet version="1.0"
                    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

      <xsl:template match="/">
        <html>
          <body>
            <xsl:apply-templates/>
          </body>
        </html>
      </xsl:template>

      <xsl:template match="/category">
        <div id='categoryName'><xsl:value-of select="@name" /></div>
        <xsl:if test="@parent!=''">
          <div id='parent' onclick='retrieveCategory("{@parent}")'>
            Back to <xsl:value-of select="@parent" />
          </div>
        </xsl:if>
        <xsl:apply-templates/>
      </xsl:template>

      <xsl:template match="/category/items/link">
        <div class="link"><a href="{url}"><xsl:value-of select=
"name"/></a></div>
      </xsl:template>

      <xsl:template match="/category/items/category">
          <div class="category"
               onclick="retrieveCategory('{@name}')">
               <xsl:value-of select="@name"/>
          </div>
      </xsl:template>

    </xsl:stylesheet>

Browser-Side XSLT is a strategy for presenting abstract data in a human-readable form. People do this all the time with diagrams. For instance, a family tree is one way to render the abstract set of relationships in a family. A UML diagram is a visual representation of some (real or imagined) code.