Week 11: Combining XSLT with Other Technologies

Today we will consider:

How you can combine AJAX with XSLT to transform XML returned by a web service to HTML using JavaScript and place it within a <div>
How to deliver both XML and HTML easily from a single server side script by conditionally applying XSLT

Combining AJAX and XSLT

It can be useful to design an XSLT stylesheet which defines how to transform XML data retrieved from a web service into HTML, and therefore write an AJAX application without resorting to DOM parsing. To do this you use a JavaScript XSLTProcessor object. Below is some code which illustrates the use of the XSLTProcessor (based on the original article here). Imagine the flights.php script returns data of this format:

<flights>
<flight>
<number>101</number>
<destination>New York</destination>
<date>01/06/08</date>
<time>11:00</date>
</flight>
<flight>
<number>103</number>
<destination>New York</destination>
<date>01/06/08</date>
<time>13:00</date>
</flight>
<flight>
<number>105</number>
<destination>New York</destination>
<date>01/06/08</date>
<time>15:00</date>
</flight>
</flights>

Here is the AJAX / XSLT code:

var xslloaded = false; 
var xsldoc;

function go()
{
    // send ajax request
    var request = new Ajax.Request
        ('http://solentairways.com/flights.php',
            { method: 'GET',
              onComplete: callback}
        );
}

function callback(xmlHTTP)
{
 
    // send ajax request
    var request = new Ajax.Request
        ('http://solentairways.com/flights.xsl',
            { method: 'GET',
              asynchronous: false }
        );


    // Get the XSLT doc
    var xsldoc = request.transport.responseXML;

    if(window.XSLTProcessor)
    {
        var processor = new XSLTProcessor();
        processor.importStylesheet(xsldoc);
        var output = processor.transformToFragment
                    (xmlHTTP.responseXML, document);
        var result=document.getElementById("result");
        // Ensure the output <div> is blank
        result.innerHTML="";

        // append a DOM node (the fragment) to the div
        result.appendChild(output);
    }
    else if (window.ActiveXObject)
    {
        var html = xmlHTTP.responseXML.transformNode(xsldoc);
        var result=document.getElementById("result");
        result.innerHTML = html;
    }    
    else
    {
        alert("your browser can't handle this!");
    }
}

Hopefully the code should be fairly straightforward:

In the AJAX callback (after we have retrieved the XML of the flights), we load in the XSLT stylesheet from the server.
We do this synchronously (i.e. the browser waits while loading the XSLT from the server).
With a synchronous request, we do not need to specify a callback, as the browser waits for the response to come back from the server.
The response from the synchronous request can be found in the variable request.transport
request.transport.responseXML represents the XSLT document as a hierarchy of DOM objects
We then create an XSLTProcessor object and load the XSLT document into it, before transforming the XML returned from the server into an HTML fragment, represented by a hierarchy of DOM objects.
Finally this is appended to the output <div> using the DOM appendChild() method; note that we have to ensure the div is clear of other content first (hence the result.innerHTML = ""; line).

Structure of the XSLT

Because we are generating a fragment of HTML, rather than a complete HTML page, we need to do things a bit differently in the XSLT. Here is the XSLT file we are using:

<?xml version="1.0"?>

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

<xsl:output method="html" />

<xsl:template match="/flights">

<!-- Display all flights which aren't full -->
<xsl:for-each select="flight[seats&gt0]">

<p>
<strong>Number:</strong><xsl:value-of select="number" /> 
<br/>
<strong>Destination:</strong>
<xsl:value-of select="destination"/> <br/>
<strong>Time:</strong><xsl:value-of select="time" /> 
<br/>
</p>

</xsl:for-each>

</xsl:template>

</xsl:stylesheet>

We are not generating a complete XHTML document with this XSLT; instead we are creating a fragment of an HTML page. Because of this:

We no longer open the HTML document, i.e. no <html> needed;
Because the output from the XSLT is not a complete valid XHTML file, but a fragment of an HTML page, we need to add the line:
```
<xsl:output method="html">
```
This is telling the XSLT processor that the output will be merely HTML, rather than a complete, valid XHTML document.

Loading the XSLT asynchronously

The method above is perhaps not 100% ideal as the XSLT is loaded synchronously - i.e. the browser waits while the XSLT is retrieved. This is fine for small XSLT stylesheets but might be a problem for a large one. This example illustrates loading the XSLT asynchronously - i.e. the user can continue to interact with the browser while the XSLT is being retrieved.

Conditionally applying XSLT stylesheets from server side scripts

One useful thing we can do with XSL stylesheets is to conditionally apply them in a server-side script which normally produces pure XML data (i.e. a web service)
If a query string parameter is passed in, we apply the XSL stylesheet to the generated XML and generate an HTML page; if not, we simply generate the XML
This allows us to produce an ordinary website and a web service at the same time, reducing maintenance effort

e.g.:

<?php

$a = $_GET['html'];
if ($a=='yes')
{
    echo "<?xml version='1.0'?>"
    echo "<?xml-stylesheet type='text/xsl' href='toHTML.xsl' ?>"
}

// Code to generate XML from the database follows....

?>

Notice how the XSL stylesheet is only applied if the query string parameter html is equal to yes
So, calling this script as follows:
```
example.php?html=yes
```
will generate an HTML page by applying the XSL stylesheet toHTML.xsl to the XML data, while
```
example.php
```
will simply generate the pure XML data, allowing the script to be used as a web service

For log book

Try to find articles which discuss XSLT variables, and also XPath syntax (remember XPath is the notation used to extract tags from the input data e.g. /flights/flight/number) beyond what we covered in class.
Try to find articles which consider the advantages and disadvantages of XSLT versus other XML parsing technlogies such as DOM and SAX. Which do you find best, and why?

Exercises

Standard exercise

Make a copy of your AJAX code from week 3 (the AJAX front end which communicated with your web service) and save it in a week 11 folder. Also make a copy of your first XSLT stylesheet from last week (the one which looped through each song in the input XML and converted it to HTML) in the week 11 folder.
Change your AJAX code so that it applies the XSLT stylesheet to the XML returned from the server and places the resulting HTML in a <div>, as in the example above.
Modify your XSLT stylesheet so that it doesn't try to write out an entire XHTML document, but instead, an HTML fragment containing only the HTML for the songs, as in the example above.
Upload all the files to Edward and test it out.

Advanced exercise - AJAX, XSLT and SVG

You can combine AJAX, XSLT and SVG to produce an AJAX application which will fetch raw XML data from a server, transform it to SVG using an XSL stylesheet and then insert the SVG into a <div> on a web page. This exercise allows you to do this.

This will not work on Internet Explorer. However it does work on latest versions of Firefox, Opera and Safari.

If you want to read up more on SVG, look here
Make sure you've done the advanced exercise from last week (writing an XSLT stylesheet to transform pure XML data to SVG)
Upload the XSLT stylesheet and XML data to Edward.
Write a test AJAX application which fetches the XML data from the server, fetches the XSLT and applies it to the XML, and places the resulting SVG inside a <div> on the HTML page.