XSL简明教程(3)在客户端的

原著:Jan Egil Refsnes 翻译:阿捷

三. XSL--在客户端的实现

1.JavaScript解决方案

在上面的章节中我们已经解释了XSL是如何将XML转换成HTML文件。方法就是在XML文档的头部加入一个XSL样式表信息,然后让浏览器执行转换过程。

这种方法在大部分情况下都做得很好,但是在不支持XML的浏览器中就无法正确显示了。

一个更好的更全面的解决方案是使用Javascript来实现XML到HTML的转换。但是使用JavaScript必须得到以下功能支持:

a.允许Javascript代替浏览器进行细节检测;

b.根据不同的需要和不同的浏览器使用不同的样式表。

对于XSL来说这是完全可行的。设计XSL的目标之一就是允许将一种格式转换成另一种格式,支持不同的浏览器,支持不同的用户需求。未来的浏览器的重要任务就是在客户端执行XSL的转换工作。

2.一个具体的实例

下面是我们上面提到的一个XML文档(cd_catalog.xml)例子的部分代码:

 1<catalog>
 2<cd>
 3<title>Empire Burlesque</title>
 4<artist>Bob Dylan</artist>
 5<country>USA</country>
 6<company>Columbia</company>
 7<price>10.90</price>
 8<year>1985</year>
 9</cd>   
10  
11.   
12  
13.   
14  
15.   
16  
17下面是完整的XSL文件(cd_catalog.xsl): 
18
19  
20
21
22<?xml version=\'1.0\'?>
23<xsl:stylesheet xmlns:xsl='\"http://www.w3.org/TR/WD-xsl\"'>
24<xsl:template match='\"/\"'>
25<html>
26<body>
27<table bgcolor='\"yellow\"' border='\"2\"'>
28<tr>
29<th>Title</th>
30<th>Artist</th>
31</tr>
32<xsl:for-each select='\"CATALOG/CD\"'>
33<tr>
34<td><xsl:value-of select='\"TITLE\"/'></xsl:value-of></td>
35<td><xsl:value-of select='\"ARTIST\"/'></xsl:value-of></td>
36</tr>
37</xsl:for-each>
38</table>
39</body>
40</html>
41</xsl:template>
42</xsl:stylesheet>
43
44  
45
46
47注意,现在XML文件还没有加入XSL样式表,还没有被转换成HTML文件。   
48  
49下面是用JavaSript来实现最后转换的HTML代码: 
50
51  
52
53
54<html>
55<body>
56<script language='\"javascript\"'>   
57  
58// Load XML   
59  
60var xml = new ActiveXObject(\"Microsoft.XMLDOM\")   
61  
62xml.async = false   
63  
64xml.load(\"cd_catalog.xml\") 
65
66  
67
68
69// Load the XSL   
70  
71var xsl = new ActiveXObject(\"Microsoft.XMLDOM\")   
72  
73xsl.async = false   
74  
75xsl.load(\"cd_catalog.xsl\") 
76
77  
78
79
80// Transform   
81  
82document.write(xml.transformNode(xsl))   
83  
84</script>
85</body>
86</html>
87
88  
89
90
91上面代码中使用了Javascript,如果你不知道如何写JavaScript,您最好专门学习一下。   
92  
93第一段代码建立一个Microsoft Parser(XMLDOM)解析的对象,并将XML文档读入内存;第二段代码建立另外一个对象并导入XSL文档;最后一行代码将XML文档用XSL文档转换,并将结果输出到HTML文件中。</catalog>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus