對 Web 開發人員而言，通過使用帶有“有意義的”標記數據元素的 xml，可實現使信息更有攜帶性與彈性。由于在 Internet EXPlorer 5 中增強的 XSL 支持，使得在瀏覽器中顯示 XML 數據更加容易。
我們在 Web Workshop 中使用 XML 存儲 TOC 信息已經有一段時間了，通過 XSL 樣式表可以將該信息轉換為 Html。樣式表還“寫下”鏈接到一個 CSS 和 JScript 文件，因此我們一次就可將 XML 轉換到 DHTML。通過修改單一的 XSL 樣式表，XML 存儲的數據即可輕松改變所有 TOC 的輸出格式。
讓我們來依次看一下這四種文件 — XML、XSL、JScript 及 CSS。
在 XML 存儲 TOC
對于本示例，我們已經創建了一個與 web 開發有關的文章或“主題”的列表。每個 TOPIC 元素都有一個說明性的 TITLE 和 URL。主題按 TOPICS 元素內的 TYPE 進行分組。注意第三個 TOPICS 元素自身包含 TOPICS 元素。webdev.xml 文件頂端的<?xml:stylesheet type="text/xsl" href="list.xsl"?>處理指令會告訴 Internet Explorer 5 當該 XML 文件直接在瀏覽器中打開時，按照此樣式表實施 XML。（我們將在欄目尾端討論如何在服務器上以 asp 實現此項操作。）
以下是 XML 數據：
列表 1：webdev.xml
<?xml version="1.0"?>
<?xml:stylesheet type="text/xsl" href="list.xsl"?>
<TOPICLIST TYPE="Web Dev References">
<TOPICS TYPE="DHTML">
<TOPIC>
<TITLE>Objects</TITLE>
<URL>/workshop/author/dhtml/reference/objects.asp</URL>
</TOPIC>
<TOPIC>
<TITLE>PRoperties</TITLE>
<URL>/workshop/author/dhtml/reference/properties.asp</URL>
</TOPIC>
<TOPIC>
<TITLE>Methods</TITLE>
<URL>/workshop/author/dhtml/reference/methods.asp</URL>
</TOPIC>
<TOPIC>
<TITLE>Events</TITLE>
<URL>/workshop/author/dhtml/reference/events.asp</URL>
</TOPIC>
<TOPIC>
<TITLE>Collections</TITLE>
<URL>/workshop/author/dhtml/reference/collections.asp</URL>
</TOPIC>
</TOPICS>
<TOPICS TYPE="CSS">
<TOPIC>
<TITLE>Attributes</TITLE>
<URL>/workshop/author/css/reference/attributes.asp</URL>
</TOPIC>
<TOPIC>
<TITLE>Length units</TITLE>
<URL>/workshop/author/css/reference/lengthunits.asp</URL>
</TOPIC>
<TOPIC>
<TITLE>Color table</TITLE>
<URL>/workshop/author/dhtml/reference/colors/colors.asp</URL>
</TOPIC>
</TOPICS>
<TOPICS TYPE="XML">
<TOPICS TYPE="XML DOM">
<TOPIC>
<TITLE>Developer's guide</TITLE>
<URL>/xml/XMLGuide/default.asp</URL>
</TOPIC>
<TOPIC>
<TITLE>Objects</TITLE>
<URL>/xml/reference/scriptref/XMLDOM_Objects.asp</URL>
</TOPIC>
</TOPICS>
<TOPICS TYPE="XSL">
<TOPIC>
<TITLE>Developer's guide</TITLE>
<URL>/xml/XSLGuide/default.asp</URL>
</TOPIC>
<TOPIC>
<TITLE>Elements</TITLE>
<URL>/xml/reference/xsl/XSLElements.asp</URL>
</TOPIC>
<TOPIC>
<TITLE>Methods</TITLE>
<URL>/xml/reference/xsl/xslmethods.asp</URL>
</TOPIC>
<TOPIC>
<TITLE>Pattern syntax</TITLE>
<URL>/xml/reference/xsl/XSLPatternSyntax.asp</URL>
</TOPIC>
</TOPICS>
</TOPICS>
</TOPICLIST>
使用一個 XSL 樣式表將 XML 轉換為 HTML
雖然我們可以在代碼中直接對 XML 進行操作，但 XSL 讓我們使用陳述的方法，將 XML 轉換到顯示輸出（在此例中為 HTML），這種方法幾乎不需要代碼（和勞神）。
XSL 使您不必編寫很多涉及分支的代碼 —如果您在 XML 文件中嵌套了復雜的層次，則此效果會特別明顯。在此例中，我們可以使用任意數目的 TOPICS 層次；XSL 均可很好地對此進行處理。
讓我們來看一下 XSL 代碼。
列表 2：list.xsl
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<HTML>
<HEAD>
<TITLE>List <xsl:value-of select="TOPICLIST/@TYPE" /></TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="list.css" />
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript" SRC="list.js"></SCRIPT>
</HEAD>
<BODY>
<BUTTON ONCLICK="ShowAll('UL')">Show All</BUTTON>
<BUTTON ONCLICK="HideAll('UL')">Hide All</BUTTON>
<H1>List <xsl:value-of select="TOPICLIST/@TYPE" /></H1>
<UL><xsl:apply-templates select="TOPICLIST/TOPICS" /></UL>
<P><BUTTON ONCLICK="window.alert(document.body.innerHTML);">View HTML</BUTTON></P>
</BODY>
</HTML>
</xsl:template>
<xsl:template match="TOPICS">
<LI CLASS="clsHasKids"><xsl:value-of select="@TYPE" />
<UL>
<xsl:for-each select="TOPIC">
<LI>
<A TARGET="_new">
<xsl:attribute name="HREF">
http://msdn.microsoft.com<xsl:value-of select="URL" />
</xsl:attribute>
<xsl:value-of select="TITLE" />
</A>
</LI>
</xsl:for-each>
<xsl:if test="TOPICS"><xsl:apply-templates /></xsl:if>
</UL>
</LI>
</xsl:template>
</xsl:stylesheet>
如您所見，我們使用了眾多 HTML 標記符和少量的 "xsl:" 元素。我們明確告訴處理器這是一個 XSL 文件并作為 XSL 文件的開始，然后聲明兩個 xsl:template 元素塊，<xsl:template match="/"> 與 <xsl:template match="TOPICS">。
轉換根目錄
第一個塊 <xsl:template match="/"> 通知處理器從由斜杠指示的 XML 文件的根目錄開始轉換。在本塊中，我們要做兩件事：“寫下”我們的 HTML 輸入的結構和類屬元素，并有條件地掛接到任何其他模板塊中。我們采用 TOPICLIST 元素 TYPE 屬性的值 — Web 開發參考 — 并將其放入 <TITLE> 和 <H1> HTML 元素中；我們還掛接腳本 (list.js) 和樣式表 (list.css) 文件，它們將提供對 DHTML 外觀和行為的處理。我們使用腳本文件中的兩個函數，在頂端繪制了一些供用戶顯示或隱藏所有 TOC 節點的按鈕，在底端添加了另一個按鈕，來查看警報框中的 HTML 源文件。
第一個塊中最有趣的元素是 <xsl:apply-templates select="TOPICLIST/TOPICS" />。它通知處理器轉換 XML 文檔的所有 TOPICS 節點，這些節點是根目錄 TOPICLIST 節點的子節點。
如果您查看一下上面的 XML 文件，您會注意到它是由 TYPE "DHTML"、"CSS" 和 "XML" 的 TOPICS 節點組成的。在這里，XSL 處理器將從此第一個塊開始分支，并在樣式表中搜索另一個 xsl:template 塊，它與我們的 select="TOPICLIST/TOPICS" 屬性相匹配。正如您可能猜到的，這就是我們的第二個塊。
轉換 TOPICLIST
第二個模板塊 <xsl:template match="TOPICS"> 才是樂趣的開始。我們的三個節點的 TOPICS 中的每一個的上下文從第一個塊傳遞到本塊，并在此得以處理。首先，我們打開一個 HTML 列表項元素 (LI)，并賦予其 "clsHasKids" 的 CLASS 屬性，我們后面將在 DHTML 中用到它；然后，我們輸出正在處理的 TOPICS 節點的 TYPE，這是通過 <xsl:value-of select="@TYPE" /> 處理的。為獲取 XSL 中的節點值，使用了 xsl:value-of 元素。如果獲取了某一屬性的值，則屬性名的開始處將會加上一個 "@"。
接下來，我們打開一個 HTML 無序列表 (<UL>)，它將包括當前 TOPICS 元素的所有子元素。使用 xsl:for-each 循環結構，它也可以將每個 TOPIC 子元素上下文更改為該元素（此時為 TOPIC），我們可以創建一個 <LI> 元素，并將其 TITLE 包在一個 A 鏈接中輸出，該鏈接的 HREF 屬性被設為 URL 元素的值。如果要以 XSL 將某一屬性動態添加到一個 HTML 輸出元素中，我們可以使用 xsl:attribute，其 name 屬性設為我們希望創建的 HTML 屬性；正如：<xsl:attribute name="HREF">。我們用服務器名稱（http://msdn.microsoft.com）以及 TOPIC URL, <xsl:value-of select="URL" /> 植入 HREF 值。
好了，我們已經寫出了頂端組中的所有鏈接，但我們還沒有涉及 TOPICS 的子 TOPICS — 主題的嵌套列表。這是一個 XSL 真正表現出色的區域，它可以使用一條語句處理所有的遞歸！關閉進入第二個塊先開始處理 TOPICS 元素時打開的容器 <UL> 及其父級 <LI> 之前, 我們要聲明 <xsl:if test="TOPICS"><xsl:apply-templates /></xsl:if>。通過使用將上下文更改為我們正在測試的元素的 xsl:if 條件語句，我們可以探詢該樹是否存在一個子 TOPICS 節點。如果存在，則 <xsl:apply-templates /> 將通知處理器無論當前上下文是什么都與之匹配。由于我們已詢問了 TOPICS，如果此子節點存在，則再次與這第二個塊相匹配，然后循環返回到其中去。這樣，在第三個 TOPICS 元素 "XML" 的情形中，匹配兩個子 TOPICS 元素，然后重新進入這個 XSL 塊，以便將這些內容輸出到 HTML。相應的嵌套會自動得以保留。很棒，是不是？
請看直接來自轉換的 HTML 輸出。
XSL 代碼就討論到這里。我們已經通過在 XML 文檔內的遞歸生成了一組嵌套的 HTML 列表。既然我們已經得到了該輸出，則讓我們現在來快速瀏覽一下使 TOC 變為動態 .js 和 .css 的代碼。
使用腳本顯示和隱藏列表節點
共有四個函數處理我們的 HTML TOC 中的所有“操作”。ShowAll() 和 HideAll() 只需要一個 tagName 參數，它們在頁面上構建一個該標記（除了第一個）的所有元素的集合，然后將每個元素的 style.display 屬性設定為 "block"（顯示）或 "none"（隱藏）。前兩個函數，document.onclick() 和 GetChildElem() 協同運行，以顯示或隱藏父 <LI> 被單擊的某個 <UL>。實際上我們可能已經在 XSL 中編寫了每個 <LI> 的 ONCLICK 屬性，但像我們的同事 DHTML Dude （英文）一樣，我們喜歡 Internet Explorer 事件排序的抽象、能力和靈活性。
document.onlclick() 將文檔的 onclick() 事件與本函數聯系起來，因此在文檔上的單擊都在此得以處理?，F在，我們只希望在單擊帶有子 <UL> 的 <LI> 時執行某種操作，我們首先檢查用戶是否單擊了類名 為 "clsHasKids" 的元素。然后，執行一些預防性的異常處理后，使用 GetChildElem() 要么返回對某個有效子 <UL> 的引用，要么返回錯誤，如果它不存在的話。最后，我們使用三組 JScript 條件語句將 style.display 設為其當前設置的補充。
列表 3：list.js
function GetChildElem(eSrc,sTagName)
{
var cKids = eSrc.children;
for (var i=0;i<cKids.length;i++)
{
if (sTagName == cKids[i].tagName) return cKids[i];
}
return false;
}
function document.onclick()
{
var eSrc = window.event.srcElement;
if ("clsHasKids" == eSrc.className && (eChild = GetChildElem(eSrc,"UL")))
{
eChild.style.display = ("block" == eChild.style.display ? "none" : "block");
}
}
function ShowAll(sTagName)
{
var cElems = document.all.tags(sTagName);
var iNumElems = cElems.length;
for (var i=1;i<iNumElems;i++) cElems[i].style.display = "block";
}
function HideAll(sTagName)
{
var cElems = document.all.tags(sTagName);
var iNumElems = cElems.length;
for (var i=1;i<iNumElems;i++) cElems[i].style.display = "none";
}
使用 CSS 美化外觀
最后，我們使用一點 CSS 小技巧來美化 TOC 的外觀。
本示例中的 CSS 相當簡單；您可以容易地完成一些更為復雜（也更為漂亮）的工作，如 Web Workshop（英文）中的 TOC。這里的任意結果的樣式規則僅適用于 <UL> 和 <LI> 的。我們將所有是 <LI> 的子元素的 <UL> 元素的最初顯示設為 "none"，將給那些 className 為 "clsHasKids" 的 <LI> 元素賦予“手”形光標，表示單擊它會完成某種操作（這里表示顯示或隱藏子 <UL>), 并調整 <UL> 和 <LI> 的列表樣式類型和頁邊距。
列表 4：list.css
BODY { font-family:verdana; font-size:70%; }
H1 { font-size:120%; font-style:italic; }
UL { margin-left:0px; margin-bottom:5px; }
LI UL { display:none; margin-left:16px; }
LI { font-weight:bold; list-style-type:square; cursor:default; }
LI.clsHasKids { list-style-type:none; cursor:hand; }
A:link, A:visited, A:active { font-weight:normal; color:navy; }
A:hover { text-decoration:none; }
BUTTON { font-family:tahoma; font-size:100%; }
顯示不同的 TOC 視圖
正如上面提到的，在 XML 存儲數據的一個優點就是可以使用不同的樣式表進行轉換，很容易地生成同一數據的不同視圖?？上螺d的示例代碼包括四個附加的 XSL 樣式表（以及腳本和樣式文件）：divs.xsl 可以直觀的層次 DIV 生成 TOPIC，flat.xsl 在相同層次上生成所有 TOPIC，links.xsl 打印某個 TABLE 中的實際 URL，而 list_pp.xs、l 則對 list.xsl 稍作修改，以便生成較規整的 HTML 源代碼。
對所有瀏覽器進行處理：在服務器上進行轉換
示例是基于在客戶機的 Internet Explorer 5 上運行而編寫的，它使用了 XML mime-type。無論怎樣，在跨瀏覽器的情形中，在服務器上轉換 XML 并將其下傳“確實”是很容易的。下面的代碼（它也在可下載的 .zip 文件中）就是針對這一問題的。用戶只需將示例文件放在 Internet Information Server(IIS) 服務器上，裝載 webdev.asp, 并傳遞一個 XSL 文件名作為可選查詢字符串參數；例如，http://<yourmachinename>/codecorner/xml/webdev.asp?xsl=divs.xsl。您還可以裝載 default.asp 頁面，該頁面有一個到各種 XML/XSL 組合的鏈接列表。
列表 5：webdev.asp
<% @LANGUAGE="JScript" %>
<%
var sXml = "webdev.xml"
var sXsl = new String(Request.QueryString("xsl"));
if ("undefined" == sXsl) sXsl = "list.xsl"
var oXmlDoc = Server.CreateObject("MICROSOFT.XMLDOM");
var oXslDoc = Server.CreateObject("MICROSOFT.XMLDOM");
oXmlDoc.async = false;
oXslDoc.async = false;
oXmlDoc.load(Server.MapPath(sXml));
oXslDoc.load(Server.MapPath(sXsl));
Response.Write(oXmlDoc.transformNode(oXslDoc));
%>
（出處：http://www.49028c.com）
