郜亞麗

GAO Ya-li

（濟(jì)源職業(yè)技術(shù)學(xué)院，濟(jì)源 454650）

0 引言

樹型結(jié)構(gòu)是一類應(yīng)用非常廣泛的數(shù)據(jù)結(jié)構(gòu)。隨著Internet的發(fā)展，樹型結(jié)構(gòu)的應(yīng)用也越來(lái)越廣泛。如操作系統(tǒng)的文件目錄就是一個(gè)典型的樹結(jié)構(gòu)。樹狀菜單是為了方便查找每個(gè)結(jié)點(diǎn)而實(shí)現(xiàn)的導(dǎo)航菜單，它通過(guò)展開和折疊來(lái)進(jìn)行瀏覽用戶所需要的內(nèi)容。目前，在互聯(lián)網(wǎng)上廣泛存在、應(yīng)用的樹型結(jié)構(gòu)一般有兩種：靜態(tài)和動(dòng)態(tài)結(jié)構(gòu)。靜態(tài)結(jié)構(gòu)實(shí)現(xiàn)簡(jiǎn)單，缺點(diǎn)是靜態(tài)導(dǎo)致不能改變樹的結(jié)構(gòu)和內(nèi)容，無(wú)法反映樹的節(jié)點(diǎn)信息的變化；而動(dòng)態(tài)構(gòu)造樹，雖然可以動(dòng)態(tài)增加、刪除、更新節(jié)點(diǎn)信息，但是每交互一次，就要刷新整個(gè)頁(yè)面一次，從而浪費(fèi)了大量的網(wǎng)絡(luò)資源，不適合于菜單數(shù)據(jù)量大的場(chǎng)合。本文提出了一種基于Ajax技術(shù)的動(dòng)態(tài)獲取樹狀菜單的方法，大大提高了菜單的運(yùn)行性能，節(jié)約了網(wǎng)絡(luò)資源。

1 Ajax概述

1.1 Ajax的定義

Ajax（Asynchronous JavaScript and xML）是Web2.0網(wǎng)站開發(fā)中的熱門應(yīng)用技術(shù)，其基本表現(xiàn)是在不刷新整個(gè)頁(yè)面的情況下，實(shí)現(xiàn)對(duì)頁(yè)面局部的更新。Ajax并不是一項(xiàng)新的技術(shù)，實(shí)際上是多種技術(shù)的綜合，Ajax包括Javascript、XHTML和CSS、DOM、XML和 XSTL、XMLHttpRequest等技術(shù)[1]。其中：使用XHTML和CSS實(shí)現(xiàn)標(biāo)準(zhǔn)化的呈現(xiàn)界面；使用DOM實(shí)現(xiàn)動(dòng)態(tài)的顯示和交互；使用XML和XSTL進(jìn)行數(shù)據(jù)交換與處理；使用XMLHttpRequest對(duì)象實(shí)現(xiàn)與服務(wù)器的異步數(shù)據(jù)通信，也是Ajax中最重要的部分；使用Javascript將 XHTML、DOM、XML、XMLHttpRequest綁 定和處理所有數(shù)據(jù)。

1.2 Ajax的特點(diǎn)

Ajax具有減輕服務(wù)器的負(fù)擔(dān)、不用刷新整個(gè)頁(yè)面實(shí)時(shí)更新局部?jī)?nèi)容，減少用戶心理和實(shí)際的等待時(shí)間、帶來(lái)更好的用戶體驗(yàn)、可以調(diào)用外部數(shù)據(jù)、基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序、具有廣泛的兼容性和彈性，對(duì)各種Web應(yīng)用解決方案都能夠適用、進(jìn)一步促進(jìn)頁(yè)面呈現(xiàn)和數(shù)據(jù)的分離等特點(diǎn)，其中Ajax的一個(gè)最大特點(diǎn)就是不刷新整個(gè)頁(yè)面便可向服務(wù)器傳輸或讀寫數(shù)據(jù)[2]。

2 使用Ajax技術(shù)實(shí)現(xiàn)樹狀菜單的優(yōu)點(diǎn)

在傳統(tǒng)的Web 應(yīng)用程序中，動(dòng)態(tài)獲取數(shù)據(jù)的樹狀菜單都是采用請(qǐng)求→刷新→顯示模式。即每當(dāng)用戶通過(guò)單擊父結(jié)點(diǎn)按鈕或鏈接向服務(wù)器發(fā)送一個(gè)請(qǐng)求時(shí)，都由服務(wù)器接收請(qǐng)求處理，處理完畢后服務(wù)器將信息發(fā)送至瀏覽器端進(jìn)行顯示[3]。而在服務(wù)器處理的時(shí)間里，瀏覽器端處于Loading狀態(tài)，顯示為空白和無(wú)響應(yīng)狀態(tài)，用戶能做的事情只有等待。由于每次對(duì)菜單的操作瀏覽器端都要與服務(wù)器端進(jìn)行交互，導(dǎo)致了服務(wù)器端數(shù)據(jù)量的增大。不適合菜單數(shù)據(jù)量大的場(chǎng)合。

使用Ajax技術(shù)，可以將瀏覽器端和服務(wù)器端結(jié)合起來(lái)，當(dāng)客戶端提交請(qǐng)求后，并不將所有的數(shù)據(jù)取回，而是返回該菜單的頂級(jí)菜單。當(dāng)展開某一菜單時(shí)再發(fā)送請(qǐng)求，服務(wù)器端接收瀏覽器端的請(qǐng)求并處理完畢后，只返回該菜單下的子的菜單，再利用JavaScript將數(shù)據(jù)顯示到客戶端，所有數(shù)據(jù)獲取和處理工作都在后臺(tái)完成。

基于Ajax技術(shù)的實(shí)現(xiàn)，用戶既能夠在展開菜單時(shí)及時(shí)獲得最新的數(shù)據(jù)，同時(shí)又避免服務(wù)器端頻繁處理數(shù)據(jù)而影響系統(tǒng)的性能[4]。圖1所示為基于Ajax技術(shù)實(shí)現(xiàn)樹狀菜單時(shí)，瀏覽器與服務(wù)器相互通信的整個(gè)過(guò)程圖。

圖1 基于Ajax的實(shí)現(xiàn)

3 設(shè)計(jì)樹狀菜單的樹據(jù)結(jié)構(gòu)

樹由多個(gè)結(jié)點(diǎn)組成，每個(gè)結(jié)點(diǎn)具有通用的性質(zhì)，把通用的性質(zhì)抽象出來(lái)作為樹結(jié)點(diǎn)的接口類。以圖2為例，“機(jī)電工程學(xué)院”只是樹中的一個(gè)結(jié)點(diǎn)，該結(jié)點(diǎn)其下有子結(jié)點(diǎn)，且該結(jié)點(diǎn)能夠展開。一個(gè)結(jié)點(diǎn)主要有以下幾個(gè)屬性：名稱，用于顯示該結(jié)點(diǎn)的名稱；是否可以展開；該結(jié)點(diǎn)下所有的子結(jié)點(diǎn)；以及該結(jié)點(diǎn)的唯一標(biāo)識(shí)。依據(jù)結(jié)點(diǎn)的屬性，可以設(shè)計(jì)出一個(gè)樹結(jié)點(diǎn)的接口類TreeviewElement如下：

圖2 樹菜單實(shí)例圖

4 樹狀菜單的實(shí)現(xiàn)

4.1 瀏覽器端的設(shè)計(jì)

類似Windows資源管理器的文件夾模式。對(duì)于每個(gè)節(jié)點(diǎn)的DHTML 代碼，需要包含節(jié)點(diǎn)的位置、前導(dǎo)圖片、樣式、針對(duì)該節(jié)點(diǎn)的其他操作等。同時(shí)為了節(jié)點(diǎn)顯示的連貫性，還需一些前導(dǎo)圖片。

對(duì)于樹的非葉子節(jié)點(diǎn)，圖片和節(jié)點(diǎn)信息等，采用一個(gè)DIV（ division）容器包含。DIV容器是DHTML 的基礎(chǔ)，使用它可以通過(guò)腳本程序?qū)ζ鋵傩赃M(jìn)行操作，如設(shè)置其style 樣式的display 屬性來(lái)控制子節(jié)點(diǎn)的展開和隱藏。節(jié)點(diǎn)的位置、前導(dǎo)圖片、樣式、針對(duì)該節(jié)點(diǎn)的其他的操作等都放入容器中，關(guān)鍵代碼如下：

4.2 動(dòng)態(tài)加載技術(shù)的應(yīng)用

如果一次性獲取完整的先序樹，構(gòu)造成xml提供給JavaScript解析，數(shù)據(jù)量越大，消耗的資源越多，客戶端響應(yīng)延遲時(shí)間就越長(zhǎng)，因此對(duì)于大數(shù)據(jù)量的樹，采用動(dòng)態(tài)加載方式，即每次單擊“+”圖片時(shí)，判斷是否已加載子節(jié)點(diǎn)數(shù)據(jù)，如果未加載則通過(guò)Ajax的XMLHTTP組件XMLHTTPRequest對(duì)象異步發(fā)送請(qǐng)求獲取節(jié)點(diǎn)數(shù)據(jù)。相關(guān)JavaScript 代碼如下：

5 結(jié)論

本方案支持無(wú)刷新動(dòng)態(tài)維護(hù)樹的節(jié)點(diǎn)信息，支持拖放節(jié)點(diǎn)改變樹的節(jié)點(diǎn)結(jié)構(gòu)以及次序；同時(shí)采用數(shù)據(jù)庫(kù)存儲(chǔ)節(jié)點(diǎn)信息，保證了該方案有一定的通用性。

[1] 劉懷亮.JavaScript程序設(shè)計(jì)[M].北京：冶金工業(yè)出版社,2006.

[2] 王星,潘郁.基于Ajax技術(shù)的Web模型在網(wǎng)站開發(fā)中的應(yīng)用研究[J].微計(jì)算機(jī)信息,2006,22(9-3),206-207：241.

[3] 施偉偉.征服Ajax—WEB2.0快速入門與項(xiàng)目實(shí)踐[M].北京：人民郵電出版社,2006.

[4] 王嘉.Ajax經(jīng)典案例開發(fā)大全[M].北京：清華大學(xué)出版社,2007：223.