XSLT-在客戶端

知識 04-25

如果您的瀏覽器支持 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 stylex="text-align:left">Title</th>
<th stylex="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 的源代碼：

實例

<!DOCTYPEhtml><html><head><script>

functionloadXMLDoc(filename){if(window.ActiveXObject){xhttp = newActiveXObject("Msxml2.XMLHTTP"); }else{xhttp = newXMLHttpRequest(); }xhttp.open("GET", filename, false);try{xhttp.responseType = "msxml-document"}catch(err){}// Helping IE11xhttp.send("");returnxhttp.responseXML;}functiondisplayResult(){xml = loadXMLDoc("cdcatalog.xml");xsl = loadXMLDoc("cdcatalog.xsl");// code for IEif(window.ActiveXObject || xhttp.responseType == "msxml-document"){ex = xml.transformNode(xsl); document.getElementById("example").innerHTML = ex; }// code for Chrome, Firefox, Opera, etc.elseif(document.implementation && document.implementation.createDocument){xsltProcessor = newXSLTProcessor(); xsltProcessor.importStylesheet(xsl); resultDocument = xsltProcessor.transformToFragment(xml, document); document.getElementById("example").appendChild(resultDocument); }}

</script></head><bodyonload="displayResult()"><divid="example"/></body></html>

嘗試一下 ?

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

實例解釋：

loadXMLDoc() 函數

loadXMLDoc() 函數是用來載入 XML 和 XSL 文件。

它檢查用戶擁有的和載入文件的瀏覽器類型。

displayResult() 函數

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