XSLT - 在客戶端 · W3School Xml 教程

# XSLT - 在客戶端如果您的瀏覽器支持 XSLT，那么在瀏覽器中它可被用來將文檔轉換為 XHTML。 ## JavaScript 解決方案在前面的章節，我們已向您講解如何使用 XSLT 將某個 XML 文檔轉換為 XHTML。我們是通過以下途徑完成這個工作的：向 XML 文件添加 XSL 樣式表，并通過瀏覽器完成轉換。即使這種方法的效果很好，在 XML 文件中包含樣式表引用也不總是令人滿意的（例如，在無法識別 XSLT 的瀏覽器這種方法就無法奏效）。更通用的方法是使用 JavaScript 來完成轉換。通過使用 JavaScript，我們可以： * 進行瀏覽器確認測試 * 根據瀏覽器和用戶需求來使用不同的樣式表這就是 XSLT 的魅力所在！XSLT 的設計目的之一就是使數據從一種格式轉換到另一種格式成為可能，同時支持不同類型的瀏覽器以及不同的用戶需求。客戶端的 XSLT 轉換一定會成為未來瀏覽器所執行的主要任務之一，同時我們也會看到其在特定的瀏覽器市場的增長（盲文、聽覺瀏覽器、網絡打印機，手持設備，等等）。 ## XML 文件和 XSL 文件請看這個在前面的章節已展示過的 XML 文檔： ``` <?xml version="1.0" encoding="ISO-8859-1"?> <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 文件](/try/xml/cdcatalog.xml)。以及附隨的 XSL 樣式表： ``` <?xml version="1.0" encoding="ISO-8859-1"?> <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 align="left">Title</th> <th 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 文件](/try/xml/cdcatalog.xsl)。 **請注意，這個 XML 文件沒有包含對 XSL 文件的引用。** **重要事項：**上面這句話意味著，XML 文件可使用多個不同的 XSL 樣式表來進行轉換。 ## 在瀏覽器中把 XML 轉換為 XHTML 這是用于在客戶端把 XML 文件轉換為 XHTML 的源代碼： ## 實例 ``` <html> <head> <script> function loadXMLDoc(dname) { if (window.ActiveXObject) { xhttp=new ActiveXObject("Msxml2.XMLHTTP.3.0"); } else { xhttp=new XMLHttpRequest(); } xhttp.open("GET",dname,false); xhttp.send(""); return xhttp.responseXML; } function displayResult() { xml=loadXMLDoc("cdcatalog.xml"); xsl=loadXMLDoc("cdcatalog.xsl"); // code for IE if (window.ActiveXObject) { ex=xml.transformNode(xsl); document.getElementById("example").innerHTML=ex; } // code for Mozilla, 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 教程](/js/js-tutorial.html)。 ## 實例解釋： **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 文檔