JaveScript 中使用 XSLT转换XML文档

我们经常将数据存储在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文档的更多相关文章

C#操作Xml：XSLT语法在.net中使用XSLT转换xml文档示例
XSL即可扩展的样式表文件. 可以格式化xml的显示,也可以将xml转换成需要的另一种格式. 学习XSL必须熟悉XPath.XSL和XPath一样简单强大,容易学习. 1. XSL既然可以格式化xml ...
PHP中利用DOM创建xml文档
DOM创建xml文档用dom创建如下文档: <booklist> <book id="1"> <title>天龙八部</title> ...
Anakia 转换xml文档为其他格式
一.简介 Anakia 使用JDOM 和Velocity将XML文档转换为特定格式的文档二.解析xml文档方法 1.DOM java jdk,xml-api.jar 需要加载整个xml文档来构建层次 ...
c#使用XSLT将xml文档转换为html文档
需要引用下面的命名空间: using System.Xml; using System.Xml.Xsl; 方法实现: public static string ConvertXML(XmlDocume ...
详解xml文件描述，读取方法以及将对象存放到xml文档中，并按照指定的特征寻找的方案
主要的几个功能: 1.完成多条Emp信息的XML描述2.读取XML文档解析Emp信息3.将Emp(存放在List中)对象转换为XML文档4.在XML文档中查找指定特征的Emp信息 dom4j,jaxe ...
freeMarker（十三）——XML处理指南之揭示XML文档
学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 前言尽管 FreeMarker 最初被设计用作Web页面的模板引擎, ...
网络电视精灵~分析~~~~~~简单工厂模式，继承和多态，解析XML文档，视频项目
小总结: 所用技术: 01.C/S架构,数据存储在XML文件中 02.简单工厂模式 03.继承和多态 04.解析XML文档技术 05.深入剖析内存中数据的走向 06.TreeView控件的使用核心: ...
源生API解析XML文档与dom4j解析XML文档
一.XML语言 XML是一种可扩展的标记语言,是一种强类型的语言,类似HTML(超文本标记语言,是一种弱类型的语言).XML是一种通用的数据交换格式(关系型数据库),综上所诉:XML可以传输数据,也可 ...
转创建 JavaScript XML 文档注释
http://www.cnblogs.com/chenxizhang/archive/2009/07/12/1522058.html 如何:创建 JavaScript XML 文档注释 Visual ...

随机推荐

greenev —— Python 异步网络服务框架
greenev是一个基于greenlet协程,事件驱动,非阻塞socket模型的Python网络服务框架,它使得可以编写同步的代码,却得到异步执行的优点. 本项目受到gevent, openresty ...
SHELL脚本--简介
bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 脚本都以#!/bin/bash开头,“#”称为sharp,“! ...
python字符串(string)方法整理
python中字符串对象提供了很多方法来操作字符串,功能相当丰富. print(dir(str)) [..........'capitalize', 'casefold', 'center', 'co ...
TCP三次握手与Tcpdump抓包分析过程
一.TCP连接建立(三次握手) 过程客户端A,服务器B,初始序号seq,确认号ack 初始状态:B处于监听状态,A处于打开状态 A -> B : seq = x (A向B发送连接请求报文段,A ...
ElasticSearch安装及HEAD插件配置
1. 安装 ElasticSearch 直接下载 zip 包解压即可,假设解压到 E:\ESTool\elasticsearch-5.6.3 2. 安装 nodejs 和 npm head 插件本身是 ...
高德地图Javascript API设置域名白名单
在涉及到GPS地图相关应用的开发过程中,我们需要在高德开放平台注册相应的账号,并设置好相应应用来获取调用的Key值,该Key值直接放入到网站前端页面,针对任何人来说都可看到,因此我们防止他人盗用你的K ...
RNN-LSTM入门
RNN-LSTM入门 Last Edited: Dec 02, 2018 10:20 PM Tags: 机器学习,论文阅读 RNN-Recurrent Neural Network 概念: 序列数据: ...
XAML: 在 MVVM 模式中，关于绑定的几处技巧
以下会提到三个绑定的技巧,分别是在 ListView 中为 ListViewItem 的 MenuFlyout 绑定 Command: 在 ListView 的事件中绑定所选择项目,即其 Sele ...
Tomcat服务器为java项目配置顶级域名
修改端口, Tomcat服务器下conf/server.xml文件把端口号更改为80 解释:输入域名时默认进入80端口,如果没修改则需要输入端口号才能进入. Eg:www.xxx.com: ...
月薪15k的测试员需要学习什么技术？
想了很久,决定还是要写一篇这样的文章出来,月薪15k的测试员需要学习什么技术?我觉得测试想要月薪15k并不难,只要做到我说的这几点肯定是可以的! 克服懒惰我觉得,越是聪明的人越是觉得自己“懒惰”.大 ...

JaveScript 中使用 XSLT转换XML文档

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

随机推荐

热门专题