作者：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 文件。我們可以通過 XMLHttpRequest 或 XMLDocument.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 中。

  // 創建 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, getParameter 和 removeParameter。其第一個參數為 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月關閉。