Extensible Markup Language

Home

» XML BASICS HOME » XML Introduction » XML How to Use » XML Syntax » XML Attributes » XML Validation » XML in your Browser » XML Viewing » XML Display

» DTD HOME » DTD Introduction » DTD Elements » DTD Attributes » DTD Entities » DTD Validation » DTD Examples

» DOM HOME » DOM Introduction » DOM Parsing » DOM ParseError » DOM Access

» XSL HOME » XSL Introduction » XSL Transformation » XSL on the Client » XSL on the Server » XSL Sorting » XSL Filtering » XSL If..Then » XSL Choose

XML RSS XHTML XML Examples

» XML Links HOME » W3C Links » Microsoft » Netscape » Interesting Reading » XML Books

XML Forum ASP Information Technology Jobs

Search XML Files:

XML Files Updates

DEVELOPER CHANNEL
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

Be a Commerce Partner

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

XSL - On the Client

by Jan Egil Refsnes

A JavaScript Solution

In the previous chapter I explained how XSL can be used to transform a document from XML to HTML. The trick was to add an XSL stylesheet information to the XML file, and to let the browser do the transformation.

Even if this works fine, it is not always desirable to include a stylesheet reference in the XML file, and the solution will not work in a non XML aware browser.

A much more versatile solution would be to use a JavaScript to do the XML to HTML transformation.

By using a JavaScript we are more open for these possibilities:

Allowing the JavaScript to do browser specific testing
Using different style sheets according to browser and/or user needs

That's the beauty of XSL. One of the design goals for XSL was to make it possible to transform data from one format to another, supporting different browsers and different user needs.

XSL transformation on the client side is bound to be a major part of the browsers work tasks in the future, as we will se a growth in the specialized browser marked (think: Braille, Speaking Web, Web Printers, Handheld PCs, Mobile Phones .....).

The XML file and the XSL file

Take a new look at the XML document that you saw in the previous chapter (or open it with IE5):

<?xml version="1.0" encoding="ISO8859-1" ?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
.
.
.

And at the companying XSL stylesheet (or open it with IE5):

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
  <html>
  <body>
    <table border="2" bgcolor="yellow">
      <tr>
        <th>Title</th>
        <th>Artist</th>
      </tr>
      <xsl:for-each select="CATALOG/CD">
      <tr>
        <td><xsl:value-of select="TITLE"/></td>
        <td><xsl:value-of select="ARTIST"/></td>
      </tr>
      </xsl:for-each>
    </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

The syntax of the above XSL document was explained in the previous chapter, so it will not be explained here. But be sure to notice that the XML file does not have a reference to the XSL file, and the XSL file does not have a reference to the XML file.

IMPORTANT: The above sentence indicates that an XML file could be transformed using many different XSL files.

Transforming XML to HTML on the client

Here is the simple source code needed transform the XML file to HTML on the client (try it yourself):

<html>
<body>
<script language="javascript">
// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cd_catalog.xml")

// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cd_catalog.xsl")

// Transform
document.write(xml.transformNode(xsl))
</script>

</body>
</html>

(The example above uses JavaScript. If you don't know to write JavaScript, you should take a trip to JavaScript School.)

The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the XML document into memory. The second block of code creates another instance of the parser and loads the XSL document into memory. The last line of code transforms the XML document using the XSL document, and writes the result to the HTML document.

Nice and simple.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

DevX XML Content

- W3C Has a New XML Standard: XProc
- Create a Map Client with Web Services, Part II
- Why Data as a Service Will Reshape EAI
- Transitioning from XSLT 1.0 to 2.0, Part 2
- Transition from XSLT 1.0 to XSLT 2.0, Part 1

Jump to : Top Of Page or HOME

XSL - On the Client

A JavaScript Solution

The XML file and the XSL file

Transforming XML to HTML on the client

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos