Latest web development tutorials

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文件

以及附隨的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文件

請注意,這個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教程

實例解釋:

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 文檔