在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 文件。我們可以通過 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 中。
圖二：從 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, 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 不兼容。
相關資源