指令碼|非同步 三、用戶端代碼
下面是程式的啟動頁面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|”，它是一個“節點標識|父節點標識|節點文本|……”的列表。
如果某個節點不含子節點，則該參數是一個Null 字元串，此時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原始碼
