XSLT学习(九)通过JavaScript转化xml

如果您的浏览器支持 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

原文地址:https://www.cnblogs.com/planetwithpig/p/11517174.html

时间: 2024-10-13 04:51:40

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

转 利用 Console 来学习、调试JavaScript

利用 Console 来学习.调试JavaScript 一  什么是 Console Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中. 二  什么浏览器支持 Console 很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console.而其他浏览器都支 持不好.比如 IE8 自带的开发工具虽然支持 Console,但功能比较单调,显示对象的时候都是显

第18章 JavaScript 与 XML

第18章 JavaScript 与 XML 18.1 浏览器对XML DOM 的支持 18.1.1 DOM2 级核心 18.1.2 DOMParser 类型 18.1.3 XMLSerializer 类型 18.1.4 IE8及之前版本中的XML 18.1.5 跨浏览器处理XML 18.2 浏览器对XPath的支持 18.2.1 DOM3级XPath 18.2.2 IE中的XPath 18.2.3 跨浏览器使用XPath 18.3 浏览器对XSLT的支持 18.3.1 IE中的XSLT 18.3

原生javascript解析xml文档

之前写过一篇 <javascript/jQuery解析或转换json和xml>链接是http://my.oschina.net/ososchina/blog/343748,这篇博客详细解释了json使用 JSON.js  window.eval() ,jQuery 与字符串互相转换的方法 ,顺便也说了一点jQuery解析xml文档的方法,这里着重论述javascript操作xml. 顺便提一下,今天做项目有一点问题,如何让服务程序接口返回的就是json,而不需要 使用 jQuery.ajax设

Oracle学习(九):创建和管理表

1.知识点:可以对照下面的录屏进行阅读 SQL> --创建表 SQL> create table test1 2 (tid number, 3 tname varchar2(20), 4 hidatedate date default sysdate); SQL> --使用as和子查询快速建表 SQL> --创建表:包含员工号 姓名 月薪 年薪 部门名称 SQL> create table empincome 2 as 3 select empno,ename,sal,sal

JavaEE学习之Maven配置文件pom.xml详解(转)

一.引言 (本文转载自:http://blog.csdn.net/longeremmy/article/details/9670619) 使用maven有一些时间了,一直没有好好将pom配置文件每个节点的意义好好了解一番.今天突然想来了解下:pom- project object model 项目对象模型.顾名思义,他是用来描述项目信息的,以及构建方式,依赖等.网上有一篇文章写的很详细,这里就借用一下,以备日后使用. 二.详解 1 <project xmlns="http://maven.

JavaScript实现XML与JSON互转代码(转载)

下面来分享一个关于JavaScript实现XML与JSON互转例子,这里面介绍了国外的三款xml转json的例子,希望这些例子能给你带来帮助. 最近在开发在线XML编辑器,打算使用JSON做为中间格式.因为JSON相对于XML,有着容易阅读.解析速度快.占用空间小等优点,更易于在WEB上传递数据.但在实际使用中还是发现了一些易于忽略的细节,对于需要严格保证XML原始结构的情况,在转换成JSON时需要一些注意. XML转换成JSON的格式大概如下: //XML形式 <article> <h

RX学习笔记:JavaScript数组操作

RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.unshift(123); array.unshift("value1","value2"); push() 在数组末尾添加元素 array.push("value"); array.push(123); array.push("value1&

JavaScript解析XML实现省市县三级联动

JavaScript解析XML实现省市县三级联动,简单易用,只需要一个XML和一个js就能能实现,下载后代开HTML就能看到效果.  原文:JavaScript解析XML实现省市县三级联动 源代码下载地址:http://www.zuidaima.com/share/1550463310056448.htm JavaScript解析XML实现省市县三级联动

javascript 转化一个数字数组为function数组(每个function都弹出相应的数字)

javascript 转化一个数字数组为function数组(每个function都弹出相应的数字) var arrNum = [2,3,4,5,6,10,7]; var arrFun = []; function change(arr){ var fun = function(val){ return function(){ return val; }; } for(var i=0;i<arr.length;i++){ arrFun.push(fun(arr[i])); } return ar