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

JavaScript 解決方案

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

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

更通用的方法是使用 JavaScript 來完成轉換。

通過使用 JavaScript，我們可以：

  • 進行瀏覽器確認測試

  • 根據瀏覽器和用戶需求來使用不同的樣式表

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

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

XML 文件和 XSL 文件

請看這個在前面的章節(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 文件。

請注意，這個 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"></div>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

提示：假如您不了解如何編寫 JavaScript，請學習我們的 JavaScript 教程。

實例解釋：

loadXMLDoc() 函數

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

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

displayResult() 函數

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

  • 加載 XML 和 XSL 文件

  • 測試用戶擁有的瀏覽器類型

  • 如果用戶瀏覽器支持 ActiveX 對象：

    • 使用 transformNode() 方法把 XSL 樣式表應用到 XML 文檔

    • 設置當前文檔（id="example"）的 body 包含已經應用樣式的 XML 文檔

  • 如果用戶的瀏覽器不支持 ActiveX 對象：

    • 創(chuàng)建一個新的 XSLTProcessor 對象并導入 XSL 文件

    • 使用 transformToFragment() 方法把 XSL 樣式表應用到 XML 文檔

    • 設置當前文檔（id="example"）的 body 包含已經應用樣式的 XML 文檔