基于AJAX的動態樹狀菜單的設計及實現

李 祁，李 瑛，陳青華

（海軍航空工程學院 兵器科學與技術系，山東 煙臺 264001）

樹形菜單在web應用系統中十分常見，它可以直觀地描述內容層次結構，方便用戶通過導航菜單查找結點內容。傳統的樹形菜單有兩種數據加載方式：1）將所有數據一次加載，這樣對數據的展開、折疊等操作均在客戶端完成，響應速度快，但是存在的問題是，當數據層次復雜且多半數據并沒有被使用時會出現延時；2）根據用戶操作動態加載數據，分類樹會隨著頁面數據操作不斷刷新整體頁面，造成資源的浪費[1]。本文給出了一種比較理想的樹形菜單實現方式，數據動態加載而不致整個頁面刷新，只需更新展開結點部分內容即可，提高菜單運行效率，節省網絡資源。

1 Ajax概述

1.1 Ajax定義

Ajax是異步JavaScript和XML的簡稱。當用戶瀏覽器在執行任務時即裝載了一個用JavaScript語言編寫的Ajax引擎，該引擎位于一個隱藏框架中，負責用戶界面與Web服務器之間的交互。通過用JavaScript調用Ajax引擎來產生一個Http的用戶請求，頁面導航、數據驗證等操作不需要重新加載頁面。從本質上說，Ajax是應用于客戶端的幾種技術的結合，主 要 包 括 ：JavaScript、XHTML 和 CSS、DOM、XML 和 XSTL、XMLHttpRequest等技術。其中，主要技術功能如下[2]：

1）JavaScript代碼 一種基于對象和事件驅動并具有較高安全性能的腳本語言。是運行Ajax應用程序的核心代碼，將其他技術綁定在一起，幫助改進與服務器應用程序的通信。

2）XMLHttpRequest對象 是Ajax異步處理的核心。使用該對象可以使用異步方式將數據傳遞給服務器，并從服務器中獲取返回結果，該處理過程實現了真正意義上的無刷新頁面的功能，從而減輕服務器負擔和帶寬壓力，提高了響應速度。

3）文檔對象模型DOM 是提供給HTML和XML使用的一組API，用于處理HTML結構和服務器返回的XML。

4）XML 可擴展標記語言，用來規范定義結構化數據，是網絡傳輸數據和文檔的統一標準，在應用Ajax技術時，XMLHttpRequest對象可以選擇使用XML作為與服務器端通信數據格式。

5）CSS層疊樣式表 為Web頁面元素提供一種可重用的可視化樣式的定義方法。方便統一修改用戶的界面樣式。

1.2 Ajax技術實現樹狀菜單工作原理

由于傳統的Web應用采用同步交互過程，都要經過“請求-處理-響應-刷新”過程[3]。當服務器正在處理樹狀菜單操作事件時，用戶一直處于等待狀態亦或隨著操作事件被處理，頁面不斷被刷新，一方面影響了用戶人性化Web的體驗，另一方面，完整的頁面傳輸會加重網絡負荷和服務器的工作量。

基于Ajax技術的樹形菜單采用異步交互方式，有效地解決了以上問題，其工作原理：當客戶端發送請求后，由服務器處理請求并返回該菜單所有數據，當展開某一菜單時再發送請求，服務器端接受瀏覽器端的請求并處理后，只返回該菜單下的子菜單數據，利用JavaScript將數據顯示到客戶端，所有數據獲取和處理都在后臺完成[4]，工作原理如圖1所示。

圖1 基于Ajax技術的樹形菜單工作原理Fig.1 Treelike menu works based on Ajax

2 樹狀菜單的設計及實現

本文以某大型企業管理系統中合作單位管理模塊為例，通過樹狀菜單顯示該企業的兄弟合作單位列表。該系統建立了基于Web Service的數據服務接口，保證了系統安全的數據交換和接口調用，在VS2008平臺上實現客戶端頁面架構，數據庫使用Oracle 11，服務器端在MyEclipse6.5環境下，利用Java語言編寫服務，構建樹服務tree_CXFService，主要功能是：1）為web端的AJAX樹控件提供xml文件格式的樹型結構，樹存放于服務端，文件名定義為treeName.tree.xml；2）為web端的TreeView控件提供格式為xml字符串流格式的樹型結構。

2.1 服務器端方法

服務器端創建樹服務，定義方法createTreeFromTb（tableName，IDFieldName，ValueFieldName，depth，condition），功能是用戶根據數據來源表的數據自定義創建樹。參數tableName生成樹的表名，IDFieldName編碼字段名，ValueFieldName值字段名，depth樹的繁茂度（最小值為1，越大越繁茂，最大值為編碼字段的編碼結構段數，-1也代表最大值），condition查詢條件，可以為空。以字符串形式成功返回xml形式的字符串流，失敗返回錯誤異常信息。

2.2 實現樹結構的數據庫設計

合作單位數據表結構如表1所示。

表1 合作單位數據表結構Tab.1 Data table structure of cooperation institutions

其中，“ID”為系統自動分配的ID，每條記錄ID唯一。層次碼來源于單位字典，用來顯示單位層次級別，標識碼是系統為了區別合作單位，記錄合作關系，并對合作單位信息歸檔管理的標識號。

2.3 Ajax工作流程

利用Ajax實現樹形目錄的業務邏輯如下：

1）前臺瀏覽器捕捉用戶操作事件，如果要展開節點則通過XMLHttp異步調用服務器端服務，并將所要展開樹的相關參數傳遞到服務器端。

2）后臺服務器端根據客戶端傳送的參數求取所有子節點參數，包括相關聯的跨表數據參數提取以及建立葉子節點信息。

3）將獲取數據通過response寫回去，客戶端接受服務器端數據，將子節點參數添加顯示到展開節點下面。

客戶端主要工作是處理服務器返回的結果，同時更新頁面。為了滿足功能要求該模塊使用FrameSet框架顯示頁面區域，主要為3個小視窗。左端以樹狀菜單形式顯示所有合作單位，右邊分為上下兩部分，上半部分根據設置檢索條件進行單位檢索，下半部分顯示單位檢索結果。左端樹狀菜單顯示區域增加2個＜div＞對象，分別用來顯示標題和樹狀目錄，樹狀目錄＜div＞中通過JavaScript腳本實現目錄的動態加載。

在HzdwGL_List.aspx（合作單位管理）頁面中顯示樹狀目錄使用TreeView控件，由于該控件的初始化比較復雜，因此定義類tree專門處理TreeView控件，其中類tree中定義方法創建樹、創建樹的子節點等。當單擊TreeView控件圖標或者節點標題時，需要顯示當前選擇節點的信息，該事件定義為TreeView1_NodeSelected。同時在aspx頁面定義CSS可視化樣式，用于設計樹形菜單及頁面外觀[5]。

具體實現過程：

1）客戶端創建XMLHttp對象調用服務器，并發送Http請求。主要代碼如下：

If （window.XMLHttpRequest） //根據 XMLHttpRequest對象是否存在使用不同創建方式

{xmlHttp=new XMLHttpRequest；}else{xmlHttp=new ActiveXObject（“Microsoft.XMLHTTP”）；}

return xmlHttp；

2）定義對象，調用樹服務 treeSrv.tree_CXFService tree=new treeSrv.tree_CXFService（）；

其中treeSrv是Web引用名。主要程序代碼如下：

string TreeXml=""；

try{

TreeXml=tree.createTreeFromTb （"HzdwTable"， c， "ccm"，"hzdw"， 3， ""）；

StringReader zbsr=new StringReader（TreeXml）；

doc=new XPathDocument（zbsr）；

nav=doc.CreateNavigator（）；

XPathNavigator nod=nav.SelectSingleNode（"http://root"）；

treestr=nod.OuterXml；

XmlDocument xld=new XmlDocument（）；

xld.LoadXml（treestr）；

TreeView1.DataSource=xld；

TreeView1.DataBind（）；}

catch （Exception ex）

{

ScriptManager.RegisterStartupScript（this， this.GetType（）， "提

示"， "alert（'構造樹節點時失敗!'）；"， true）；

}

根據“合作單位”數據表中層次碼構建樹狀目錄，調用服務獲取該表XML文件，從根目錄篩選XML文件中數據，根據篩選結果構建目錄節點，并將數據綁定于TreeView控件。TreeView1_NodeSelected事件實現代碼如下：protected void TreeView1_NodeSelected

（object sender， ComponentArt.Web.UI.TreeViewNodeEventArgs e）{

ccm=TreeView1.SelectedNode.ID.ToString（）；

ScriptManager.RegisterStartupScript （this.UpdatePanel1， this.GetType （）， "startup"， "parent.document.getElementsByName（'MainFrame'）[0].src='HzdwGL_List.aspx?ccm='"+TreeView1.SelectedNode.Value.ToString（） +"'"， true）；

BindGridHzdw（）；

}

節點選擇依據合作單位的層次碼ccm查找對應記錄ID，并將數據綁定于“合作單位代碼列表”的GridView中。

3）客戶端通過XMLHttp.responseXML接受服務器端返回的數據并用DOM解析，從而更新HTML頁面中相應位置的數據。

4）針對數據量大一次提取完整樹結構時消耗資源多，響應時間長的問題，也采用動態加載方式。每次執行某一節點展開操作時，先判斷是否已經加載此節點數據，如果已加載則不需發送Http請求，直接獲取數據，執行下一步操作；若未加載則通過Ajax的 XMLHTTP組件XMLHttpRequests對象異步發送請求，連接服務器獲取節點數據[7]。

3 應用效果

在該大型企業管理系統中，樹形菜單結構在多個頁面使用。如本例中合作單位管理模塊中，用戶在客戶端頁面選取樹節點則顯示相關單位信息，后臺數據庫數據關聯關系為層次碼，如0012為“地方院校”層次碼，在該節點下以0012開始編號的層次碼均屬于下一級結點，關聯關系顯示為樹狀目錄并在用戶選取節點時能夠無刷新動態顯示。合作單位管理模塊實現效果如圖2所示。

圖2 合作單位樹狀菜單實現效果圖Fig.2 The achieved rendering of tree menu

根據左列樹狀菜單，選取結點，右側下半部分列表顯示結點對應所有數據，并可進行添加信息、歸檔、刪除以及撤銷歸檔操作。選取某條記錄在對應行尾可以修改數據或查看該條記錄明細。

4 結束語

本文研究了Ajax技術在客戶端樹形菜單中的應用，在底層數據庫基礎上，利用Web Service接口創建服務，提供客戶端樹節點的初始化、數據層次關聯等服務，在表現層頁面處理時通過XMLHttp異步調用服務器端服務，并將所要展開樹的相關參數傳遞到服務器端，客戶端調用服務器端服務處理相關參數，并獲取返回數據將子節點參數添加顯示到展開節點下面，實現了樹形菜單的無刷新動態加載數據，該方法具有通用性和擴展性。實現過程中，合理的數據庫設計與服務端服務的編寫都起到了有效的支撐作用。從應用結果來看，滿足頁面人性化設計要求，并有效減輕服務器負擔，提高了系統性能。

[1]施偉偉，張蓓.Ajax Web2.0快速入門與項目實踐（.net）[M].北京：人民郵電出版社，2007：89-97.

[2]陳悅.面向Ajax框架web服務的攻擊和安全防御[D].上海：上海交通大學，2006：4-9.

[3]許川佩，張民，張婧.基于Ajax的J2EE安全應用框架[J].計算機工程，2010，36（4）：110-111.XU Chuan-pei，ZHANG Min，ZHANG Jing.Ajax-based J2EE security application framework[J].Computer Engineering，2010，36（4）：110-111.

[4]Liberty J，Hurwitz D.Programming ASP.NET 3rd edition[M].Beijing:Publishing House of Electronics Industry，2008:60-80.

[5]馬軍.精通ASP.NET2.0網絡應用系統開發[M].北京：人民郵電出版社，2006.

[6]郜亞麗.基于Ajax動態web樹狀菜單的設計與實現[J].制造業自動化，2010，33（12）：178-180.GAO Ya-li.The work principle of WEB treelike dynamic menu obtaining by using ajax[J].Manufacturing Automation，2010，33（12）：178-180.

[7]吳偉信，馮義東.基于AJAX的Web課件動態目錄樹的設計與實現[J].海南師范大學學報自然科學版，2010，23（3）：259-263.WU Wei-xin，FENG Yi-dong Development of dynamic tree for the web courseware based on AJAX[J].Journal of Hainan Normal University：Natural Science，2010，23（3）：259-263.