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>
<body>

<script type="text/javascript">

// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")

// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")

// Transform
document.write(xml.transformNode(xsl))

</script>

</body>
</html>

提示:假如您不了解如何編寫 JavaScript,請學習我們的《JavaScript 教程》。

第一段代碼創建了微軟的 XML 解析器的一個實例,然后把 XML 文件載入了內存。第二段代碼創建了解析器的另一個實例,然后把這個 XSL 文件載入了內存。最后一行代碼使用 XSL 文檔轉換了 XML 文檔,并在瀏覽器中把結果作為 XHTML 顯示出來。任務完成!

請看它在 IE 中如何工作

欧美最大尺度电影真做