XSL concise tutorial (3) implementation on the client

Source: Internet
Author: User
Tags xsl file

Original: Jan Egil Refsnes

Iii. XSL-implementation on the client

1. JavaScript Solution

In the previous section, we have explained how XSL converts XML into HTML files. The method is to add an XSL style table information to the header of the XML document, and then let the browser execute the conversion process.

This method works well in most cases, but it cannot be correctly displayed in browsers that do not support XML.

A better and more comprehensive solution is to use Javascript to convert XML to HTML. However, the following functions must be supported when using JavaScript:

A. Allow Javascript to detect details in place of the browser;

B. Use different style sheets according to different needs and different browsers.

This is completely feasible for XSL. One of the goals of designing XSL is to allow conversion of one format to another, supporting different browsers and different user needs. An important task for browsers in the future is to execute the XSL conversion work on the client.

2. A specific instance

The following is part of the code in the above-mentioned XML document (cd_catalog.xml) Example:

<? 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>

.

.

.

The complete XSL file (cd_catalog.xsl) is as follows ):

<? 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>

Note that the XML file has not been added to the XSL style sheet and has not been converted into an HTML file.

The following is the HTML code that implements the final conversion using JavaSript:

<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 above Code uses Javascript. If you do not know how to write JavaScript, you 'd better study it.

The first code creates an object parsed by Microsoft Parser (XMLDOM) and reads the XML document into the memory. The second Code creates another object and imports the XSL document; the last line of code converts the XML document into an XSL document and outputs the result to an HTML file.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.