我们经常将数据存储在XML 中,在展示的时候需要转换为其它的形式,这里介绍使用XSLT 对XML数据进行转换。

要学习XSLT对XML的转换,需要先了解三个文件。

第一个是存储数据的XML文件:employees.xml

<?xml version="1.0"?>
<employees>
<employee title="Software Engineer">
<name>Nicholas C. Zakas</name>
</employee>
<employee title="Salesperson">
<name>Jim Smith</name>
</employee>
</employees>

第二个是存储XSLT的文件:employees.xslt

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" /> <xsl:template match="/">
<ul>
<xsl:apply-templates select="*" />
</ul>
</xsl:template> <xsl:template match="employee">
<li><xsl:value-of select="name" />, <em><xsl:value-of select="@title" /></em></li>
</xsl:template> </xsl:stylesheet>

第三个是我们进行转换的代码example.htm:

 <!DOCTYPE html>
<html>
<head>
<title>XSLTProcessor Example</title> <script type="text/javascript">
window.onload = function () { //use XHR to load
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("get", "employees.xml", false);
xmlhttp.send(null);
var xmldom = xmlhttp.responseXML; xmlhttp = new XMLHttpRequest();
xmlhttp.open("get", "employees.xslt", false);
xmlhttp.send(null);
var xsltdom = xmlhttp.responseXML; var processor = new XSLTProcessor();
processor.importStylesheet(xsltdom); var result = processor.transformToDocument(xmldom);
var div = document.getElementById("divResult"); var xml = (new XMLSerializer()).serializeToString(result);
alert(xml);
div.innerHTML = xml; }
</script>
</head>
<body>
<p>This example loads employees.xml and transforms it using employees.xslt.
The resulting code is then displayed.</p>
<div id="divResult"></div>
</body>
</html>

在这里我们通过 XSLTProcessor 类型使用XSLT转换XML文档,第一步加载两个DOM文档,一个基于XML,另一个基于XSLT,下面的代码在Edge 中可以顺利执行,在Chrome中,因为禁止从本地装载文件随意会会失败,如果从网络服务器上读取数据则没有问题。

//use XHR to load
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("get", "employees.xml", false);
xmlhttp.send(null);
var xmldom = xmlhttp.responseXML; xmlhttp = new XMLHttpRequest();
xmlhttp.open("get", "employees.xslt", false);
xmlhttp.send(null);
var xsltdom = xmlhttp.responseXML;

然后创建一个新XSLTProcessor对象,并使用importStylesheet()方法为其指定一个XSLT

var processor = new XSLTProcessor();
processor.importStylesheet(xsltdom);

最后一步是执行转换,这一步有两种不同的方式,如果想返回一个完整的DOM文档,可以调用transformToDocument().而通过调用transforToFragment()则可以得到一个文档片段对象。一般来说。使用transformToFragment()的唯一理由,就是你想把返回的结果添加到另一个DOM文档中。

在使用transforToDocument()时,只要传入XML DOM,就可以将结果作为一个完全不同的DOM文档来使用。来看例子

var result = processor.transformToDocument(xmldom);

我们将result 结果进行序列化

var xml = (new XMLSerializer()).serializeToString(result);

来看转换后的结果

<ul>
<li>Nicholas C. Zakas, <em>Software Engineer</em></li>
<li>Jim Smith, <em>Salesperson</em></li>
</ul>

下面我们来看一下XSLT中的定义:

下面的这段代码会让我们将所有的内容都放到<ul></ul>之中,之所以会这样是因为我们的选择符指定了全部 select="*"

<xsl:template match="/">
<ul>
<xsl:apply-templates select="*" />
</ul>
</xsl:template>

下面这段代码的含义是对 employee 元素进行转换 match="employee"

将name 元素放到<li></li>中  select="name"

将title 属性提取出来放到<em></em>中  select="@title"

 <xsl:template match="employee">
<li><xsl:value-of select="name" />, <em><xsl:value-of select="@title" /></em></li>
</xsl:template>

而transformToFragment()方法接收两个参数:要转换的XML DOM 和应该拥有结果片段的文档。换句话说,如果你想将返回的片段插入到页面中,只要将document作为第二个参数即可。

我们只需要将example.htm中 23 - 28 行代码替换成下面代码就可以了。

var fragment = processor.transformToFragment(xmldom, document);
var div = document.getElementById("divResult"); div.appendChild(fragment);

这里,处理器创建了一个有document对象拥有的片段。这样,就可以将返回的片段添加到页面中已有的<div>元素中了。

在XSLT样式表的输出格式为"xml","html"的情况下,创建文档或文档片段会非常有用。

1.使用参数

XSLTProcessor 也支持使用 setParameter()来设置XSLT的参数,这个方法接收三个参数:命名空间URI,参数的内部名称和要设置的值。通常,命名空间URI都是null,而内部名称就是参数的名称。另外必须在调用transformToDocument()或transformToFragment()之前调用这个方法。来看例子

我们先看XSLT文件 employees2.xslt:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" /> <xsl:param name="message" /> <xsl:template match="/">
<ul>
<xsl:apply-templates select="*" />
</ul>
<p>Message: <xsl:value-of select="$message" /></p>
</xsl:template> <xsl:template match="employee">
<li><xsl:value-of select="name" />, <em><xsl:value-of select="@title" /></em></li>
</xsl:template> </xsl:stylesheet>

针对 example.htm的修改

第16行替换为

xmlhttp.open("get", "employees2.xslt", false);

第23 - 28替换为下面代码

processor.setParameter(null, "message", "Hello World!");

var fragment = processor.transformToFragment(xmldom, document);
var div = document.getElementById("divResult"); div.appendChild(fragment);

我们看运行后的结果:通过转换将模板中的 $message变量替换成了我们传入的参数"Hello World!"

<div id="divResult"><ul>
<li>Nicholas C. Zakas, <em>Software Engineer</em></li>
<li>Jim Smith, <em>Salesperson</em></li>
</ul>
<p>Message: Hello World!</p>
</div>

还有两个与参数有关的方法,getParamenter()和removeParamenter(),分别用于取得和一处当前参数的值。这两个方法都要接受命名空间参数和参数内部i名称。例如

var processor = new XSLTProcessor();
processor.importStylesheet(xsltdom);
processor.setParameter(null, "message", "Hello World!");

alert(processor.getParaeter(null,"message")); //输出 “Hello World!"
processor.removeParameter(null,"message");
var fragment = processor.transformToFragment(xmldom, document);

这两个方法并不常用。

2.重置处理器

每个XSLTProcessor 的实例都可以重用,以便使用不同的XSLT样式表执行不同的转换。重置处理器时要调用reset()方法,这个方法会从处理器中移除所有的参数和样式表。然后,你就可以再次调用importStylesheet(),以加载不同的XSLT样式表,如下面的例子

var processor = new XSLTProcessor();
processor.importStylesheet(xsltdom); //执行转换 processor.reset();
processor.importStylesheet(xsltdom2); //在执行转换

在需要基于多个样式表进行转换时,重用一个XSLTProcessor可以节省内存。

JaveScript 中使用 XSLT转换XML文档的更多相关文章

  1. C#操作Xml:XSLT语法 在.net中使用XSLT转换xml文档示例

    XSL即可扩展的样式表文件. 可以格式化xml的显示,也可以将xml转换成需要的另一种格式. 学习XSL必须熟悉XPath.XSL和XPath一样简单强大,容易学习. 1. XSL既然可以格式化xml ...

  2. PHP中利用DOM创建xml文档

    DOM创建xml文档 用dom创建如下文档: <booklist> <book id="1"> <title>天龙八部</title> ...

  3. Anakia 转换xml文档为其他格式

    一.简介 Anakia 使用JDOM 和Velocity将XML文档转换为特定格式的文档 二.解析xml文档方法 1.DOM java jdk,xml-api.jar 需要加载整个xml文档来构建层次 ...

  4. c#使用XSLT将xml文档转换为html文档

    需要引用下面的命名空间: using System.Xml; using System.Xml.Xsl; 方法实现: public static string ConvertXML(XmlDocume ...

  5. 详解xml文件描述,读取方法以及将对象存放到xml文档中,并按照指定的特征寻找的方案

    主要的几个功能: 1.完成多条Emp信息的XML描述2.读取XML文档解析Emp信息3.将Emp(存放在List中)对象转换为XML文档4.在XML文档中查找指定特征的Emp信息 dom4j,jaxe ...

  6. freeMarker(十三)——XML处理指南之揭示XML文档

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 前言 尽管 FreeMarker 最初被设计用作Web页面的模板引擎, ...

  7. 网络电视精灵~分析~~~~~~简单工厂模式,继承和多态,解析XML文档,视频项目

    小总结: 所用技术: 01.C/S架构,数据存储在XML文件中 02.简单工厂模式 03.继承和多态 04.解析XML文档技术 05.深入剖析内存中数据的走向 06.TreeView控件的使用 核心: ...

  8. 源生API解析XML文档与dom4j解析XML文档

    一.XML语言 XML是一种可扩展的标记语言,是一种强类型的语言,类似HTML(超文本标记语言,是一种弱类型的语言).XML是一种通用的数据交换格式(关系型数据库),综上所诉:XML可以传输数据,也可 ...

  9. 转 创建 JavaScript XML 文档注释

    http://www.cnblogs.com/chenxizhang/archive/2009/07/12/1522058.html 如何:创建 JavaScript XML 文档注释 Visual ...

随机推荐

  1. JQ-bootstrap我的开源前端框架

        因为实在不知道写啥,所以迟迟没有相关的介绍.但是必须要积累过程资产,所以还是介绍一下,不定哪天就有人用了.       首先还是介绍遇到的问题,我是做传统后台管理系统的,公司赶时髦,要用boo ...

  2. Use Generic Replacements of 1.X Framework API Classes 用泛型替换Framework 1.X版本的API类

    第一章,第一节 用泛型替换Framework 1.X版本的API类. 说起来,我是没接触过Framework 1.X版本的程序,12年毕的业(算算时间也一年多了,依旧一事无成,汗),毕业之后到公司实习 ...

  3. MariaDB/MySQL备份和恢复(二):数据导入、导出

    MariaDB/MySQL备份恢复系列: 备份和恢复(一):mysqldump工具用法详述 备份和恢复(二):导入.导出表数据 备份和恢复(三):xtrabackup用法和原理详述 1.导出.导入数据 ...

  4. 简单说明CGI和动态请求是什么

    1. CGI是什么 CGI是common gateway interface的缩写,大家都译作通用网关接口,但很不幸,我们无法见名知意. 我们知道,web服务器所处理的内容都是静态的,要想处理动态内容 ...

  5. 个渣渣C语言之数组

    ---恢复内容开始--- 学c语言就知道数组.指针在c中有着特殊的地位.而且是必须掌握的一项知识,学会它会让你受益无穷. 一.数组 1.数组:室友一系列相同元素构成的.它连续的存储在内存中. 2.数组 ...

  6. 《Office 365开发入门指南教程》正式上线,限时优惠和邀请分享推广

    我很高兴地通知大家,<Office 365 开发入门指南教程>已经正式在网易云课堂上线,你可以通过直接访问  https://aka.ms/office365devlesson 这个短地址 ...

  7. Windows server 2008 R2端口转发

    查询配置了转发的端口 netsh interface portproxy show v4tov4 配置转发(所有ip访问192.168.0.99的1001端口均指向1953端口) netsh inte ...

  8. mysql 的show processlist和show full processlist区别

    processlist命令的输出结果显示了有哪些线程在运行,不仅可以查看当前所有的连接数,还可以查看当前的连接状态帮助识别出有问题的查询语句等. 如果是root帐号,能看到所有用户的当前连接.如果是其 ...

  9. Docker多步构建更小的Java镜像

    译者按: 最新版Docker将支持多步构建(Multi-stage build),这样使用单个Dockerfile就可以定义多个中间镜像用于构建,测试以及发布等多个步骤,并且有效减小最终镜像的大小. ...

  10. 兼容浏览器的div透明

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...