天天看点

xslt 应用系列三(转载)

.3.1  XSLT应用示例 
在前面几章的例子中,服务器端返回的数据集通常是DataSet类型的,在客户端通过“for”循环遍历所有结果,然后输出到页面上。这样的实现方法比较普遍,开发人员可能会在不同的应用中编写这样雷同的代码,十分枯燥,在规模较大的项目中,这样的代码就显得冗长而结构不清
晰。在Garrett所定义的关于Ajax的7项技术中,XSLT常常被很多人忽略,但是实际上它的功能非常强大,可以帮助我们实现类似“模板”的机
制,在XSLT样式表中可以定义页面的布局、显示样式等,而在XML中提供数据,从而实现显示和数据的完全分离。
考虑到XSLT技术对相当一部分读者来说还比较陌生,这里通过一些简短的示例来说明XSLT的使用方法,相信会对读者理解后面的代码有所帮助
。XSLT样式表可以将XML格式的数据转换为其他任何格式的内容,可以是XML,也可以是HTML,甚至高级语言(Java、C#)的代码。以XML+
XSLTHTML为例,XML文件a.xml的内容如例7-6所示。
【例7-6】a.xml<?xml version="1.0" encoding="UTF-8"?><articles><article><author>author1</author><title>title1</title><date>2005-2-
25</date><content><![CDATA[helloklfkdlskdfdkfldksdfsd]]
></content></article><article><author>author1</author><title>title1</title><date>2005-2-25</date><content><![CDATA
[helloklfkdlskdfdkfldksdfsd]]></content></article><article><author>author1</author><title>title1</title><date>2005-2-
25</date><content><![CDATA[helloklfkdlskdfdkfldksdfsd]]
></content></article><article><author>author1</author><title>title1</title><date>2005-2-25</date><content><![CDATA
[helloklfkdlskdfdkfldksdfsd]]></content></article><article><author>author1</author><title>title1</title><date>2005-2-
25</date><content><![CDATA[helloklfkdlskdfdkfldksdfsd]]></content></article></articles> 
例7-6中描述的是一组文章的信息,现在我们希望将它转换成为HTML页面,并且用表格的形式呈现出来。因此,编写如例7-7所示的XSLT样式表
。
<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet version="1.0" 
xmlns:xsl="​​http://www.w3.org/1999/XSL/Transform"><xsl:output​​ method="xml" version="1.0" encoding="UTF-8" 
indent="yes"/><xsl:template match="/"><html><head><title>test</title></head><body><table 
border="1"><tbody><tr><th>author</th><th>title</th><th>date</th></tr><xsl:for-each 
select="/articles/article"><tr><td><xsl:value-of select="author"/></td><td><xsl:value-of 
select="title"/></td><td><xsl:value-of select="date"/></td></tr></xsl:for-
each></tbody></table></body></html></xsl:template></xsl:stylesheet> 
请读者注意粗体的部分,它们的共同点是都以“<xsl:”开头,它是XSLT的命名空间。任何一个XSLT样式表都有<xsl:template match="/">节
点,它表示和XML的根节点相匹配。“<xsl:for-each select="/articles/article">"节点则表示开始一个循环,参与循环的节点是由
“select”对应的XPath(/articles/article)决定的。在例7-6中,它对应于所有的article节点。<xsl:value-of select="author"/>表示
author节点的值,类似的,title和date对应于title和date节点。最后,a.xml通过a.xslt转换的结果如例7-8所示。
例7-8】转换结果<html><head><title>test</title></head><body><table 
border="1"><tbody><tr><th>author</th><th>title</th><th>date</th></tr><tr><td>author1</td><td>title1</td><td>2005-2-
25</td></tr><tr><td>author1</td><td>title1</td><td>2005-2-25</td></tr><tr><td>author1</td><td>title1</td><td>2005-2-
25</td></tr><tr><td>author1</td><td>title1</td><td>2005-2-25</td></tr><tr><td>author1</td><td>title1</td><td>2005-2-
25</td></tr></tbody></table></body></html 
也可以在a.xml的第2行增加一句XSLT样式表声明,如下:
<?xml-stylesheet type="text/xsl" href="a.xslt"?> 
 
这样就可以在IE浏览器中查看到效果了.
通过上面的示例,读者可以对XSLT有一个大致的了解,下面来介绍如何在客户端JavaScript中实现XSLT转换。对于IE浏览器来说,通过XMLDOM
组件可以比较容易地实现XSLT转换。示例代码如下:
<script language="javascript">// Load XML var xml = new ActiveXObject("Microsoft.XMLDOM");xml.async = false;xml.load
("a.xml");// Load the XSLvar xsl = new ActiveXObject("Microsoft.XMLDOM");xsl.async = false;xsl.load("a.xslt");// 
Transformdocument.write(xml.transformNode(xsl));</script> 
对于其他不支持ActiveX控件的浏览器来说,就需要借助于第三方的脚本库了,这里介绍来自Google公司的google ajaxslt,它是基于
JavaScript实现的,适用于任何浏览器,并且还有比较实用的日志和调试功能。例7-9所示的就是应用google ajaxslt实现XSLT转换的例子。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""​​​http://www.w3.org/TR/xhtml1/DTD/xhtml1​​-transitional.dtd"><html><head><title>Simple XSLT test</title><script src="../../misc.js" 
type="text/javascript"></script><script src="../../dom.js" type="text/javascript"></script><script src="../../xpath.js" 
type="text/javascript"></script><script src="../../xslt.js" type="text/javascript"></script></head><body><div 
id="content"></div></body><script type="text/javascript">logging__ = true;xsltdebug = true;// 根据传入的id获取页面中的对象
function el(id){return document.getElementById(id);}// 进行xslt转换:a.xml + a.xsltfunction test_xslt(){var strXml = getXml
("a.xml");var strXsl = getXml("a.xslt");var xml = xmlParse(strXml);var xslt = xmlParse(strXsl);var html = xsltProcess(xml, 
xslt);return html;}//获取xml文件的内容,基于xmlhttpfunction getXml(url){var xmlhttp;/*@cc_on@if (@_jscript_version >= 5)try
{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}catch (e){try{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}catch (E)
{xmlhttp = false;}}@elsexmlhttp = false;@end @*/if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){try{xmlhttp = new 
XMLHttpRequest();}catch (e){xmlhttp = false;}}xmlhttp.open("GET", url);xmlhttp.send(null);return xmlhttp.responseXml.xml;}//
显示转换的结果el("content").innerHTML = test_xslt();</script></html> 
例7-9运行的效果,注意当logging__为true时,页面执行的同时会显示一个文本区域,其中记录了XML源文件、XSLT样式表和转换结果的文本
内容。