XSLT - 在客戶端

2020-04-24 16:07 更新

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

JavaScript 解決方案

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

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

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

通過(guò)使用 JavaScript,我們可以:

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

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

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

XML 文件和 XSL 文件

請(qǐng)看這個(gè)在前面的章節(jié)已展示過(guò)的 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="/">
<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>

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

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

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

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

實(shí)例

<!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) {} // 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>

實(shí)例解釋:

loadXMLDoc() 函數(shù)

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

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

displayResult() 函數(shù)

該函數(shù)用來(lái)顯示使用 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)