JavaScript解决方案
XSL是如何将XML转换成HTML文件。方法就是在XML文档的头部加入一个XSL样式表信息,然后让浏览器执行转换过程。
这种方法在大部分情况下都做得很好,但是在不支持XML的浏览器中就无法正确显示了。
一个更好的更全面的解决方案是使用Javascript来实现XML到HTML的转换。但是使用JavaScript必须得到以下功能支持:
a.允许Javascript代替浏览器进行细节检测;
b.根据不同的需要和不同的浏览器使用不同的样式表。
对于XSL来说这是完全可行的。设计XSL的目标之一就是允许将一种格式转换成另一种格式,支持不同的浏览器,支持不同的用户需求。未来的浏览器的重要任务就是在客户端执行XSL的转换工作。
2.一个具体的实例
下面是我们上面提到的一个XML文档(cd_catalog.xml)例子的部分代码:
<?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>
.
.
.
下面是完整的XSL文件(cd_catalog.xsl):
<?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>
注意,现在XML文件还没有加入XSL样式表,还没有被转换成HTML文件。
下面是用JavaSript来实现最后转换的HTML代码:
<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>
第一段代码建立一个Microsoft Parser(XMLDOM)解析的对象,并将XML文档读入内存;第二段代码建立另外一个对象并导入XSL文档;最后一行代码将XML文档用XSL文档转换,并将结果输出到HTML文件中。
使用xsl显示xml文档
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/xsl" href="st.xsl"?> <students> <student> <name>August</name> <tele>91%</tele> <dizhi>9%</dizhi> </student> <student> <name>zhangjie</name> <tele>58469523</tele> <dizhi>beijinglu12hao</dizhi> </student> </students> 上面是xml语言,要在网页中显示,首先要用xsl编辑它的样式。下面是xsl的代码。 <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> //此链接指向了官方的 W3C XSLT 命名空间 注意大小写 <xsl:template match="/"> <html> <body> <h2>网页陶吧访问统计</h2> <table border="1"> <tr bgcolor="#9acd32"> <th align="left">Month</th> <th align="left">% of IE visitor</th> <th align="left">% of NC visitor</th> </tr> <xsl:for-each select="students/student"> <tr> <td> <xsl:value-of select="name"/> </td> <td> <xsl:value-of select="tele"/> </td> <td> <xsl:value-of select="dizhi"/> </td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> 保存为st.xsl **下面是转载他人的学习心得 很简明很实用推荐大家一起学习** 这是我今天学习的时候遇到的另一个问题,做图像超链接要把链接地址放到<a>的href属性中去,可是这就是在标签中套标签,是不可以的,查了《Web编程实做教程》,才知道正确的解决方案,现在与大家分享。 此段代码运行需要两张图片:a.gif和b.gif。 my.xml 以下内容为程序代码: <?xml version="1.0" encoding="GB2312"?> <?xml-stylesheet type="text/xsl" href="mystyle.xsl"?> <Books> <Book ID="a001"> <Name>网络指南</Name> <Photo>a.gif</Photo> <Homepage>http://www.a.com</Homepage> </Book> <Book ID="a002"> <Name>局域网技术</Name> <Photo>b.gif</Photo> <Homepage>http://www.b.com</Homepage> </Book> </Books> mystyle.xsl 以下内容为程序代码: <?xml version="1.0" encoding="GB2312"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="Books/Book"> <xsl:element name="a"> <xsl:attribute name="href"> <xsl:value-of select="./Homepage"/> </xsl:attribute> <xsl:element name="img"> <xsl:attribute name="src"> <xsl:value-of select="./Photo"/> </xsl:attribute> </xsl:element> </xsl:element> <br/> </xsl:template> </xsl:stylesheet> 在浏览器上的显示结果: 竖向平列显示两个图片。 说明: 使用超链接,需要借助<xsl:element>和<xsl:attribute>两个标签,基本使用方法就可以参照上边的例子,在深奥一点的,如果你想出来了,记得要和大家分享哟。 长见识,嘿嘿,这个可是真是第一次看见。 {Homepage} <xsl:value-of select="Homepage"/> 两个在任何时候都是等价的吧? 你上边的代码和我原来的效果有点小差别,我帮你完善一下: mystyle.xsl <?xml version="1.0" encoding="GB2312"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="Books/Book"> <a href="{Homepage}"> <img src="{Photo}"/> </a> </xsl:template> </xsl:stylesheet>
发表评论
-
nginx代理IIS轻松实现支持JSP,PHP,ASP平台
2012-05-12 21:16 1556通过使用高效代理服务器nginx代理IIS轻松实现支持JSP, ... -
OpenSessionInViewFilter的使用
2011-06-22 11:34 701一、作用 Spring为我们解决Hibernate的Sess ... -
tomcat服务器使用url rewrite1
2011-05-19 18:25 1425让tomcat服务器使用url rewrite1. 第 ... -
CountDownLatch闭锁详解
2011-05-09 10:29 1272闭锁(Latch) 闭锁(Latch):一种同步方法,可以延 ... -
memcache/memcached/memcachedb 配置、安装
2011-05-05 15:44 1159memcache/memcached/memcachedb ... -
jquery.treeview使用
2011-03-25 18:31 1484这几天项目中要用到树型结构,正好项目中用到了JQuery,所以 ... -
集群的可扩展性及其分布式体系结构
2011-03-17 14:54 1067常见的平衡算法 一般 ... -
strust2防止重复提交
2011-03-15 10:05 1071在请求表单中添加<s:token></s:t ... -
源码中没有任何错误目录中还存在红叉
2011-02-26 17:04 734查看.classpath文件。修改正确配置!lib与src -
长连接与短连接
2011-01-04 15:44 1085长连接与短连接 所谓长连接,指在一个TCP连接上可以连续发送 ... -
带“+”号的参数值通过url传递,后台取不到正确值
2010-11-29 15:19 2410带“+”号的参数值通过url传递,后台取不到正确值 问题是这样 ... -
JCom的使用
2010-11-08 11:15 2678JCom可以支持打印,支持生成word,生成Excel,并且可 ... -
利用java操作Excel文件
2010-10-28 16:45 703利用java操作Excel文件 很久以来都想 ... -
web.xml详解
2010-10-22 09:18 625部署描述符实际上是一个XML文件,包含了很多描述servlet ... -
jsvalidation表单验证框架使用相关问题
2010-10-05 18:57 10921、如果验证框架没有起作用,就先把验证框架的js文件、x ... -
java中调用c(c++)写的dll 文件的实现及步骤
2010-09-08 10:08 1674JNI使用技巧点滴本文为 ... -
我的站点
2010-01-09 10:43 0www.51sj.com 我要设计 www.52sj.co ... -
Oracle创建删除用户、角色、表空间、导入导出数据库命令行方式总结
2009-12-18 21:31 2303说明: 在创建数据库时输入的密码,是修改系统默认的密码,以sy ... -
jdbc连接各种数据库
2009-12-18 21:08 783一、jsp连接Oracle8/8i/9i数据库(用thin模式 ... -
IOC
2009-11-02 11:36 1160介绍 IOC 作者:冰云 icecloud(AT) ...
相关推荐
在前面的章节中,我们解释了如何用XSL在浏览器中将XML文档转换成HTML,窍门 就是让JavaScript使用一个XML解析器来进行转换。但是当浏览器不支持XML解析 器时,这种方法是不奏效的。要使XML数据对所有浏览器都可用,...
xsl xml xpath javascript param 绝对超值,你值得拥有!
XSL也可以将XML转化为HTML,那样,老的浏览器也可以浏览XML文档了。 2.CSS CSS大家很熟悉了,全称是Cascading Style Sheets(层叠样式表),是目前用来在浏览器上显示XML文档的主要方法。 3.Behaviors ...
使用xth (从XML到html),您可以加载XML文件及其关联的XSLT样式表,并将其转换为HTML。 无依赖性,仅重1.3kb。 在所有主要浏览器(包括Internet Explorer 10和更高版本)上都在客户端工作。 安装 CDN < ...
然后,它使用自定义xsl文件将xml文件转换为人类可读的格式。 文件路径 此应用程序在Home控制器中使用恒定的文件路径。 在运行它之前,请确保将文件路径更改为应用程序可以访问文件的任何位置。 为应用程序启用XML...
第9章将告诉编程者根据适当的环境,在需要时把XML转换成适合显示的某些其他格式的技术。这正是数据驱动的样式化的核心所在。第13章(样式化)在第8章和第9章的基础上告诉读者如何对XML样式化。我们的样式单将成为...
06表现与转换3-XSL-FO 07定位、链接与查询1-XPath 07定位、链接与查询2-链接 07定位、链接与查询3-XQuery 08编程接口1-概述与DOM 08编程接口2-SAX 08编程接口3-JDOM 08编程接口4-NET 09应用1-XHTML 09应用2...
XSL文件仅供参考,并且转换标记在xsl.js文件中编码为JavaScript字符串。 这样一来,它就可以完全在本地运行,而不必每次都选择xsl文件作为上载。 该页面已经过测试,可以在Chrome中运行。 尽管它可能可以工作,但...
jquery.transform 一个jQuery插件,为用户提供了一种使用XSL模板执行跨浏览器XML转换的简便方法。 执照 版权所有(c)2009 DAER Systems(daersystems.com) 根据和许可获得双重许可。
技术: ES6 Javascript 的开发流水线建筑生产现场gulp gulp serve:dist时提交应用程序gulp serve:dist workds 切换到分支gh-pages-test 将master合并到gh-pages-test 将dist/目录文件复制到根目录中cp -r dist/* ....
• 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值的用法 • 2.4.htm 转义字符的使用 ...
13.1.xsl 使用XSLT将XML转换为HTML 13.2.xml 一个雇员列表xml文件 13.2.xsl 一个XSL样式表的例子 13.3.htm Internet Explorer 浏览器中XML的应用 13.4.htm 直接对XML文档...
快速、高效地帮助您把您拥有的源代码文件转换成标准 htm 文件,方便您继续用 Word 编辑、打印、或者制作网站、打印《软件著作权登记》材料、制作教学幻灯片、出版物、以及粘贴到支持 html 格式的论坛上等 ...
xml_transformNode:xsl转换。 xml_text:节点的文本。 selectSingleNode:根据XPath选择单个节点。 selectNodes:根据XPath选择多个节点。 全部代码(zyllibjs_xml.js)—— 代码如下: /* zyllibjs_xml XML处理 @...
JavaScript函数和XSL样式表可解析iTunes Library.xml文件并将其转换为文件,JSON或JavaScript。 需要和 。 图书馆 转换整个库。 const { toM3U } = require ( './lib/js/library' ) const { toJSON , toJS , ...
实例102 将RGB格式的颜色值转换为十六进制格式 161 实例103 将IP地址转换为对应的数值 163 实例104 从指定URL中提取文件名 164 3.3 随机函数 166 实例105 随机产生指定位数的验证码 166 实例106 生成随机字符串 167 ...