在Mozilla/Firefox中使用JavaScript和 XSLT

作者:onestab

简介

由于现代的浏览器都支持 XSLT,开发者现在可以借助于 JavsScript 利用 XSLT 的强大功能。Web 应用程序可使用JavaScript 载入XML数据、通过 XSLT 将其转换成指定的显示格式,并添加到当前的页面。由于 XML 文档只包含数据信息,而不管如何显示,所以可以非常快速地载入。

从 Mozilla 1.2 开始, Gecko 支持从 JavsScript 创建 XSLT 处理器,本文讨论了如何在基于Gecko引擎的浏览器中使用 JavsScript 进行 XSLT 转换。

Gecko 中的 JavaScript 与 XSLT

JavaScript 可以通过 XSLTProcessor 对象实现 XSLT 转换,XSLTProcessor 对象有一个 importStylesheet 方法,该方法的参数是一个转换用的 XSLT 样式表,该样式表其实也是一个 XML 文件,也就是说,在调用 importStylesheet 之前必须先装入该 .xsl 文件。我们可以通过 XMLHttpRequestXMLDocument.load 方法将其载入。

图一:初始化 XSLTProcessor 对象

var xlstProcessor = new XSLTProcessor();
// 使用同步的方式装入 xsl 文件
var myRequest = new XMLHttpRequest();
myRequest.open("GET", "example.xsl", false);
myRequest.send(null);
var xslRef = myRequest.responseXML;
// 现在可以引入 xsl了
xsltProcessor.importStylesheet(xslRef);

被转换的 XML 文档可通过另一个 XMLDocument 对象载入,也可以是HTML DOM 的一个片断。要处理 HTML DOM 的片断,这里假定它包含在 id 为 example 的元素中,首先要在内存中创建一个 XMLDocument,再使用 XMLDocument 的 importNode 方法,这个方法允许我们在文档之间传递 DOM 片断(此处为从 HTMLDocument 到 XMLDocument)。importNode 方法的第一个参数是被克隆的 DOM 结点,第二个参数表示克隆的"深度",如果设置为 true,则克隆该结点的所有子孙结点,即"深度克隆"。克隆出来的 DOM 结点可以很容易地使用 appendChild 方法插入到 XMLDocument 中。

图二:从 HTML 片断创建 XML 文档
  // 创建 XML 文档对象
var xmlRef = document.implementation.createDocument("", "", null);
// 使用 importNode 将HTML DOM 的一部分转换为XML 文档。
// 参数 true 表示克隆全部子元素。
var myNode = document.getElementById("example");
var clonedNode = xmlRef.importNode(myNode, true);
// 将克隆的结点添加到 XML 对象
xmlRef.appendChild(clonedNode);

引入了样式表之后,就该进行真正的转换了。XSLTProcessor 有两种方法可供使用,分别是 transformToDocument()transformToFragment()transformToDocument() 返回一个完整的 XMLDocument, 而 transformToFragment() 则返回一个DOM片断,可以很容易地插入到当前页面。二者都有求将 DOM Node 对象作为参数,而 transformToFragment()还要求传入类型为Document的第二个参数,该对象将用来容纳所产生的 DOM 片断,如果该片断将要插入到当前页面中,可直接传入 document

图三:实施转换
var fragment = xsltProcessor.transformToFragment(xmlRef, document);

例1 - 基本的 XSLT 转换

本例子演示了在基于Gecko引擎的浏览器(Mozilla/Firefox/Netscape)中使用 XMLHttpRequest 装入 XML 和 XSL 文档,并使用 XSLTProcessor 进行转换。

查看实例 对不起,您正在使用的浏览器将无法运行示例。

设置 XSLT 的参数

使用现成的 .xsl 和 .xml 文件进行转换当然不错,但如果使用 JavaScript 对其进行配置更为有用。例如,我们可使用 JavaScript 和 XSLT 对 XML 数据进行排序并显示结果,排序方式可以是升序或降序。

XSLT 提供了 xsl:param 元素,可为XSLT设置参数,它是 xsl:stylesheet 的子元素。XSLTProcessor 为访问参数提供了三种方法: setParameter, getParameterremoveParameter。其第一个参数为 xsl:param 的名称空间的 URI(通常我们用的都是默认的名称空间,所以可直接传入 "null" )。第二个参数是 xsl:param 的本地名称,当然,setParameter 的第三个参数是要设置的参数的值。

图四:传递参数

XSLT 片断:
<xsl:param name="myOrder" />
JavaScript:
var sortVal = xsltProcessor.getParameter(null, "myOrder");
if (sortVal == "" || sortVal == "descending")
xsltProcessor.setParameter(null, "myOrder", "ascending");
else
xsltProcessor.setParameter(null, "myOrder", "descending");

例2 - 设置XSLT参数

本例演示了在基于Gecko引擎的浏览器(Mozilla/Firefox/Netscape)中将HTML DOM 片断转换为 XML 片断,使用 XMLHttpRequest 装入 XSL 文档,获取并设置 XSLT 的参数,用 XSLTProcessor 实施转换,再将转换后的结果动态添加到 HTML 文档中。

查看例子 对不起,您正在使用的浏览器将无法运行示例。

XSLTProcessor 接口列表

XSLTProcessor 方法

void importStylesheet(DOMNode styleSheet)
引入 XSLT 样式表 styleSheet 为 XSLT stylesheet 的根结点。
DOMDocumentFragment transformToFragment(DOMNode source, DOMDocument owner)
使用由importStylesheet()引入的样式表对结点source进行转换,owner 结点是容纳转换结果的 DOMDocument.
DOMDocument transformToDocument(DOMNode source)
使用由importStylesheet()引入的样式表对结点source进行转换.
void setParameter(String namespaceURI, String localName, Variant value)
设置 XSLT stylesheet 的参数。
Variant getParameter(String namespaceURI, String localName)
取得 XSLT stylesheet 的参数的值。
void removeParameter(String namespaceURI, String localName)
去除 XSLT stylesheet 指定参数的值,这将导致 XSLT 使用默认的参数值。
void clearParameters()
去除 XSLT stylesheet 中所有参数的值,这将导致 XSLT 使用默认的参数值。
void reset()
从 XSLTProcessor 中去除所有样式表和参数。

浏览器差异

Netscape 7.x, Mozilla 1.2x 和 Firefox 0.9x 以及 Internet Explorer 6 (Windows) 支持 W3C XSLT 1.0 标准 (http://www.w3.org/TR/xslt). IE 5.0 和 5.5 仅只持 XSLT 草案, 与 XSLT 1.0 stylesheets 不兼容。

相关资源

  • Scriptable Objects Gecko 引擎浏览器脚本对象参考。
  • DevEdge 原 developer.netscape.com 上的文章集锦。developer.netscape.com 于 2004年10月关闭。