如果您的浏览器支持 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. 随笔2 AbstractMap<K,V>

    上一篇写了Map接口的源码分析,这一篇写一下Map接口的一个实现类AbstractMap,从名字就可以看出这是一个抽象类,提供了Map接口的骨架实现,为我们实现Map接口的时候提供了很大的便利.在这里 ...

  2. less:避免编译

    .box { width: ~"calc(300px - 30px)"; } 编译成css .box { width: calc(300px - 30px); } importan ...

  3. Spring的AOP和IoC及隔离级别

    Spring的AOP和IoC Spring AOP:代理机制.Spring提供的自动代理机制 Spring的IoC来实组件之间的依赖关系注入, 使控制层与业务实现分离,即客户通过调用业务委托接口来调用 ...

  4. VUE 生成二维码插件

    原文:https://www.jianshu.com/p/496fd1cbee8d npm install qrcodejs2 --save 页面中引入 dom 结构 JS 方法编写 export d ...

  5. JVM内存结构从永久代到元空间

    在文章<JVM之内存结构详解>中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化.作为面试官如果你还不知道,那么面试过程中是不是有些露怯? ...

  6. rest认证组件,权限组件,频率组件,url注册器,响应器组件,分页器组件

    1.认证组件 1.1 认证组件利用token来实现认证 1.2 token认证的大概流程 用户登录===>获取用户名和密码===>查询用户表 如果用户存在,生成token,否则返回错误信息 ...

  7. man fdisk

    FDISK(8)       Linux Programmer?. Manual/Linux程序手册       FDISK(8) NAME/名称       fdisk - Partition ta ...

  8. 如何把word文档内容和图片直接导入到wordpress编辑器

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  9. 【説明する】STL

    作为C++标准不可缺少的一部分,STL应该是渗透在C++程序的角角落落里的. STL不是实验室里的宠儿,也不是程序员桌上的摆设,她的激动人心并非昙花一现. 所以今天要整理的东西就是STL!(orz 杨 ...

  10. 神坑 Resources.Load 不能实时加载TXT文件

    Resources.Load(fileName) as TextAsset; 这句话并不能实时加载文本文件,对文本文件进行修改之后,若是没有刷新的话,加载的还是之前的文件: 要实时读取文本文件还是要以 ...