XSLT 2.0 and XPath 2.0 Programmer's Reference, 4th Edition (786 page)

The document identified by the stylesheet property must be a free-threaded document object.

Putting it Together

The example in this section shows one way of controlling a transformation using MSXML from within JavaScript on an HTML page.

Example: Using Client-Side JScript to Transform a Document

This example demonstrates the way that you can load, parse, and transform an XML document using client-side JScript in Internet Explorer. You can run this simply by loading the page
default.html
using the IE browser (version 5 or higher). When you first load it, you may see a security warning, depending on your browser security settings. If this happens, right-click on the message and select “Allow blocked content”.

The example shows an HTML page with two buttons on it. The user can click on either of the buttons to select how the data should be displayed. The effect of clicking either button is to apply the corresponding stylesheet to the source XML document.

XML Source

The XML source file for this example is
tables
_
data.xml
. It defines several tables (real tables, the kind you sit at to have your dinner), each looking like this:

   Conference

   4

   Ash

   Oblong

   1485

…

Stylesheet

There are two stylesheet files,
tables
_
list.xsl
and
tables
_
catalog.xsl
. Since this example is designed to show the JScript used to control the transformation rather than the XSLT transformation code itself, I won't list them here.

HTML page

The page
default.htm
contains some simple styling information for the HTML page, then the JScript code that loads the XML and XSL documents, checks for errors, and performs the transformation. Notice that the
transformFiles
function takes the name of a stylesheet as a parameter, which allows you to specify the stylesheet you want to use at runtime:

       body {font-family:Tahoma,Verdana,Arial,sans-serif;

              font-size:14px}

       head {font-family:Tahoma,Verdana,Arial,sans-serif;

              font-size:18px; font-weight:bold}

function transformFiles(strStylesheetName) {

   // get a reference to the results DIV element

   var objResults = document.all[‘divResults’];

   // create two new document instances

   var objXML = new ActiveXObject(‘MSXML2.DOMDocument.3.0’);

   var objXSL = new ActiveXObject(‘MSXML2.DOMDocument.3.0’);

   // set the parser properties

   objXML.validateOnParse = true;

   objXSL.validateOnParse = true;

   // load the XML document and check for errors

   objXML.load(‘tables_data.xml’);

   if (objXML.parseError.errorCode != 0) {

      // error found so show error message and stop

      objResults.innerHTML = showError(objXML)

      return false;

   }

   // load the XSL stylesheet and check for errors

    objXSL.load(strStylesheetName);

    if (objXSL.parseError.errorCode != 0) {

       // error found so show error message and stop

      objResults.innerHTML = showError(objXSL)

      return false;

   }

    // all must be OK, so perform transformation

    strResult = objXML.transformNode(objXSL);

    // and display the results in the DIV element

    objResults.innerHTML = strResult;

    return true;

}

Provided that there are no errors, the function performs the transformation using the XML file
tables
_
data.xml
and the stylesheet whose name is specified as the
strStylesheet Name
parameter when the function is called.

The result of the transformation is inserted into the

element that has the
id
attribute value
divResults
. You'll later see where this is defined in the HTML.

If either of the
load
calls fails, perhaps due to a badly formed document, a function named
showError
is called. This function takes a reference to the document where the error was found, and returns a string describing the nature of the error. This error message is then displayed on the page instead of the result of the transformation:

function showError(objDocument)

   // create the error message

   var strError = new String;

   strError = ‘Invalid XML file !’

         + ‘File URL: ’ + objDocument.parseError.url + ‘’

         + ‘Line No.: ’ + objDocument.parseError.line + ‘’

         + ‘Character: ’ + objDocument.parseError.linepos + ‘’

         + ‘File Position: ’ + objDocument.parseError.filepos + ‘’

         + ‘Source Text: ’ + objDocument.parseError.srcText + ‘’

         + ‘Error Code: ’ + objDocument.parseError.errorCode + ‘’

         + ‘Description: ’ + objDocument.parseError.reason

   return strError;

}

//-->

The remainder of the file is the HTML that creates the visible part of the page. The opening

element specifies an
onload
attribute that causes the
transformFiles()
function in our script section to run once the page has finished loading:

…

Transforming an XML Document using

      the client-side code

…

Because it uses the value
tables_list.xsl
for the parameter to the function, this stylesheet is used for the initial display. This shows the data in tabular form.

The next thing in the page is the code that creates the two HTML

elements, marked
Catalog
and
Simple List
. The
onclick
attributes of each one simply execute the
transformFiles()
function again, each time specifying the appropriate stylesheet name:

…

View the tables as a   

   (‘tables_catalog.xsl’)”>Catalog

  or as a  

Simple List

Finally, at the end of the code, you can see the definition of the

element into which the function inserts the results of the transformation.

Output

When the page is first displayed, it looks like
Figure D-1
.

Figure D-1

Click the
Catalog
button, and you will see an alternative graphical presentation of the same data, achieved by applying the other stylesheet.

Restrictions

Microsoft claims full compliance with XSLT 1.0 and XPath 1.0, although there are one or two gray areas where its interpretation of the specification may cause stylesheets to be less than 100% portable. These include:

• Handling of whitespace nodes. The normal way of supplying input to Microsoft's XSLT processor is in the form of a DOM, and the default option in MSXML3 for building a DOM is to remove whitespace text nodes as the text is parsed. The result is that
  
  in the stylesheet has no effect, because by the time the XSLT processor gets to see the data, there are no whitespace text nodes left to preserve. If you want conformant behavior in this area, set the
  preserveWhitespace
  property of the
  DOMDocument
  object to
  True
  , before loading the document. The same applies to the stylesheet; if you want to use
  
  to control output of whitespace, particularly when generating output in a space-sensitive format such as comma-separated values, then load the stylesheet with
  preserveWhitespace
  set to
  True
  . It's not possible to preserve whitespace, unfortunately, when stylesheets are loaded into the browser using the
  
  processing instruction.
  
• Normalization of text nodes. XSLT and XPath specify that adjacent text nodes in the tree are always merged into a single node. MSXML uses a DOM as its internal data structure, and the DOM does not impose the same rule. Although MSXML does a good job at creating a correct XPath view of the underlying DOM tree, this is one area where the mapping is incomplete. The two common cases where adjacent text nodes are not merged are firstly, when one of the text nodes represents the contents of a
  CDATA
  section in the source XML, and secondly, when one of them represents the expanded text of an entity reference (other than the built-in entity references such as
  <
  ). This makes it dangerous to use a construct such as
  
  because MSXML will return only the first of the text nodes, that is, the text up to the start of an entity or
  CDATA
  boundary. It's safer to output the value of an element by writing
  
  .
  
• The
  
  instruction has no effect when running a transformation in the browser, unless you specify
  terminate=“yes”
  .