AJAX In Action [235]
var xmlDoc;
b Declare global
var xslDoc;
variables
var objOutput;
function LoadXMLXSLTDoc(urlXML,urlXSL,elementID){
xmlDoc=null;
c Set variables
xslDoc=null;
to null
objOutput = document.getElementById(
d Reference
output element
elementId);
new net.ContentLoader(urlXML,onXMLLoad);
e Load XML and
new net.ContentLoader(urlXSL,onXSLLoad);
XSL files
}
function onXMLLoad(){
f Handle XML
xmlDoc=this.req.responseXML;
document
doXSLT();
}
function onXSLLoad(){
g Handle XSL
xslDoc=this.req.responseXML;
document
doXSLT();
}
function doXSLT(){
if (xmlDoc==null || xslDoc==null){ return; } h
Check for loaded documents
if (window.ActiveXObject){
objOutput.innerHTML=xmlDoc.transformNode(xslDoc);
}
else{
var xsltProcessor = new XSLTProcessor();
i Transform
xsltProcessor.importStylesheet(xslDoc);
XML
var fragment =xsltProcessor.
document
transformToFragment(
xmlDoc,document);
objOutput.innerHTML = "";
objOutput.appendChild(fragment);
}
}
Licensed to jonathan zheng Combining the XSLT and XML documents 483 To simplify the client-side script, we need to declare three global variables b to hold three different objects. The first two variables, xmlDoc and xslDoc, are going to hold the XML and XSLT files returned from the server. The third variable, objOutput, holds the object reference to our DOM element where the results are to be inserted. With these variables defined, we can now build the function LoadXMLXSLTDoc(), which we invoked from the function GrabNumber(). Since we are loading two documents, we need a way to determine when they are both loaded. We do this by looking to see if the variables xmlDoc and xslDoc contain their respective documents. Before we start, we must set the variables to null c. This removes any data that may exist in the variables if this function is run more than once on the page. The output location for the results is set d by using the passed element ID from the function call. Now we call the ContentLoader e twice, once for the XML document and once for the XSL document. In each call, the ContentLoader will get the URL and then call another function to load the documents. onXMLLoad() f loads the returned XML results into our global variable xmlDoc and then calls the function doXSLT() for future processing. onXSLLoad() g loads the XSL document into the global variable xslDoc and also calls the doXSLT() function. Processing cannot continue until both documents have been loaded, and there is no way of knowing which will be loaded first, so the doXSLT() function first checks for that. It is called twice, once after the XML document is loaded and once after the XSL document is loaded. The first time it is called, one of our global variables is still set to null and we exit the function h. The next time it is called, the function will not exit since neither of the variables will be null. With both documents now loaded, we are able to perform the XSLT transformation i. Once the two documents are loaded, we need to transform the XML document with the XSLT. As you can see by looking at the code in the listing, there are two different ways to do this, depending on the browser. Internet Explorer uses transformNode(), whereas Mozilla uses the XSLTProcessor object. Let’s examine these two different implementations of performing the transformation in greater detail. 12.4.1 Working with Microsoft Internet Explorer Internet Explorer makes it easy to transform the XML document with the XSLT with only a few lines of code. We use the transformNode() method, which takes the XML and XSLT documents and combines them in one step: Licensed to jonathan zheng 484 CHAPTER 12 Live search using XSLT if (window.ActiveXObject){ objOutput.innerHTML=xmlDoc.transformNode(xslDoc);