XSLT learning (IX) by converting xml JavaScript

If your browser supports XSLT, then it can be used to convert documents in the browser as XHTML.

JavaScript Solutions

In the previous chapter, we've sent you explain how to use XSLT to transform an XML document into XHTML. We are accomplished by way of this work: add XSL stylesheet to the XML file, and complete the conversion by the browser.

Even if this approach works well, including the style sheet references are not always satisfactory (for example, the browser does not recognize this approach would not work XSLT) in an XML file.

More general approach is to use JavaScript to complete the conversion.

By using JavaScript, we can:

  • Browser validation tests conducted
  • Depending on the browser and the user needs to use a different stylesheet

This is the XSLT charm! One of XSLT is designed to make converting one format to another format possible, to support different types of browsers and different user needs.

Browser-side XSLT transformation will become one of the next major task performed by the browser, and we will see its growth (Braille, network printers, audio equipment, etc.) in a particular browser market.

XML files and XSL files

Look at this in the previous chapter has shown off an XML document:

<?xml version="1.0" encoding="ISO-8859-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>
.
.
.
</catalog>

View this XML file .

And accompanying XSL style sheet:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <body>
    <h2>My CD Collection</h2> 
    <table border="1">
      <tr bgcolor="#9acd32">
        <th align="left">Title</th> 
        <th align="left">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>

View this XSL file .

Please note, the XML file does not contain a reference to the XSL file.

IMPORTANT: The above sentence means, XML files can use several different XSL stylesheet to convert.

In the browser convert XML to XHTML

This is used to convert the XML file to XHTML source code for the client:

<html>
<body>

<script type="text/javascript">

// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")

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

// Transform
document.write(xml.transformNode(xsl))

</script>

</body>
</html>

Tip: If you do not know how to write JavaScript, please learn our " JavaScript Tutorial ."

First piece of code creates an instance of Microsoft's XML parser, then the XML file into memory. The second paragraph of code creates another instance of the parser, and then the XSL file into memory. The last line of code using XML document XSL document conversion, and the browser displays the result as XHTML. mission completed!

Reprinted: http://www.w3school.com.cn/xsl/xsl_client.asp

Guess you like

Origin www.cnblogs.com/planetwithpig/p/11517174.html