基于AJAX的動(dòng)態(tài)樹(shù)狀菜單的設(shè)計(jì)及實(shí)現(xiàn)

李 祁，李 瑛，陳青華

（海軍航空工程學(xué)院 兵器科學(xué)與技術(shù)系，山東 煙臺(tái) 264001）

樹(shù)形菜單在web應(yīng)用系統(tǒng)中十分常見(jiàn)，它可以直觀地描述內(nèi)容層次結(jié)構(gòu)，方便用戶(hù)通過(guò)導(dǎo)航菜單查找結(jié)點(diǎn)內(nèi)容。傳統(tǒng)的樹(shù)形菜單有兩種數(shù)據(jù)加載方式：1）將所有數(shù)據(jù)一次加載，這樣對(duì)數(shù)據(jù)的展開(kāi)、折疊等操作均在客戶(hù)端完成，響應(yīng)速度快，但是存在的問(wèn)題是，當(dāng)數(shù)據(jù)層次復(fù)雜且多半數(shù)據(jù)并沒(méi)有被使用時(shí)會(huì)出現(xiàn)延時(shí)；2）根據(jù)用戶(hù)操作動(dòng)態(tài)加載數(shù)據(jù)，分類(lèi)樹(shù)會(huì)隨著頁(yè)面數(shù)據(jù)操作不斷刷新整體頁(yè)面，造成資源的浪費(fèi)[1]。本文給出了一種比較理想的樹(shù)形菜單實(shí)現(xiàn)方式，數(shù)據(jù)動(dòng)態(tài)加載而不致整個(gè)頁(yè)面刷新，只需更新展開(kāi)結(jié)點(diǎn)部分內(nèi)容即可，提高菜單運(yùn)行效率，節(jié)省網(wǎng)絡(luò)資源。

1 Ajax概述

1.1 Ajax定義

Ajax是異步JavaScript和XML的簡(jiǎn)稱(chēng)。當(dāng)用戶(hù)瀏覽器在執(zhí)行任務(wù)時(shí)即裝載了一個(gè)用JavaScript語(yǔ)言編寫(xiě)的Ajax引擎，該引擎位于一個(gè)隱藏框架中，負(fù)責(zé)用戶(hù)界面與Web服務(wù)器之間的交互。通過(guò)用JavaScript調(diào)用Ajax引擎來(lái)產(chǎn)生一個(gè)Http的用戶(hù)請(qǐng)求，頁(yè)面導(dǎo)航、數(shù)據(jù)驗(yàn)證等操作不需要重新加載頁(yè)面。從本質(zhì)上說(shuō)，Ajax是應(yīng)用于客戶(hù)端的幾種技術(shù)的結(jié)合，主 要 包 括 ：JavaScript、XHTML 和 CSS、DOM、XML 和 XSTL、XMLHttpRequest等技術(shù)。其中，主要技術(shù)功能如下[2]：

1）JavaScript代碼 一種基于對(duì)象和事件驅(qū)動(dòng)并具有較高安全性能的腳本語(yǔ)言。是運(yùn)行Ajax應(yīng)用程序的核心代碼，將其他技術(shù)綁定在一起，幫助改進(jìn)與服務(wù)器應(yīng)用程序的通信。

2）XMLHttpRequest對(duì)象 是Ajax異步處理的核心。使用該對(duì)象可以使用異步方式將數(shù)據(jù)傳遞給服務(wù)器，并從服務(wù)器中獲取返回結(jié)果，該處理過(guò)程實(shí)現(xiàn)了真正意義上的無(wú)刷新頁(yè)面的功能，從而減輕服務(wù)器負(fù)擔(dān)和帶寬壓力，提高了響應(yīng)速度。

3）文檔對(duì)象模型DOM 是提供給HTML和XML使用的一組API，用于處理HTML結(jié)構(gòu)和服務(wù)器返回的XML。

4）XML 可擴(kuò)展標(biāo)記語(yǔ)言，用來(lái)規(guī)范定義結(jié)構(gòu)化數(shù)據(jù)，是網(wǎng)絡(luò)傳輸數(shù)據(jù)和文檔的統(tǒng)一標(biāo)準(zhǔn)，在應(yīng)用Ajax技術(shù)時(shí)，XMLHttpRequest對(duì)象可以選擇使用XML作為與服務(wù)器端通信數(shù)據(jù)格式。

5）CSS層疊樣式表 為Web頁(yè)面元素提供一種可重用的可視化樣式的定義方法。方便統(tǒng)一修改用戶(hù)的界面樣式。

1.2 Ajax技術(shù)實(shí)現(xiàn)樹(shù)狀菜單工作原理

由于傳統(tǒng)的Web應(yīng)用采用同步交互過(guò)程，都要經(jīng)過(guò)“請(qǐng)求-處理-響應(yīng)-刷新”過(guò)程[3]。當(dāng)服務(wù)器正在處理樹(shù)狀菜單操作事件時(shí)，用戶(hù)一直處于等待狀態(tài)亦或隨著操作事件被處理，頁(yè)面不斷被刷新，一方面影響了用戶(hù)人性化Web的體驗(yàn)，另一方面，完整的頁(yè)面?zhèn)鬏敃?huì)加重網(wǎng)絡(luò)負(fù)荷和服務(wù)器的工作量。

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

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

2 樹(shù)狀菜單的設(shè)計(jì)及實(shí)現(xiàn)

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

2.1 服務(wù)器端方法

服務(wù)器端創(chuàng)建樹(shù)服務(wù)，定義方法createTreeFromTb（tableName，IDFieldName，ValueFieldName，depth，condition），功能是用戶(hù)根據(jù)數(shù)據(jù)來(lái)源表的數(shù)據(jù)自定義創(chuàng)建樹(shù)。參數(shù)tableName生成樹(shù)的表名，IDFieldName編碼字段名，ValueFieldName值字段名，depth樹(shù)的繁茂度（最小值為1，越大越繁茂，最大值為編碼字段的編碼結(jié)構(gòu)段數(shù)，-1也代表最大值），condition查詢(xún)條件，可以為空。以字符串形式成功返回xml形式的字符串流，失敗返回錯(cuò)誤異常信息。

2.2 實(shí)現(xiàn)樹(shù)結(jié)構(gòu)的數(shù)據(jù)庫(kù)設(shè)計(jì)

合作單位數(shù)據(jù)表結(jié)構(gòu)如表1所示。

表1 合作單位數(shù)據(jù)表結(jié)構(gòu)Tab.1 Data table structure of cooperation institutions

其中，“ID”為系統(tǒng)自動(dòng)分配的ID，每條記錄ID唯一。層次碼來(lái)源于單位字典，用來(lái)顯示單位層次級(jí)別，標(biāo)識(shí)碼是系統(tǒng)為了區(qū)別合作單位，記錄合作關(guān)系，并對(duì)合作單位信息歸檔管理的標(biāo)識(shí)號(hào)。

2.3 Ajax工作流程

利用Ajax實(shí)現(xiàn)樹(shù)形目錄的業(yè)務(wù)邏輯如下：

1）前臺(tái)瀏覽器捕捉用戶(hù)操作事件，如果要展開(kāi)節(jié)點(diǎn)則通過(guò)XMLHttp異步調(diào)用服務(wù)器端服務(wù)，并將所要展開(kāi)樹(shù)的相關(guān)參數(shù)傳遞到服務(wù)器端。

2）后臺(tái)服務(wù)器端根據(jù)客戶(hù)端傳送的參數(shù)求取所有子節(jié)點(diǎn)參數(shù)，包括相關(guān)聯(lián)的跨表數(shù)據(jù)參數(shù)提取以及建立葉子節(jié)點(diǎn)信息。

3）將獲取數(shù)據(jù)通過(guò)response寫(xiě)回去，客戶(hù)端接受服務(wù)器端數(shù)據(jù)，將子節(jié)點(diǎn)參數(shù)添加顯示到展開(kāi)節(jié)點(diǎn)下面。

客戶(hù)端主要工作是處理服務(wù)器返回的結(jié)果，同時(shí)更新頁(yè)面。為了滿(mǎn)足功能要求該模塊使用FrameSet框架顯示頁(yè)面區(qū)域，主要為3個(gè)小視窗。左端以樹(shù)狀菜單形式顯示所有合作單位，右邊分為上下兩部分，上半部分根據(jù)設(shè)置檢索條件進(jìn)行單位檢索，下半部分顯示單位檢索結(jié)果。左端樹(shù)狀菜單顯示區(qū)域增加2個(gè)＜div＞對(duì)象，分別用來(lái)顯示標(biāo)題和樹(shù)狀目錄，樹(shù)狀目錄＜div＞中通過(guò)JavaScript腳本實(shí)現(xiàn)目錄的動(dòng)態(tài)加載。

在HzdwGL_List.aspx（合作單位管理）頁(yè)面中顯示樹(shù)狀目錄使用TreeView控件，由于該控件的初始化比較復(fù)雜，因此定義類(lèi)tree專(zhuān)門(mén)處理TreeView控件，其中類(lèi)tree中定義方法創(chuàng)建樹(shù)、創(chuàng)建樹(shù)的子節(jié)點(diǎn)等。當(dāng)單擊TreeView控件圖標(biāo)或者節(jié)點(diǎn)標(biāo)題時(shí)，需要顯示當(dāng)前選擇節(jié)點(diǎn)的信息，該事件定義為T(mén)reeView1_NodeSelected。同時(shí)在aspx頁(yè)面定義CSS可視化樣式，用于設(shè)計(jì)樹(shù)形菜單及頁(yè)面外觀[5]。

具體實(shí)現(xiàn)過(guò)程：

1）客戶(hù)端創(chuàng)建XMLHttp對(duì)象調(diào)用服務(wù)器，并發(fā)送Http請(qǐng)求。主要代碼如下：

If （window.XMLHttpRequest） //根據(jù) XMLHttpRequest對(duì)象是否存在使用不同創(chuàng)建方式

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

return xmlHttp；

2）定義對(duì)象，調(diào)用樹(shù)服務(wù) 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（'構(gòu)造樹(shù)節(jié)點(diǎn)時(shí)失敗!'）；"， true）；

}

根據(jù)“合作單位”數(shù)據(jù)表中層次碼構(gòu)建樹(shù)狀目錄，調(diào)用服務(wù)獲取該表XML文件，從根目錄篩選XML文件中數(shù)據(jù)，根據(jù)篩選結(jié)果構(gòu)建目錄節(jié)點(diǎn)，并將數(shù)據(jù)綁定于TreeView控件。TreeView1_NodeSelected事件實(shí)現(xiàn)代碼如下：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（）；

}

節(jié)點(diǎn)選擇依據(jù)合作單位的層次碼ccm查找對(duì)應(yīng)記錄ID，并將數(shù)據(jù)綁定于“合作單位代碼列表”的GridView中。

3）客戶(hù)端通過(guò)XMLHttp.responseXML接受服務(wù)器端返回的數(shù)據(jù)并用DOM解析，從而更新HTML頁(yè)面中相應(yīng)位置的數(shù)據(jù)。

4）針對(duì)數(shù)據(jù)量大一次提取完整樹(shù)結(jié)構(gòu)時(shí)消耗資源多，響應(yīng)時(shí)間長(zhǎng)的問(wèn)題，也采用動(dòng)態(tài)加載方式。每次執(zhí)行某一節(jié)點(diǎn)展開(kāi)操作時(shí)，先判斷是否已經(jīng)加載此節(jié)點(diǎn)數(shù)據(jù)，如果已加載則不需發(fā)送Http請(qǐng)求，直接獲取數(shù)據(jù)，執(zhí)行下一步操作；若未加載則通過(guò)Ajax的 XMLHTTP組件XMLHttpRequests對(duì)象異步發(fā)送請(qǐng)求，連接服務(wù)器獲取節(jié)點(diǎn)數(shù)據(jù)[7]。

3 應(yīng)用效果

在該大型企業(yè)管理系統(tǒng)中，樹(shù)形菜單結(jié)構(gòu)在多個(gè)頁(yè)面使用。如本例中合作單位管理模塊中，用戶(hù)在客戶(hù)端頁(yè)面選取樹(shù)節(jié)點(diǎn)則顯示相關(guān)單位信息，后臺(tái)數(shù)據(jù)庫(kù)數(shù)據(jù)關(guān)聯(lián)關(guān)系為層次碼，如0012為“地方院?！睂哟未a，在該節(jié)點(diǎn)下以0012開(kāi)始編號(hào)的層次碼均屬于下一級(jí)結(jié)點(diǎn)，關(guān)聯(lián)關(guān)系顯示為樹(shù)狀目錄并在用戶(hù)選取節(jié)點(diǎn)時(shí)能夠無(wú)刷新動(dòng)態(tài)顯示。合作單位管理模塊實(shí)現(xiàn)效果如圖2所示。

圖2 合作單位樹(shù)狀菜單實(shí)現(xiàn)效果圖Fig.2 The achieved rendering of tree menu

根據(jù)左列樹(shù)狀菜單，選取結(jié)點(diǎn)，右側(cè)下半部分列表顯示結(jié)點(diǎn)對(duì)應(yīng)所有數(shù)據(jù)，并可進(jìn)行添加信息、歸檔、刪除以及撤銷(xiāo)歸檔操作。選取某條記錄在對(duì)應(yīng)行尾可以修改數(shù)據(jù)或查看該條記錄明細(xì)。

4 結(jié)束語(yǔ)

本文研究了Ajax技術(shù)在客戶(hù)端樹(shù)形菜單中的應(yīng)用，在底層數(shù)據(jù)庫(kù)基礎(chǔ)上，利用Web Service接口創(chuàng)建服務(wù)，提供客戶(hù)端樹(shù)節(jié)點(diǎn)的初始化、數(shù)據(jù)層次關(guān)聯(lián)等服務(wù)，在表現(xiàn)層頁(yè)面處理時(shí)通過(guò)XMLHttp異步調(diào)用服務(wù)器端服務(wù)，并將所要展開(kāi)樹(shù)的相關(guān)參數(shù)傳遞到服務(wù)器端，客戶(hù)端調(diào)用服務(wù)器端服務(wù)處理相關(guān)參數(shù)，并獲取返回?cái)?shù)據(jù)將子節(jié)點(diǎn)參數(shù)添加顯示到展開(kāi)節(jié)點(diǎn)下面，實(shí)現(xiàn)了樹(shù)形菜單的無(wú)刷新動(dòng)態(tài)加載數(shù)據(jù)，該方法具有通用性和擴(kuò)展性。實(shí)現(xiàn)過(guò)程中，合理的數(shù)據(jù)庫(kù)設(shè)計(jì)與服務(wù)端服務(wù)的編寫(xiě)都起到了有效的支撐作用。從應(yīng)用結(jié)果來(lái)看，滿(mǎn)足頁(yè)面人性化設(shè)計(jì)要求，并有效減輕服務(wù)器負(fù)擔(dān)，提高了系統(tǒng)性能。

[1]施偉偉，張蓓.Ajax Web2.0快速入門(mén)與項(xiàng)目實(shí)踐（.net）[M].北京：人民郵電出版社，2007：89-97.

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

[3]許川佩，張民，張婧.基于Ajax的J2EE安全應(yīng)用框架[J].計(jì)算機(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網(wǎng)絡(luò)應(yīng)用系統(tǒng)開(kāi)發(fā)[M].北京：人民郵電出版社，2006.

[6]郜亞麗.基于Ajax動(dòng)態(tài)web樹(shù)狀菜單的設(shè)計(jì)與實(shí)現(xiàn)[J].制造業(yè)自動(dòng)化，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課件動(dòng)態(tài)目錄樹(shù)的設(shè)計(jì)與實(shí)現(xiàn)[J].海南師范大學(xué)學(xué)報(bào)自然科學(xué)版，2010，23（3）：259-263.WU Wei-xin，F(xiàn)ENG 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.