JaveScript 中使用 XSLT转换XML文档

更新日期: 2018-12-14阅读: 2.5k标签: 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可以节省内存。


来源:https://www.cnblogs.com/xixiuling/archive/2018/12/13/10116108.html


链接: https://www.fly63.com/article/detial/1581

XML入门教程

XML 指可扩展标记语言(EXtensible Markup Language)。XML不会做任何事情,XML被设计用来结构化、存储以及传输信息。我们需要编写软件或者程序,才能传送、接收和显示出这个文档。

PHP中的XML解析的5种方法

不管是桌面软件开发,还是WEB应用,XML无处不在!然而在平时的工作中,仅仅是使用一些已经封装好的类对XML对于处理,包括生成,解析等。假期有空,于是将PHP中的几种XML解析方法总结如下:

XML基础知识总汇

随着json等一些技术的普及,似乎xml的路子越来越窄,虽然xml的一些功能被其他的一些技术代替,但是学习xml还是非常有必要,如果用xml存储一些大量数据,还是有一定优势的,就算你不管这

xml文件中的XPATH、DTD

XPath 是一门在 XML 文档中查找信息的语言,可用来在 XML 文档中对元素和属性进行遍历。XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointer 同时被构建于 XPath 表达之上。因此,对 XPath 的理解是很多高级 XML 应用的基础

XML处理指令

处理指令(PIs)允许文档包含用于应用程序的指令。指令并不是文档字符数据的一部分,但是必须通过应用程序传递。 处理指令可以用于将信息传递给应用程序。处理指令可以出现在文档任意位置的标记外部。可以出现在序言中

XML可扩展标记语言

XML:可扩展标记语言,XML的标签是没有被定义过的,需要自行定义,宗旨是做数据传递,而不是做数据展示;1、xml文件最顶端做声明2、所有标记必须成对出现(没有单标记)3、严格区分大小写

JSON和XML之间的区别是什么?

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它完全独立于语言。它基于JavaScript编程语言,易于理解和生成。XML(可扩展标记语言)旨在传输数据,而不是显示数据。这是W3C的推荐。

javascript如何读取xml?

javascript读取xml的方法:使用DOMParser对象解析XML文本并返回一个XML Document对象。然后调用parseFromString()方法读取。

javascript如何读取xml文件?

JavaScript是一种属于网络的脚本语言,通常通过嵌入在HTML中来实现自身的功能。XML文件格式是纯文本格式,在许多方面类似于HTML,XML由XML元素组成。

浅谈XML和JSON的区别

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!