李 祁，李 瑛，陳青華

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

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

1 Ajax概述

1.1 Ajax定義

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

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

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

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

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

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

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

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

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

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

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

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

2.1 服務(wù)器端方法

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

2.2 實(shí)現(xiàn)樹結(jié)構(gòu)的數(shù)據(jù)庫設(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唯一。層次碼來源于單位字典，用來顯示單位層次級別，標(biāo)識碼是系統(tǒng)為了區(qū)別合作單位，記錄合作關(guān)系，并對合作單位信息歸檔管理的標(biāo)識號。

2.3 Ajax工作流程

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

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

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

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

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

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

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

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

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

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

return xmlHttp；

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

}

根據(jù)“合作單位”數(shù)據(jù)表中層次碼構(gòu)建樹狀目錄，調(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查找對應(yīng)記錄ID，并將數(shù)據(jù)綁定于“合作單位代碼列表”的GridView中。

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

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

3 應(yīng)用效果

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

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

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

4 結(jié)束語

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

[1]施偉偉，張蓓.Ajax Web2.0快速入門與項(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)開發(fā)[M].北京：人民郵電出版社，2006.

[6]郜亞麗.基于Ajax動(dòng)態(tài)web樹狀菜單的設(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è)計(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.