如果您的浏览器支持 XSLT,那么在浏览器中它可被用来将文档转换为 XHTML。

JavaScript 解决方案

在前面的章节,我们已向您讲解如何使用 XSLT 将某个 XML 文档转换为 XHTML。我们是通过以下途径完成这个工作的:向 XML 文件添加 XSL 样式表,并通过浏览器完成转换。

即使这种方法的效果很好,在 XML 文件中包含样式表引用也不总是令人满意的(例如,在无法识别XSLT的浏览器这种方法就无法奏效)。

更通用的方法是使用 JavaScript 来完成转换。

通过使用 JavaScript,我们可以:

  • 进行浏览器确认测试
  • 根据浏览器和使用者的需求来使用不同的样式表

这就是 XSLT 的魅力所在!XSLT 的设计目的之一就是使一种格式到另一种格式的转换成为可能,同时支持不同类型的浏览器以及不同的用户需求。

浏览器端的 XSLT 转换一定会成为未来浏览器所执行的主要任务之一,同时我们也会看到其在特定的浏览器市场的增长(盲文、网络打印机,听觉设备,等等)。

XML 文件和 XSL 文件

请看这个在前面的章节已展示过的 XML 文档:

<?xml version="1.0" encoding="ISO-8859-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>
.
.
.
</catalog>

查看此 XML 文件

以及附随的 XSL 样式表:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th align="left">Title</th>
<th align="left">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>

查看此 XSL 文件

请注意,这个 XML 文件没有包含对 XSL 文件的引用。

重要事项:上面这句话意味着,XML 文件可使用多个不同的 XSL 样式表来进行转换。

在浏览器中把 XML 转换为 XHTML

这是用于在客户端把 XML 文件转换为 XHTML 的源代码:

<html>
<body> <script type="text/javascript"> // Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml") // Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl") // Transform
document.write(xml.transformNode(xsl)) </script> </body>
</html>

提示:假如您不了解如何编写 JavaScript,请学习我们的《JavaScript 教程》。

第一段代码创建了微软的 XML 解析器的一个实例,然后把 XML 文件载入了内存。第二段代码创建了解析器的另一个实例,然后把这个 XSL 文件载入了内存。最后一行代码使用 XSL 文档转换了 XML 文档,并在浏览器中把结果作为 XHTML 显示出来。任务完成!

转载:http://www.w3school.com.cn/xsl/xsl_client.asp

XSLT学习(九)通过JavaScript转化xml的更多相关文章

  1. JavaScript学习(1)之JavaScript基础

    JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...

  2. javascript和XML

    一,浏览器对XML DOM的支持1,DOM2级核心 var xmldom = document.implementation.createDocument("","roo ...

  3. 18. javacript高级程序设计-JavaScript与XML

    1. JavaScript与XML IE采取了下列方式: l 通过ActiveX对象来支持处理XML,而相同的对象也可以用来构建桌面应用程序 l Windows携带了MSXML库,JavaScript ...

  4. 第一百二十五节,JavaScript,XML

    JavaScript,XML 学习要点: 1.IE中的XML 2.DOM2中的XML 3.跨浏览器处理XML 随着互联网的发展,Web应用程序的丰富,开发人员越来越希望能够使用客户端来操作XML技术. ...

  5. 转 利用 Console 来学习、调试JavaScript

    利用 Console 来学习.调试JavaScript   一  什么是 Console Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象 ...

  6. javascript与XML

    曾几何时,XML一度成为存储和通过因特网传输结构化数据的标准,之前,浏览器无法解析XML数据时,开发人员都要手动编写自己的XML解析器.而自从DOM出现后,所有浏览器都内置了对XML的原生支持(XML ...

  7. How to make an HTTP request 异步 JavaScript 和 XML

    https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started In order to make an HTTP request to th ...

  8. string 转化xml && xml转化为string

    一.使用最原始的javax.xml.parsers,标准的jdk api // 字符串转XML [java] view plaincopyprint? String xmlStr = \". ...

  9. ajax-异步JavaScript和XML

    什么是ajax? ajax是异步的javascript和XML ( Asynchronous Javascript And XML ) 优点:节省用户操作时间,提高用户体验.减少数据请求次数. 什么是 ...

随机推荐

  1. Tenka1 Programmer Contest D - Crossing

    链接 Tenka1 Programmer Contest D - Crossing 给定\(n\),要求构造\(k\)个集合\({S_k}\),使得\(1\)到\(n\)中每个元素均在集合中出现两次, ...

  2. bzoj4811 [Ynoi2017]由乃的OJ 树链剖分+贪心+二进制

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4811 题解 我现在为什么都写一题,调一天啊,马上真的退役不花一分钱了. 考虑这道题的弱化版 N ...

  3. 029:url标签使用详解

    url标签使用详解: 在模版中,我们经常要写一些 url ,比如某个 a 标签中需要定义 href 属性.当然如果通过硬编码的方式直接将这个 url 写死在里面也是可以的.但是这样对于以后项目维护可能 ...

  4. TPS、QPS和系统吞吐量的区别和理解

    参考:https://blog.csdn.net/u010889616/article/details/83245695 一.QPS/TPSQPS:Queries Per Second意思是“每秒查询 ...

  5. [CF1166C]A Tale of Two Lands题解

    比赛的时候lowerbound用错了 现场WA on test4(好吧我承认我那份代码确实有除了lowerbound以外的问题) 于是只能手动二分 (我好菜啊QAQ 经过一波数学推算,我们发现,设序列 ...

  6. 【LOMBOK】能引入 @Slf4j 注解,不能识别 log 的解决方法

    问题: 在pom.xml中加入引入了lombok的依赖,可以引用@Slf4j注解不能识别log 如:注:上面一篇博客,已经说明lombok的安装了,但是用的时候还有点问题. 1).把lombok.ja ...

  7. JS判断数组是否为空

    var arr = []; if(arr == false){ console.log("arr is empty!"); }else{ console.log("arr ...

  8. linux用setup命令来更改ip配置

    在有安装系统桌面情况下,可以使用图形化形式来配置ip地址, 在命令行下,输入“setup”调出网卡.防火墙等配置界面: 2 选择“network configuration“,回车: 选择“devic ...

  9. html+js(swiper.js)+css左右滑动切换页面效果,适配移动端

    demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...

  10. composer的自动加载机制(autoload)

    composer的出现真是让人们眼前一亮,web开发从此变成了一件很『好玩』的事情,开发一个CMS就像在搭积木,从packagist中取出『积木』搭建在自己的代码中,一点一点搭建出一个属于自己的王国. ...