XSLT | Inside JavaScript

Extensible Style Language Extensions Transformations provide you with a way to transform XML documents into other formats, including (but not limited to) HTML, XHTML (W3C's XML-based version of HTML, which you can find all about at www.w3.org/TR/xhtml1), plain text, RTF ( Rich Text Format , which word processors such as Microsoft Word can use), or even reformatted XML.

The internal workings of XSLT are beyond the scope of this book, but we can still take a look at an example. In this example, I'll transform an XML document's data into HTML form, displaying it in an HTML table. Here's the HTML document that does this in the Internet Explorer. Note that I load the XML document and XSL style sheet , and then use the transformNode method to transform the XML to HTML:

(Listing 22-11.html on the web site)

 <HTML>      <HEAD>          <TITLE>Working With XSLT</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function xslt()              {                  var XMLdocument1 = new ActiveXObject("Microsoft.XMLDOM")                  var XSLdocument1 = new ActiveXObject("Microsoft.XMLDOM")                  var div1 = document.all['div1']                  XMLdocument1.load('22-12.xml')                  XSLdocument1.load('22-13.xsl')                  div1.innerHTML = XMLdocument1.transformNode(XSLdocument1)              }              //-->          </SCRIPT>      </HEAD>      <BODY ONLOAD="xslt()">          <DIV ID="div1">          </DIV>      </BODY>  </HTML>

Here's the XML document that holds the data. In this case, this document just holds data for a few planetshow far from the sun they are, their radius, and so on:

(Listing 22-12.xml on the web site)

 <?xml version="1.0"?>  <PLANETS>      <PLANET>          <NAME>Mercury</NAME>          <MASS UNITS="(Earth = 1)">.0553</MASS>          <DAY UNITS="days">58.65</DAY>          <RADIUS UNITS="miles">1516</RADIUS>          <DENSITY UNITS="(Earth = 1)">.983</DENSITY>          <DISTANCE UNITS="million miles">43.4</DISTANCE><!--At perihelion-->      </PLANET>       <PLANET>          <NAME>Venus</NAME>          <MASS UNITS="(Earth = 1)">.815</MASS>          <DAY UNITS="days">116.75</DAY>          <RADIUS UNITS="miles">3716</RADIUS>          <DENSITY UNITS="(Earth = 1)">.943</DENSITY>          <DISTANCE UNITS="million miles">66.8</DISTANCE><!--At perihelion-->      </PLANET>      <PLANET>          <NAME>Earth</NAME>          <MASS UNITS="(Earth = 1)">1</MASS>          <DAY UNITS="days">1</DAY>          <RADIUS UNITS="miles">2107</RADIUS>          <DENSITY UNITS="(Earth = 1)">1</DENSITY>          <DISTANCE UNITS="million miles">128.4</DISTANCE><!--At perihelion-->      </PLANET>  </PLANETS>

And here's the XSLT style sheet that the Internet Explorer uses to do the XML-to-HTML transformation. XSLT style sheets work by setting up style sheet rules named templates, which match various XML elements, enable you to access their data, and reformat that data:

(Listing 22-13.xsl on the web site)

 <?xml version="1.0"?>  <xsl:stylesheet version="1.1"  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">      <xsl:template match="/PLANETS">          <HTML>              <HEAD>                  <TITLE>                      Working With XSLT                  </TITLE>              </HEAD>          <BODY>              <H1>                  Working With XSLT              </H1>              <TABLE BORDER="2">                  <TR>                      <TD>Name</TD>                      <TD>Mass</TD>                      <TD>Radius</TD>                      <TD>Day</TD>                  </TR>                  <xsl:apply-templates/>              </TABLE>          </BODY>      </HTML>      </xsl:template>      <xsl:template match="PLANET">         <TR>            <TD><xsl:value-of select="NAME"/></TD>            <TD><xsl:apply-templates select="MASS"/></TD>            <TD><xsl:apply-templates select="RADIUS"/></TD>            <TD><xsl:apply-templates select="DAY"/></TD>         </TR>     </xsl:template>      <xsl:template match="MASS">          <xsl:value-of select="."/>          <xsl:text> </xsl:text>          <xsl:value-of select="@UNITS"/>      </xsl:template>      <xsl:template match="RADIUS">          <xsl:value-of select="."/>          <xsl:text> </xsl:text>          <xsl:value-of select="@UNITS"/>      </xsl:template>      <xsl:template match="DAY">          <xsl:value-of select="."/>          <xsl:text> </xsl:text>          <xsl:value-of select="@UNITS"/>      </xsl:template>  </xsl:stylesheet>

And that's it! You can see the results in Figure 22.7. Now we're using XSLT with JavaScript to reformat XML as HTML.

Figure 22.7. Transforming an XML document to HTML in the Internet Explorer.

graphics/22fig07.gif

Tip

If this example doesn't work, you may need to install a more recent version of the Microsoft XML parser. The MS XML parser version 3.0 has full support for XSLT, and you can download it from http://msdn.microsoft.com/downloads/default.asp?URL=/code/sample.asp?url=/msdn-files/027/001/469/msdncompositedoc.xml. Then replace the lines var XMLdocument1 = new ActiveXObject("Microsoft.XMLDOM") and var XSLdocument1 = new ActiveXObject("Microsoft.XMLDOM") in Listing 22-11.html with var XMLdocument1 = new ActiveXObject("MSXML2.DOMDocument.3.0") and var XSLdocument1 = new ActiveXObject("MSXML2.DOMDocument.3.0") .

That completes our look at XML and XSLT with JavaScript in this chapter. As you can tell, we've just scratched the surface here. For more information on Microsoft's coverage of these topics, take a look at http://msdn.microsoft.com and search for "XML" and "XSLT," or take a look at books like Inside XML and Inside XSLT . In the next chapter, we'll take a look at working with cookies and creating your own objects in JavaScript.