XSLT可以用來將文檔轉換為XHTML瀏覽器。
一個JavaScript解決方案
在前面的章節中，我們已經解釋了XSLT如何可以用於從XML轉換的文檔以XHTML。 我們通過添加一個XSL樣式表的XML文件，並讓瀏覽器做轉型這樣做。即使這工作得很好，它並不總是希望包括在XML文件的樣式表的參考(eg it will not work in a non XSLT aware browser.)
更通用的解決辦法是使用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>
查看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文件 。
Notice that the XML file does not have a reference to the XSL file.
IMPORTANT:上面這句話表明，XML文件可以用許多不同的XSL樣式表進行改造。
XML轉換成XHTML的瀏覽器
下面是XML文件轉換成XHTML在客戶端上所需的源代碼：
例
<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> 試一試» Tip:如果你不知道如何編寫JavaScript，請學習我們的JavaScript教程 。
例子解釋：
The loadXMLDoc() function does the following:
- 創建XMLHttpRequest對象
- 使用open()和send() XMLHttpRequest對象的方法來發送請求到服務器
- 獲得響應數據的XML數據
The displayResult() function is used to display the XML file styled by the XSL file:
- 加載XML和XSL文件
- 測試用戶有什麼樣的瀏覽器
- 如果Internet Explorer：
- 使用transformNode()方法將XSL樣式表應用於XML文檔
- 設置當前文件的主體(id="example")以包含風格xml文檔
- 如果其他瀏覽器：
- 創建一個新的XSLTProcessor中的對象和XSL文件導入到它
- 使用transformToFragment()方法將XSL樣式表應用於XML文檔
- 設置當前文件的主體(id="example")以包含風格xml文檔