基于Ajax的動態Web樹狀菜單的設計與實現

郜亞麗

GAO Ya-li

（濟源職業技術學院，濟源 454650）

0 引言

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

1 Ajax概述

1.1 Ajax的定義

Ajax（Asynchronous JavaScript and xML）是Web2.0網站開發中的熱門應用技術，其基本表現是在不刷新整個頁面的情況下，實現對頁面局部的更新。Ajax并不是一項新的技術，實際上是多種技術的綜合，Ajax包括Javascript、XHTML和CSS、DOM、XML和 XSTL、XMLHttpRequest等技術[1]。其中：使用XHTML和CSS實現標準化的呈現界面；使用DOM實現動態的顯示和交互；使用XML和XSTL進行數據交換與處理；使用XMLHttpRequest對象實現與服務器的異步數據通信，也是Ajax中最重要的部分；使用Javascript將 XHTML、DOM、XML、XMLHttpRequest綁 定和處理所有數據。

1.2 Ajax的特點

Ajax具有減輕服務器的負擔、不用刷新整個頁面實時更新局部內容，減少用戶心理和實際的等待時間、帶來更好的用戶體驗、可以調用外部數據、基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序、具有廣泛的兼容性和彈性，對各種Web應用解決方案都能夠適用、進一步促進頁面呈現和數據的分離等特點，其中Ajax的一個最大特點就是不刷新整個頁面便可向服務器傳輸或讀寫數據[2]。

2 使用Ajax技術實現樹狀菜單的優點

在傳統的Web 應用程序中，動態獲取數據的樹狀菜單都是采用請求→刷新→顯示模式。即每當用戶通過單擊父結點按鈕或鏈接向服務器發送一個請求時，都由服務器接收請求處理，處理完畢后服務器將信息發送至瀏覽器端進行顯示[3]。而在服務器處理的時間里，瀏覽器端處于Loading狀態，顯示為空白和無響應狀態，用戶能做的事情只有等待。由于每次對菜單的操作瀏覽器端都要與服務器端進行交互，導致了服務器端數據量的增大。不適合菜單數據量大的場合。

使用Ajax技術，可以將瀏覽器端和服務器端結合起來，當客戶端提交請求后，并不將所有的數據取回，而是返回該菜單的頂級菜單。當展開某一菜單時再發送請求，服務器端接收瀏覽器端的請求并處理完畢后，只返回該菜單下的子的菜單，再利用JavaScript將數據顯示到客戶端，所有數據獲取和處理工作都在后臺完成。

基于Ajax技術的實現，用戶既能夠在展開菜單時及時獲得最新的數據，同時又避免服務器端頻繁處理數據而影響系統的性能[4]。圖1所示為基于Ajax技術實現樹狀菜單時，瀏覽器與服務器相互通信的整個過程圖。

圖1 基于Ajax的實現

3 設計樹狀菜單的樹據結構

樹由多個結點組成，每個結點具有通用的性質，把通用的性質抽象出來作為樹結點的接口類。以圖2為例，“機電工程學院”只是樹中的一個結點，該結點其下有子結點，且該結點能夠展開。一個結點主要有以下幾個屬性：名稱，用于顯示該結點的名稱；是否可以展開；該結點下所有的子結點；以及該結點的唯一標識。依據結點的屬性，可以設計出一個樹結點的接口類TreeviewElement如下：

圖2 樹菜單實例圖

4 樹狀菜單的實現

4.1 瀏覽器端的設計

類似Windows資源管理器的文件夾模式。對于每個節點的DHTML 代碼，需要包含節點的位置、前導圖片、樣式、針對該節點的其他操作等。同時為了節點顯示的連貫性，還需一些前導圖片。

對于樹的非葉子節點，圖片和節點信息等，采用一個DIV（ division）容器包含。DIV容器是DHTML 的基礎，使用它可以通過腳本程序對其屬性進行操作，如設置其style 樣式的display 屬性來控制子節點的展開和隱藏。節點的位置、前導圖片、樣式、針對該節點的其他的操作等都放入容器中，關鍵代碼如下：

4.2 動態加載技術的應用

如果一次性獲取完整的先序樹，構造成xml提供給JavaScript解析，數據量越大，消耗的資源越多，客戶端響應延遲時間就越長，因此對于大數據量的樹，采用動態加載方式，即每次單擊“+”圖片時，判斷是否已加載子節點數據，如果未加載則通過Ajax的XMLHTTP組件XMLHTTPRequest對象異步發送請求獲取節點數據。相關JavaScript 代碼如下：

5 結論

本方案支持無刷新動態維護樹的節點信息，支持拖放節點改變樹的節點結構以及次序；同時采用數據庫存儲節點信息，保證了該方案有一定的通用性。

[1] 劉懷亮.JavaScript程序設計[M].北京：冶金工業出版社,2006.

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

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

[4] 王嘉.Ajax經典案例開發大全[M].北京：清華大學出版社,2007：223.