XSLT 在客戶端

2018-02-12 14:23 更新

XSLT - 在客戶端

如果您的瀏覽器支持 XSLT，那么在瀏覽器中它可被用來將文檔轉(zhuǎn)換為 XHTML。

但是并非所有的瀏覽器都是支持 XSLT 的，因此，你可以在客戶端把 XML 轉(zhuǎn)換為 XHTML！

JavaScript 解決方案

在前面的章節(jié)，我們已向您講解如何使用 XSLT 將某個(gè) XML 文檔轉(zhuǎn)換為 XHTML。我們是通過以下途徑完成這個(gè)工作的：向 XML 文件添加 XSL 樣式表，并通過瀏覽器完成轉(zhuǎn)換。

即使這種方法的效果很好，在 XML 文件中包含樣式表引用也不總是令人滿意的（例如，在無法識(shí)別 XSLT 的瀏覽器這種方法就無法奏效）。

更通用的方法是使用 JavaScript 來完成轉(zhuǎn)換。

通過使用 JavaScript，我們可以：

  • 進(jìn)行瀏覽器確認(rèn)測(cè)試
  • 根據(jù)瀏覽器和用戶需求來使用不同的樣式表

這就是 XSLT 的魅力所在！XSLT 的設(shè)計(jì)目的之一就是使數(shù)據(jù)從一種格式轉(zhuǎn)換到另一種格式成為可能，同時(shí)支持不同類型的瀏覽器以及不同的用戶需求。

客戶端的 XSLT 轉(zhuǎn)換一定會(huì)成為未來瀏覽器所執(zhí)行的主要任務(wù)之一，同時(shí)我們也會(huì)看到其在特定的瀏覽器市場(chǎng)的增長(zhǎng)（盲文、聽覺瀏覽器、網(wǎng)絡(luò)打印機(jī)，手持設(shè)備，等等）。

XML 文件和 XSL 文件

請(qǐng)看這個(gè)在前面的章節(jié)已展示過的 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 文件。

請(qǐng)注意，這個(gè) XML 文件沒有包含對(duì) XSL 文件的引用。

重要事項(xiàng)：上面這句話意味著，XML 文件可使用多個(gè)不同的 XSL 樣式表來進(jìn)行轉(zhuǎn)換。

在瀏覽器中把 XML 轉(zhuǎn)換為 XHTML

這是用于在客戶端把 XML 文件轉(zhuǎn)換為 XHTML 的源代碼：

實(shí)例

<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，請(qǐng)學(xué)習(xí)我們的 JavaScript 教程。

實(shí)例解釋：

loadXMLDoc() 函數(shù)

loadXMLDoc() 函數(shù)是用來加載 XML 和 XSL 文件。

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

displayResult() 函數(shù)

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

  • 加載 XML 和 XSL 文件
  • 測(cè)試用戶擁有的瀏覽器類型
  • 如果用戶瀏覽器支持 ActiveX 對(duì)象：
    • 使用 transformNode() 方法把 XSL 樣式表應(yīng)用到 XML 文檔
    • 設(shè)置當(dāng)前文檔（id="example"）的 body 包含已經(jīng)應(yīng)用樣式的 XML 文檔
  • 如果用戶的瀏覽器不支持 ActiveX 對(duì)象：
    • 創(chuàng)建一個(gè)新的 XSLTProcessor 對(duì)象并導(dǎo)入 XSL 文件
    • 使用 transformToFragment() 方法把 XSL 樣式表應(yīng)用到 XML 文檔
    • 設(shè)置當(dāng)前文檔（id="example"）的 body 包含已經(jīng)應(yīng)用樣式的 XML 文檔
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)