XSLT and JavaScript in the Internet Explorer

Whether you like Microsoft or not, theres no denying that it is putting more and more XSLT power into the Internet Explorer (for more information, see http://msdn.microsoft.com/xml/general/xmlparser.asp), and so it bears examination here. I introduced an example creating XSLT transformations in the Internet Explorer using JavaScript in Chapter 1, and I take a closer look at it here. As you recall from Chapter 2, IE 5.5 or earlier can handle true XSLT transformations if you do them in JavaScript (and the new IE 6.0, just out, can handle straight XSLT syntax just by browsing to XML documents).

In this case, I use the MSXML processor and JavaScript to transform planets.xml using planets.xsl. To store these two documents, I create two new objects, XMLDocument and XSLDocument , using the ActiveXObject class and the DOMDocument class of the MSXML processor in a function named xslt . (This function runs as soon as the page loads because I set the <BODY> elements onload attribute to xslt().) I also create an object corresponding to the <DIV> element that displays the results of the transformation, as follows :

 <HTML>      <HEAD>          <TITLE>XSLT Using JavaScript</TITLE>          <SCRIPT LANGUAGE="JavaScript">          function xslt()          {             var XMLDocument = new ActiveXObject('MSXML2.DOMDocument.3.0');              var XSLDocument = new ActiveXObject('MSXML2.DOMDocument.3.0');              var HTMLtarget = document.all['targetDIV'];          .          .          .

Both planets.xml and planets.xsl are XML documents, and the MSXML processor can act as a validating XML parser if you set the validateOnParse property to true . To load planets.xml and planets.xsl into the XMLDocument and XSLDocument objects, you use the load method. I also check for errors by examining the parsing error code this way:

 <HTML>      <HEAD>          <TITLE>XSLT Using JavaScript</TITLE>          <SCRIPT LANGUAGE="JavaScript">          function xslt()          {             var XMLDocument = new ActiveXObject('MSXML2.DOMDocument.3.0');              var XSLDocument = new ActiveXObject('MSXML2.DOMDocument.3.0');              var HTMLtarget = document.all['targetDIV'];              XMLDocument.validateOnParse = true;              XMLDocument.load('planets.xml');              if (XMLDocument.parseError.errorCode != 0) {                 HTMLtarget.innerHTML = "Error!"                  return false;              }              XSLDocument.validateOnParse = true;              XSLDocument.load('planets.xsl');              if (XSLDocument.parseError.errorCode != 0) {                 HTMLtarget.innerHTML = "Error!"                  return false;              }          .          .          .

Now that both planets.xml and planets.xsl have been loaded, you can use the XMLDocument objects transformNode method to perform the transformation. Look at how I use XSLDocument to transform XMLDocument , and display the result in the target <DIV> element:

 <HTML>      <HEAD>          <TITLE>XSLT Using JavaScript</TITLE>          <SCRIPT LANGUAGE="JavaScript">          function xslt()          {             var XMLDocument = new ActiveXObject('MSXML2.DOMDocument.3.0');              var XSLDocument = new ActiveXObject('MSXML2.DOMDocument.3.0');              var HTMLtarget = document.all['targetDIV'];          .          .          .             HTMLtarget.innerHTML = XMLDocument.transformNode(XSLDocument);             return true;         }          </SCRIPT>      </HEAD>      <BODY onload="xslt()">          <DIV ID="targetDIV">          </DIV>      </BODY>  </HTML>

You can see the results in Figure 10.1.

Figure 10.1. Using JavaScript to transform a document.