xlst 应用系列二(转载)
2009-03-02 11:50
288 查看
7.3.1 XSLT应用示例
在前面几章的例子中,服务器端返回的数据集通常是DataSet类型的,在客户端通过“for”循环遍历所有结果,然后输出到页面上。这样的实现方法比较普遍,开发人员可能会在不同的应用中编写这样雷同的代码,十分枯燥,在规模较大的项目中,这样的代码就显得冗长而结构不清晰。在Garrett所定义的关于Ajax的7项技术中,XSLT常常被很多人忽略,但是实际上它的功能非常强大,可以帮助我们实现类似“模板”的机制,在XSLT样式表中可以定义页面的布局、显示样式等,而在XML中提供数据,从而实现显示和数据的完全分离。
考虑到XSLT技术对相当一部分读者来说还比较陌生,这里通过一些简短的示例来说明XSLT的使用方法,相信会对读者理解后面的代码有所帮助。XSLT样式表可以将XML格式的数据转换为其他任何格式的内容,可以是XML,也可以是HTML,甚至高级语言(Java、C#)的代码。以XML+XSLTHTML为例,XML文件a.xml的内容如例7-6所示。
【例7-6】a.xml
例7-6中描述的是一组文章的信息,现在我们希望将它转换成为HTML页面,并且用表格的形式呈现出来。因此,编写如例7-7所示的XSLT样式表。
【例7-7】a.xslt
请读者注意粗体的部分,它们的共同点是都以“<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】转换结果
也可以在a.xml的第2行增加一句XSLT样式表声明,如下:
这样就可以在IE浏览器中查看到效果了,如图7-4所示。
通过上面的示例,读者可以对XSLT有一个大致的了解,下面来介绍如何在客户端JavaScript中实现XSLT转换。对于IE浏览器来说,通过XMLDOM组件可以比较容易地实现XSLT转换。示例代码如下:
对于其他不支持ActiveX控件的浏览器来说,就需要借助于第三方的脚本库了,这里介绍来自Google公司的google ajaxslt,它是基于JavaScript实现的,适用于任何浏览器,并且还有比较实用的日志和调试功能。例7-9所示的就是应用google ajaxslt实现XSLT转换的例子。
【例7-9】b.html
例7-9运行的效果如图7-5所示,注意当logging__为true时,页面执行的同时会显示一个文本区域,其中记录了XML源文件、XSLT样式表和转换结果的文本内容。
下面将XSLT技术应用到论坛主题搜索功能的实现过程中。
在前面几章的例子中,服务器端返回的数据集通常是DataSet类型的,在客户端通过“for”循环遍历所有结果,然后输出到页面上。这样的实现方法比较普遍,开发人员可能会在不同的应用中编写这样雷同的代码,十分枯燥,在规模较大的项目中,这样的代码就显得冗长而结构不清晰。在Garrett所定义的关于Ajax的7项技术中,XSLT常常被很多人忽略,但是实际上它的功能非常强大,可以帮助我们实现类似“模板”的机制,在XSLT样式表中可以定义页面的布局、显示样式等,而在XML中提供数据,从而实现显示和数据的完全分离。
考虑到XSLT技术对相当一部分读者来说还比较陌生,这里通过一些简短的示例来说明XSLT的使用方法,相信会对读者理解后面的代码有所帮助。XSLT样式表可以将XML格式的数据转换为其他任何格式的内容,可以是XML,也可以是HTML,甚至高级语言(Java、C#)的代码。以XML+XSLTHTML为例,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[hello klfkdlskdf dkfldksdfsd]]></content> </article> <article> <author>author1</author> <title>title1</title> <date>2005-2-25</date> <content><![CDATA[hello klfkdlskdf dkfldksdfsd]]></content> </article> <article> <author>author1</author> <title>title1</title> <date>2005-2-25</date> <content><![CDATA[hello klfkdlskdf dkfldksdfsd]]></content> </article> <article> <author>author1</author> <title>title1</title> <date>2005-2-25</date> <content><![CDATA[hello klfkdlskdf dkfldksdfsd]]></content> </article> <article> <author>author1</author> <title>title1</title> <date>2005-2-25</date> <content><![CDATA[hello klfkdlskdf dkfldksdfsd]]></content> </article> </articles> |
【例7-7】a.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> |
【例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 |
<?xml-stylesheet type="text/xsl" href="a.xslt"?> |
图7-4 XSLT转换后的XML |
<script language="javascript"> // Load XML var xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.load("a.xml"); // Load the XSL var xsl = new ActiveXObject("Microsoft.XMLDOM"); xsl.async = false; xsl.load("a.xslt"); // Transform document.write(xml.transformNode(xsl)); </script> |
【例7-9】b.html
<!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.xslt function 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文件的内容,基于xmlhttp function 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; } } @else xmlhttp = 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-5 基于google ajaxslt的XSLT转换 |
相关文章推荐
- [转载]AAF灵便应用框架简介系列(3):对象模型
- [转载]AAF灵便应用框架简介系列(4):对象的持久化
- 数学之美 系列十三 信息指纹及其应用(转载)
- [转载]AAF灵便应用框架简介系列(5):对象的持久化(高级)
- xslt 应用系列三(转载)
- 转载:Android多媒体应用开发系列(一) 拍照
- SQL Server 2008中SQL应用系列及BI学习笔记系列--目录索引 [转载]
- iOS开发系列--让你的应用“动”起来【转载】
- [转载]AAF灵便应用框架简介系列(6):休息一下,泛谈面向对象 Why OO+多层结构?
- 艾伟_转载:VS 2010 和 .NET 4.0 系列之《自动启动ASP.NET应用》篇
- 数学之美 系列七 -- 信息论在信息处理中的应用(转载)
- [转载]AAF灵便应用框架简介系列(7):休息一下,泛谈OOAD(面向对象分析设计)
- 在C#代码中应用Log4Net系列教程(附源代码)【转载】
- 转载: Android多媒体应用开发系列(二) 项目重构以及连拍和定时自动拍照的实现
- [转载]AAF灵便应用框架介绍系列(1):前言
- [转载]AAF灵便应用框架简介系列(8):缓存机制介绍
- (转载)ETL利器Kettle实战应用解析系列一【Kettle使用介绍】
- 数学之美 系列三 -- 隐含马尔可夫模型在语言处理中的应用(转载) 发表者:吴军,Google 研究员
- [转载]AAF灵便应用框架简介系列(2):AAF应用的启动和初始化
- 【转载】CANoe 入门 Step by step系列(一)基础应用