Getting Started with Ajax
June 23, 2005
Performing Transformation in Javascript
Tranforming the response XML requires an XML stylesheet (XSL) and an XSLT processor.
The following Javascript in pages/part3.html
immediately requests the XSL from the server when the page is loaded.
The first few lines initialize variables needed to properly transform the XML data.
In this section's example,
Similar to the response handlers in Parts 1 and 2, this function performs necessary checks
to ensure the
Lines 25-34 and 35-40 are two blocks of code that serve the same purpose; they process the response XML. The first block (lines 25-34) tries to use the
The code to transform the XML data to XHTML in Internet Explorer (lines 35-40) is slightly different. Internet Explorer's XML DOM has an API call to perform XML transformations on
01 // Immediately try to load the xsl file asynchronously
02 var xsldocloaded = false;
03 var xsldoc;
04
05 if (window.XSLTProcessor)
06 {
07 // support Mozilla/Gecko based browsers
08 xsldoc = document.implementation.createDocument("", "", null);
09 xsldoc.addEventListener("load", onXslLoad, false);
10 xsldoc.load("part3.xsl");
11 }
12 else if(window.ActiveXObject)
13 {
14 // support Windows / ActiveX
15 xsldoc = new ActiveXObject("Microsoft.XMLDOM");
16 xsldoc.ondataavailable = onXslLoad;
17 xsldoc.load("part3.xsl");
18 }
19
20 function onXslLoad()
21 {
22 // flag that the xsl is loaded
23 xsldocloaded = true;
24 }
xsldocloaded is a flag indicating whether or not the XSL file is
completely loaded from the server. This is needed since we request it asynchronously
(lines 10, 17).
Notice that
lines 5-11
are similar to
lines 12-18.
These two blocks of code perform the same task, but are both needed to support various clients.
Lines 8 and 15
initialize the XSL document object (xsldoc).
Lines 9 and 16
register onXslLoad() to be called when the document is completely loaded. This function
(lines 20-24)
simply sets the xsldocloaded flag indicating that the XSL document
is loaded and ready to be used (we will use this flag in the response handler tableResponseHandler()).
Lines 10 and 17
load content from part3.xsl into xsldoc.
In this section's example,
tableResponseHandler() is registered to listen for
ready state changes on the XMLHttpRequest object. As you can see, it is extremely
similar to the response handlers discussed in the previous examples. The main difference between
this response handler and the one used in Part 2 is the process used to transform the XML data.
This section's example utilizes browser support for XSLT to convert the response XML into well
formatted XHTML. Here's the source code for tableResponseHandler().
01 /**
02 * Handler for server's response to table requests.
03 * Table content is pulled from response XML and an HTML
04 * table is built. The table is then inserted into the
05 * 'tableSection' DIV.
06 */
07 function tableResponseHandler()
08 {
09 // Make sure the request is loaded (readyState = 4)
10 if (req.readyState == 4)
11 {
12 // Make sure the status is "OK"
13 if (req.status == 200)
14 {
15 // Make sure the XSL document is loaded
16 if (!xsldocloaded)
17 {
18 alert("Unable to transform data. XSL is not yet loaded.");
19 // break out of the function
20 return;
21 }
22
23 var swappableSection = document.getElementById("tableSection");
24
25 if (window.XSLTProcessor)
26 {
27 // support Mozilla/Gecko based browsers
28 var xsltProcessor = new XSLTProcessor();
29 xsltProcessor.importStylesheet(xsldoc);
30 var outputXHTML = xsltProcessor
31 .transformToFragment(req.responseXML, document);
32 swappableSection.innerHTML = "";
33 swappableSection.appendChild(outputXHTML);
34 }
35 else if(window.ActiveXObject)
36 {
37 // support Windows/ActiveX enabled browsers
38 var outputXHTML = req.responseXML.transformNode(xsldoc);
39 swappableSection.innerHTML = outputXHTML;
40 }
41 }
42 else
43 {
44 alert("There was a problem retrieving the XML data:\n" +
45 req.statusText);
46 }
47 }
48 }
XMLHttpRequest has a proper response and there were no
unexpected errors on the server
(lines 9-14).
Next, tableResponseHandler()
checks the xsldocloaded flag
(lines 15-21)
and alerts the user if the
XSL is not yet loaded. Note that it should be loaded automatically, when the page is
loaded, and the onXslLoad() function should have set the
xsldocloaded flag.
Lines 25-34 and 35-40 are two blocks of code that serve the same purpose; they process the response XML. The first block (lines 25-34) tries to use the
XSLTProcessor
object built into the Mozilla/Gecko browsers to convert the response XML into formatted XHTML.
We create a new XSLTProcessor object
(line 28),
import the loaded XSL document
(line 29),
and perform an XML to XHTML transformation using the loaded XSL document
and the XSLTProcessor
(lines 30-31).
The swappableSection
(DIV) is cleared
(line 32)
and the generated XHTML is inserted
(line 33).
The code to transform the XML data to XHTML in Internet Explorer (lines 35-40) is slightly different. Internet Explorer's XML DOM has an API call to perform XML transformations on
Node objects.
Line 38
gets an XML document from the response and performs the
XML transformation by applying the loaded XSL document (xsldoc). Unlike
the XSLTProcessor's transformToFragment(...) function, Internet
Explorer's transformNode(...) function returns a String instead of a
DocumentFragment.
Line 39
simply sets the swappableSection's
innerHTML property to the results from transformNode(...).
Download Example Source Code
