三、客戶端代碼

下面是程序的啟動頁面Tree.htm：

< HTML >
< SCRIPT SRC="Renderer.js" LANGUAGE="JavaScript" >< /SCRIPT >
< HEAD >< /HEAD >
< BODY ID=bodyTree NAME="bodyTree" OnLoad="GetTree();" >
< IFRAME ID=GetData STYLE="display:none" >< /IFRAME >
< /BODY >
< /HTML >
該頁面裝載時將執行Renderer.js中的GetTree函數。HTML代碼中的IFRAME部分實現了客戶端和服務器端的通訊機制。
JavaScript函數GetTree的代碼如下：

function GetTree() {
if (event.type == ＇load＇) {
if (typeof(divTree0)!=＇object＇)
GetData.window.location.href = ＇GetTreeData.asp?Level=0＇;
} else {
try {
objManip = eval(＇divTree＇ + event.srcElement.getAttribute(＇ElementId＇));
if (objManip.style.display == ＇none＇) {
objManip.style.display = ＇＇;
} else {
objManip.style.display = ＇none＇;
}
} catch (e) {
GetData.window.location.href = ＇GetTreeData.asp?Level=＇ + event.srcElement.getAttribute(＇
ElementId＇);
}
event.cancelBubble = true;
}
}
當文檔裝載時，onload事件被觸發，GetTree函數得以執行。函數檢查容器divTree0是否存在，并為IFRAME（ID為
GetData）讀取第一層節點（這些節點的父節點ID為0）。如前所述，所有的節點都必須處理鼠標單擊事件，而且事件句柄都是
GetTree函數。當某個節點（如div1）接收到一個鼠標事件時，程序將執行GetTree函數中的else部分。如果發送該事件的節點已
經讀取了子節點，則程序檢查這些子節點是否已經顯示，然后切換子節點的顯示狀態，從而實現了該層節點的擴展或折疊效果。檢
查子節點是否顯示的if語句封裝在一個try塊內，因此當子節點不存在時，程序將執行catch部分，調用服務器腳本
GetTreeData.asp讀取子節點內容。最后，程序設置event.cancelBubble = true，目的是禁止上一層容器處理該事件。

服務器腳本GetTreeData.asp返回的HTML代碼類如：

< HTML >
< BODY OnLoad="parent.PopulateTree(＇1 0 節點1 2 0 節點2 3 0 節點3 4 0 節點4 ＇);" >
< /BODY >
< /HTML >
可以看到，這里的Onload事件又調用了另外一個JavaScript函數PopulateTree。PopulateTree函數代碼如下：

function PopulateTree(strData) {
var arrSplitData;
var iCnt;
var objTempDiv;
var objMainDiv;

if (strData==＇＇) return;
arrSplitData = strData.split(" ");

objMainDiv = document.createElement(＇DIV＇);
objMainDiv.id = ＇divTree＇ + arrSplitData[1];
objMainDiv.style.cssText = ＇position:relative;left:10px;cursor:hand;＇;
for (iCnt=0;iCnt< arrSplitData.length-1;iCnt+=3) {
objTempDiv = document.createElement(＇< DIV OnClick=＇GetTree()＇ OnSelectStart=＇return false;＇ >
＇);
objTempDiv.id = ＇div＇ + arrSplitData[iCnt];
objTempDiv.innerHTML = arrSplitData[iCnt+2];
objTempDiv.setAttribute(＇ElementId＇,arrSplitData[iCnt]);
objTempDiv.setAttribute(＇ParentElementId＇,arrSplitData[iCnt+1]);
objTempDiv.style.cssText = ＇position:relative;cursor:hand;color:red;width:100px;font-size:x-small;
＇;
objMainDiv.appendChild(objTempDiv);
}
if (arrSplitData[1]==＇0＇)
document.body.appendChild(objMainDiv);
else
eval(＇div＇ + arrSplitData[1]).appendChild(objMainDiv);
}
我們已經知道，PopulateTree函數由onLoad事件調用，它的參數是一個字符串，比如上例中的“1 0 節點1 2 0 節點
2 3 0 節點3 4 0 節點4 ”，它是一個“節點標識 父節點標識 節點文本 ……”的列表。

如果某個節點不含子節點，則該參數是一個空字符串，此時PopulateTree直接返回。如果子節點存在，則可以利用split函
數將子節點列表以數組形式保存。再接下來，就可以創建該層節點的容器，比如divTree0，然后遍歷數組創建各個節點，如
div1,div2……。如果某個節點的父節點ID為0，說明該節點沒有父節點，程序將把容器divTree0加入文檔的BODY；否則當該節點
的父節點ID不為0，則創建與其父節點對應的容器“divTree< < 父節點ID > >”。在創建節點的同時指定了鼠標單擊事件的句柄
GetTree函數。

注：可以修改GetTreeData.asp，使其返回的子節點列表（即PopulateTree的參數）形式為“節點ID 節點文本 ……”，也
就是省略父節點ID，因為任何一組子節點列表其父節點總是相同的。同時，還必須修改PopulateTree函數，使其接受兩個參數，第
一個參數是子節點列表，第二個是父節點ID。當節點數量較多時，采用這種方法有利于減少數據傳輸量，提高效率。

四、其他說明

綜上所述，整個程序的工作過程可以描述為：

瀏覽器讀入文檔，執行GetTree函數。
GetTree調用GetTreeData.asp，讀取第一層節點數據，然后回調PopulateTree函數。
PopulateTree函數生成divTree0以及節點div1，div2，……。
用戶單擊任意一個節點。
GetTree函數檢查 “divTree< < 節點ID > >” 是否已經存在，如存在則切換子節點顯示狀態，否則讀取子節點列表。
GetTreeData.asp返回子節點列表，回調PopulateTree函數。
PopulateTree生成相應的容器“divTree< < 父節點ID > >”，并生成節點“Div< < 節點ID1 > >”，“div< < 節點ID2 >
>”……。
重復步驟4。
運行示例程序步驟如下（默認目錄d:Inetpubwwwroot）：

創建一個目錄，把所有文件拷貝到該目錄。
在Web服務器上發布該目錄。
修改Tree.dsn中的數據庫路徑。
修改GetTreeData.asp中Tree.dsn文件路徑。
用瀏覽器打開Tree.htm。
示例程序中的IFRAME是隱藏的，如果要顯示它，則請刪除IFRAME的屬性“STYLE="display:none"”，此時還可以查看節點
的HTML源代碼 （出處：熱點網絡）