XSLT - 在客戶端
XSLT可以在您的瀏覽器中用於將文件轉換為XHTML。
一個JavaScript解決方案
在前面的章節中，我們已經解釋了XSLT如何用於將文件從XML轉換為XHTML。我們透過將XSL樣式表新增到XML檔案並讓瀏覽器進行轉換來完成此操作。儘管這種方法效果很好，但將樣式表引用包含在XML檔案中並不總是可取的（例如，它在不支援XSLT的瀏覽器中將不起作用）。
更通用的解決方案是使用JavaScript進行轉換。
透過使用JavaScript，我們可以
- 進行瀏覽器特定測試
- 根據瀏覽器和使用者需求使用不同的樣式表
這就是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>以及隨附的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="/">
<h2>我的 CD 收藏</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th style="text-align:left">標題</th>
<th style="text-align:left">藝術家</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>
</xsl:template>
</xsl:stylesheet>請注意，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) {} // 幫助IE11
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog.xsl");
// 針對IE的程式碼
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
{
ex = xml.transformNode(xsl);
document.getElementById("example").innerHTML = ex;
}
// 針對Chrome、Firefox、Opera等的程式碼
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()函式執行以下操作
- 建立一個 XMLHttpRequest 物件
- 使用XMLHttpRequest物件的open()和send()方法向伺服器傳送請求
- 以XML資料形式獲取響應資料
displayResult()函式用於顯示經過XSL檔案樣式化的XML檔案
- 載入XML和XSL檔案
- 測試使用者使用的是哪種瀏覽器
- 如果是Internet Explorer
- 使用transformNode()方法將XSL樣式表應用於XML文件
- 設定當前文件的主體（id="example"）以包含樣式化的XML文件
- 如果是其他瀏覽器
- 建立一個新的XSLTProcessor物件並匯入XSL檔案
- 使用transformToFragment()方法將XSL樣式表應用於XML文件
- 設定當前文件的主體（id="example"）以包含樣式化的XML文件
