XSLT - 在客戶端

如果您的流覽器支持 XSLT，那麼在流覽器中它可被用來將文檔轉換為 XHTML。

JavaScript 解決方案

在前面的章節，我們已向您講解如何使用 XSLT 將某個 XML 文檔轉換為 XHTML。我們是通過以下途徑完成這個工作的：向 XML 檔添加 XSL 樣式表，並通過流覽器完成轉換。

即使這種方法的效果很好，在 XML 檔中包含樣式表引用也不總是令人滿意的（例如，在無法識別 XSLT 的流覽器這種方法就無法奏效）。

更通用的方法是使用 JavaScript 來完成轉換。

通過使用 JavaScript，我們可以：

  • 進行流覽器確認測試
  • 根據流覽器和用戶需求來使用不同的樣式表

這就是 XSLT 的魅力所在！XSLT 的設計目的之一就是使數據從一種格式轉換到另一種格式成為可能，同時支持不同類型的流覽器以及不同的用戶需求。

客戶端的 XSLT 轉換一定會成為未來流覽器所執行的主要任務之一，同時我們也會看到其在特定的流覽器市場的增長（盲文、聽覺流覽器、網路印表機，手持設備，等等）。

XML 檔和 XSL 檔

請看這個在前面的章節已展示過的 XML 文檔：

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>

查看 XML 檔。

以及附隨的 XSL 樣式表：


<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th style="text-align:left">Title</th>
      <th style="text-align:left">Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="artist"/></td>
    </tr>
    </xsl:for-each>
  </table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

查看 XSL 檔。

請注意，這個 XML 檔沒有包含對 XSL 檔的引用。

重要事項：上面這句話意味著，XML 檔可使用多個不同的 XSL 樣式表來進行轉換。

在流覽器中把 XML 轉換為 XHTML

這是用於在客戶端把 XML 檔轉換為 XHTML 的源代碼：

實例

<!DOCTYPE html> <html> <head> <script>
function loadXMLDoc(filename) { if (window.ActiveXObject) { xhttp = new ActiveXObject("Msxml2.XMLHTTP"); } else { xhttp = new XMLHttpRequest(); } xhttp.open("GET", filename, false); try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11 xhttp.send(""); return xhttp.responseXML; } function displayResult() { xml = loadXMLDoc("cdcatalog.xml"); xsl = loadXMLDoc("cdcatalog.xsl"); // code for IE if (window.ActiveXObject || xhttp.responseType == "msxml-document") { ex = xml.transformNode(xsl); document.getElementById("example").innerHTML = ex; } // code for Chrome, Firefox, Opera, etc. else if (document.implementation && document.implementation.createDocument) { xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); resultDocument = xsltProcessor.transformToFragment(xml, document); document.getElementById("example").appendChild(resultDocument); } }
</script> </head> <body onload="displayResult()"> <div id="example" /> </body> </html>

提示：假如您不了解如何編寫 JavaScript，請學習我們的 JavaScript 教學。

實例解釋：

loadXMLDoc() 函數

loadXMLDoc() 函數是用來加載 XML 和 XSL 檔。

它檢查用戶擁有的和加載檔的流覽器類型。

displayResult() 函數

該函數用來顯示使用 XSL 檔定義樣式的 XML 檔。

  • 加載 XML 和 XSL 檔
  • 測試用戶擁有的流覽器類型
  • 如果用戶流覽器支持 ActiveX 對象：
    • 使用 transformNode() 方法把 XSL 樣式表應用到 XML 文檔
    • 設置當前文檔（id="example"）的 body 包含已經應用樣式的 XML 文檔
  • 如果用戶的流覽器不支持 ActiveX 對象：
    • 創建一個新的 XSLTProcessor 對象並導入 XSL 檔
    • 使用 transformToFragment() 方法把 XSL 樣式表應用到 XML 文檔
    • 設置當前文檔（id="example"）的 body 包含已經應用樣式的 XML 文檔