如果您的浏览器支持 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. 去掉Tomcat网站地址栏的小猫图标

    当我们打开CSDN等网站时,在地址栏前面就会出现红色的C状图标,如果在桌面新建此链接的快捷方式,则桌面图标也自动变为该地址栏ICO图标.在基于TOMCAT的BS应用或网站开发时,默认的图标为黄色的小猫 ...

  2. Vue项目安装CubeUI

    CubeUi GitHub地址:https://github.com/didi/cube-ui install vue add cube-ui 项目中 会多出cube ui 的配置文件来

  3. CSS基础知识总结之css样式引用的三种方式

    在html中增加css样式有三种: 1.在标签中增加style属性: <!DOCTYPE html> <html lang="en" xmlns="ht ...

  4. C语言版本学生信息管理系统

    仍然有一些小bug,后续会发布OC完善版的图书馆管理系统,欢迎批评指正. #include <stdio.h> void menu_choose(); typedef struct { i ...

  5. 4,fail-fast错误机制

    一,fail-fast简介 在JDK的Collection中我们时常会看到类似于这样的话: ArrayList 注意,迭代器的快速失败行为无法得到保证,因为一般来说,不可能对是否出现不同步并发修改做出 ...

  6. win7系统安装sql2000数据库时没有反应,不出来安装界面?

    今天一个客户反馈软件连不上数据库,经检查发现SQL服务启动不了,懒得查原因就把SQL2000卸载了,他们电脑是win7的系统,本来正常来说安装SQL2000数据库是没啥问题的,可是特别奇怪的是,这台w ...

  7. vs2019里没有linq to sql或EF工具,导致dbml或者edmx无法通过设计器浏览

    点击:工具->获取工具或功能 选择需要安装的工具,然后点击底部的修改按钮就可以了,等待安装完成,如下图:

  8. SparkSQL架构

    Spark SQL运行架构 Spark SQL由Core.Catalyst.Hive和Hive-Thriftserver组成 core:负责处理数据的输入/输出,从不同的数据源获取数据(如RDD.Pa ...

  9. vue双花括号的使用

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. Unity3D利用Logcat调试安卓

    发布安卓包之后再次测试发生什么问题很难知道怎么了,比如说出现闪退等情况,可以用Logcat检测到,logcat是Android中一个命令行工具,可以用于得到程序的log信息,可以用 logcat 命令 ...