基于AJAX的Web課件動(dòng)態(tài)目錄樹的設(shè)計(jì)與實(shí)現(xiàn)

吳偉信，馮義東

（1.泉州師范學(xué)院 教育技術(shù)學(xué)專業(yè)，福建 泉州 362000；2.海南師范大學(xué) 信息科學(xué)技術(shù)學(xué)院，海南 海口 571158）

基于AJAX的Web課件動(dòng)態(tài)目錄樹的設(shè)計(jì)與實(shí)現(xiàn)

吳偉信1，馮義東2

（1.泉州師范學(xué)院 教育技術(shù)學(xué)專業(yè)，福建 泉州 362000；2.海南師范大學(xué) 信息科學(xué)技術(shù)學(xué)院，海南 ?？?571158）

在Web課件中，章節(jié)信息通常采用目錄樹進(jìn)行管理，常用的目錄樹設(shè)計(jì)方法有靜態(tài)目錄樹和動(dòng)態(tài)目錄樹兩種，實(shí)現(xiàn)效果均不理想.本文分析了AJAX的概念、特點(diǎn)和原理，提出了采用AJAX技術(shù)構(gòu)建Web課件動(dòng)態(tài)目錄樹的新思路，介紹了目錄樹結(jié)構(gòu)的構(gòu)建及設(shè)計(jì)方法，給出了關(guān)鍵程序代碼.

Web課件；AJAX；動(dòng)態(tài)目錄樹

目錄樹是一種常用的顯示數(shù)據(jù)的結(jié)構(gòu)，它通過展開和折疊來進(jìn)行瀏覽，方便用戶查找每個(gè)結(jié)點(diǎn)所需要的內(nèi)容［1］.目前很多Web課件均采用樹型的導(dǎo)航結(jié)構(gòu)，即章節(jié)目錄采用樹型目錄導(dǎo)航條始終保留在屏幕的左邊，學(xué)習(xí)者可隨時(shí)點(diǎn)擊任一知識(shí)點(diǎn)直接進(jìn)入相應(yīng)的頁面學(xué)習(xí)，形成由Web課件知識(shí)結(jié)構(gòu)決定的內(nèi)部導(dǎo)航系統(tǒng)［2］.為便于學(xué)生對(duì)課程知識(shí)結(jié)構(gòu)的掌握，Web課件必須具備一個(gè)清晰的課程組織結(jié)構(gòu)，以反映課程的目錄層次和樹狀結(jié)構(gòu)，并提供由關(guān)鍵詞和目錄樹查找相關(guān)內(nèi)容的功能.在Web課件結(jié)構(gòu)的設(shè)計(jì)中，通常是將課程的內(nèi)容分為章、節(jié)、知識(shí)點(diǎn)三個(gè)基本層次，章內(nèi)包含節(jié)，節(jié)內(nèi)包含知識(shí)點(diǎn).

常見的目錄樹有兩種類型即靜態(tài)目錄樹和動(dòng)態(tài)目錄樹.動(dòng)態(tài)目錄樹每次只加載一級(jí)目錄，只有用戶展開節(jié)點(diǎn)時(shí)，才加載下一級(jí)節(jié)點(diǎn)數(shù)據(jù).動(dòng)態(tài)目錄樹數(shù)據(jù)量小，響應(yīng)速度快.不過該類目錄樹頁面刷新頻繁，用戶體驗(yàn)差，而且刷新后會(huì)使其它數(shù)據(jù)丟失.如果能夠?qū)㈧o態(tài)目錄樹和動(dòng)態(tài)目錄樹的優(yōu)點(diǎn)結(jié)合起來，將大大提高Web課件的整體性能.A-jax富客戶端技術(shù)的出現(xiàn)使互聯(lián)網(wǎng)進(jìn)入Web2.0時(shí)代，也給這個(gè)假設(shè)提供了可能.

1 AJAX技術(shù)在Web課件動(dòng)態(tài)目錄樹實(shí)現(xiàn)中的優(yōu)勢(shì)

AJAX是Asynchronous JavaScript and XML（異步的JavaScript和XML）的縮寫，包括Javascript、XHTML、CSS、DOM、XML、XSTL、XMLHttpRequest等［3］.

傳統(tǒng)的Web課件目錄樹采用同步交互過程，用戶首先向HTTP服務(wù)器觸發(fā)一個(gè)行為或請(qǐng)求的呼求.服務(wù)器執(zhí)行一些邏輯操作或者數(shù)據(jù)庫查詢后，再向發(fā)出請(qǐng)求的用戶返回一個(gè)HTML頁面.這是一種不連貫的用戶體驗(yàn)，服務(wù)器在處理請(qǐng)求的時(shí)候，用戶多數(shù)時(shí)間處于等待的狀態(tài)，屏幕內(nèi)容也是一片空白.當(dāng)負(fù)載比較小的時(shí)候，這并不會(huì)出有什么不妥.可是當(dāng)負(fù)載比較大，響應(yīng)時(shí)間要很長，用戶除了等待，沒辦法進(jìn)行其他的工作.另外，某些時(shí)候，用戶只是想改變頁面的一小部分的數(shù)據(jù)，就必須重新加載整個(gè)頁面.

如果使用AJAX的異步模式，可以不必更新整個(gè)窗口就可以顯示新獲取的數(shù)據(jù).只要來回傳送采用XML格式的數(shù)據(jù)，在瀏覽器里面運(yùn)行的JavaScript代碼就可以與服務(wù)器進(jìn)行聯(lián)系.JavaScript代碼還可以把樣式表加到檢索到的數(shù)據(jù)上，然后在現(xiàn)有網(wǎng)頁的某個(gè)部分加以顯示.AJAX是使用客戶端腳本與Web服務(wù)器交換數(shù)據(jù)的Web應(yīng)用開發(fā)方法.這樣，Web頁面不用打斷交互流程進(jìn)行重新加裁，就可以動(dòng)態(tài)地更新［4］.使用AJAX，用戶可以創(chuàng)建接近本地桌面應(yīng)用的直接、高可用、更豐富、更動(dòng)態(tài)的Web用戶界面.

2 Web課件目錄樹的設(shè)計(jì)

總體設(shè)計(jì)思路是在初始化頁面時(shí)只讀出第一級(jí)的所有數(shù)據(jù)并顯示，在用戶操作一級(jí)菜單其中一項(xiàng)時(shí)，會(huì)通過AJAX向后臺(tái)請(qǐng)求當(dāng)前一級(jí)項(xiàng)目所屬的二級(jí)子菜單的所有數(shù)據(jù).如果再繼續(xù)請(qǐng)求已經(jīng)呈現(xiàn)的二級(jí)菜單中的一項(xiàng)時(shí)，再向后面請(qǐng)求所操作二級(jí)菜單項(xiàng)對(duì)應(yīng)的所有三級(jí)菜單的所有數(shù)據(jù)，以此類推.

2.1 數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)

對(duì)Web課件目錄內(nèi)容進(jìn)行呈現(xiàn)，首先必須對(duì)課件結(jié)構(gòu)進(jìn)行XML格式定義，形成一個(gè)包含課件內(nèi)容數(shù)據(jù)的XML數(shù)據(jù)源文檔.XML文檔分為以數(shù)據(jù)為中心和以文檔為中心兩大類.前者的特點(diǎn)是結(jié)構(gòu)規(guī)整，主要用于描述數(shù)據(jù)粒度精細(xì)、很少或沒有混合內(nèi)容的數(shù)據(jù)對(duì)象，如關(guān)系數(shù)據(jù)庫中的二維表.后者的特點(diǎn)是結(jié)構(gòu)不規(guī)則，主要用于描述數(shù)據(jù)粒度大、混合內(nèi)容多的數(shù)據(jù)對(duì)象，如靜態(tài)的頁面.由于Web課件內(nèi)容結(jié)構(gòu)比較規(guī)整單一，在定義表示課件結(jié)構(gòu)的XML文檔時(shí)采用了以數(shù)據(jù)為中心的XML文檔，方便移植與重用.本系統(tǒng)采用Access數(shù)據(jù)庫技術(shù)結(jié)合XML可擴(kuò)展標(biāo)記語言技術(shù)，即可清晰明了顯示課程目錄樹，并可為后期系統(tǒng)擴(kuò)展提供方便簡潔的課程目錄樹數(shù)據(jù)連接接口.

2.1.1 數(shù)據(jù)表結(jié)構(gòu)

其中課程ID采用國際通用UID時(shí)間標(biāo)記，精確至4位毫秒，確保ID的唯一性（數(shù)據(jù)表結(jié)構(gòu)見表1）.

表1 數(shù)據(jù)表結(jié)構(gòu)Tab.1 Structure of data table

2.1.2 XML數(shù)據(jù)的存儲(chǔ)

其中課程章節(jié)，小節(jié)，知識(shí)點(diǎn)分別使用chapter，section，kp表示.

2.2 目錄樹的結(jié)構(gòu)

在Web課件系統(tǒng)中，知識(shí)以數(shù)據(jù)模塊的形式存儲(chǔ)在數(shù)據(jù)庫中，每個(gè)數(shù)據(jù)模塊對(duì)應(yīng)一個(gè)xml文檔.章模塊則用來表示各個(gè)數(shù)據(jù)模塊所屬的類別和層次關(guān)系，相當(dāng)于總目錄.

目錄樹用于對(duì)所有知識(shí)資料進(jìn)行組織、管理和導(dǎo)航.它描述了知識(shí)數(shù)據(jù)的總體結(jié)構(gòu)框架，為用戶展示了清晰的、層次分明的數(shù)據(jù)結(jié)構(gòu)組織形式.目錄樹的結(jié)構(gòu)見圖1，基本組成單元是節(jié)點(diǎn).目錄樹中節(jié)點(diǎn)的類型又可以分成兩種：父節(jié)點(diǎn)和葉子節(jié)點(diǎn).葉子節(jié)點(diǎn)表示知識(shí)對(duì)應(yīng)的數(shù)據(jù)模塊，父節(jié)點(diǎn)表示數(shù)據(jù)模塊的所屬類別.

圖1 目錄樹結(jié)構(gòu)圖Fig.1 Chart of directory tree

3 基于AJAX的WEB課件目錄樹的實(shí)現(xiàn)

3.1 業(yè)務(wù)邏輯

（1）前臺(tái)瀏覽器端捕捉用戶的操作事件.如果要展開節(jié)點(diǎn)，則通過xmlHttp異步調(diào)用服務(wù)器端，并將所要展開節(jié)點(diǎn)的路徑作為參數(shù)傳遞到服務(wù)器端.

（2）后臺(tái)服務(wù)器端根據(jù)客戶端傳送的節(jié)點(diǎn)參數(shù)，求取所有子節(jié)點(diǎn)的參數(shù)，包括顯示的文字、有無下級(jí)節(jié)點(diǎn).如果是葉子節(jié)點(diǎn)，那么還要計(jì)算該節(jié)點(diǎn)所鏈接數(shù)據(jù)模塊的URL地址.

（3）將獲取的數(shù)據(jù)通過response寫回去.

（4）客戶端接受服務(wù)器端的數(shù)據(jù)，將子節(jié)點(diǎn)的參數(shù)添加到所展開節(jié)點(diǎn)下面.

3.2 實(shí)現(xiàn)的關(guān)鍵技術(shù)

3.2.1 客戶端創(chuàng)建xMlH ttp對(duì)象

客戶端通過xMlHttp對(duì)象調(diào)用服務(wù)器，傳送待展開節(jié)點(diǎn)的路徑，并發(fā)出HTTP請(qǐng)求，主要代碼如下：

圖2 業(yè)務(wù)邏輯示意圖Fig.2 Business logic diagram

3.2.2 服務(wù)器端處理數(shù)據(jù)

服務(wù)器端調(diào)用存儲(chǔ)過程從數(shù)據(jù)庫中取出知識(shí)模塊，并根據(jù)客戶端傳來的待展開節(jié)點(diǎn)的路徑對(duì)知識(shí)模塊進(jìn)行過濾，取出子節(jié)點(diǎn)的數(shù)據(jù)，組織成特定格式的XML文檔后返回到客戶端.主要代碼如下：

3.2.3 客戶端更新HTML DOM

客戶端通過xmlhttp.responseXML接受服務(wù)器端返回的數(shù)據(jù)并解析，從而更新HTML頁面中相應(yīng)位置的數(shù)據(jù).為了表示父節(jié)點(diǎn)，人為加上一個(gè)節(jié)點(diǎn)顯示Loading...，并將節(jié)點(diǎn)閉合，以顯示與葉子節(jié)點(diǎn)的區(qū)別.主要代碼如下：

3.2.4 動(dòng)態(tài)加載

如果一次性提取完整的樹結(jié)構(gòu)，數(shù)據(jù)量比較大，消耗的資源多，客戶端的響應(yīng)時(shí)間也就越長，因此采用動(dòng)態(tài)加載方式，即每次單擊“+”圖片時(shí)，先判斷是否已加載此子節(jié)點(diǎn)數(shù)據(jù)，如果未加載則通過AJAX的XMLHTTP組件XMLHTTPReques對(duì)象異步發(fā)送請(qǐng)求，連接服務(wù)器獲取節(jié)點(diǎn)數(shù)據(jù).主要代碼如下：

4 總結(jié)

基于AJAX技術(shù)實(shí)現(xiàn)Web課件目錄樹是對(duì)傳統(tǒng)方法的改進(jìn)，變傳統(tǒng)的同步為異步，從而使樹狀菜單的瀏覽性能得到很大的提高［5］；用戶對(duì)菜單的行為通過AJAX引擎的處理，使得瀏覽器端菜單可以根據(jù)用戶的請(qǐng)求下載數(shù)據(jù)，不會(huì)有數(shù)據(jù)的冗余和浪費(fèi)，減少了數(shù)據(jù)下載總量，而且更新頁面時(shí)不用重載全部內(nèi)容，只更新需要更新的那部分即可，把對(duì)資源的浪費(fèi)降到最低，避免了菜單數(shù)據(jù)重復(fù)加載帶來的速度和效率問題.服務(wù)器端的組織形式則可以將功能劃分得更細(xì)，這樣服務(wù)器就可以只為有用的菜單數(shù)據(jù)進(jìn)行工作，大大提高了運(yùn)行效率.但由于頻繁的與服務(wù)器通信，當(dāng)樹型目錄的結(jié)構(gòu)簡單，級(jí)數(shù)較小，則延長了總的相應(yīng)時(shí)間.

［1］楊光，李龍清，常心坦.基于Web實(shí)現(xiàn)樹型目錄兩種方式及比較[J].西安科技大學(xué)學(xué)報(bào)，2004，24（3）：265-267；274.

［2］王崢，陳新登.基于XML的網(wǎng)絡(luò)課件設(shè)計(jì)[J].臺(tái)州學(xué)院學(xué)報(bào)，2005，27（6）：10-13.

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

［4］楊曉燕，吳桂芹.基于Ajax的遠(yuǎn)程教育系統(tǒng)的研究與應(yīng)用[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2007，10：98-101；105.

［5］鄧少勛.基于AJAX技術(shù)的Web樹狀菜單實(shí)現(xiàn)[J].貴州工業(yè)大學(xué)學(xué)報(bào)，2007，36（2）：65-68.

責(zé)任編輯：畢和平

Development of DynaMic Tree for the Web Courseware Based on AJAX

WU Weixin1，F(xiàn)ENG Yidong2
（1.Department of Educational Technology，Quanzhou Normal University，Quanzhou 362000，China；2.College of Information Science and Technology，Hainan Normal University，Haikou 571158，China）

Chapters and sections are managed in the forMof directory tree in the web courseware.The common tree contains static tree and dynamic tree，but the effect of theMis not ideal.The author of this paper analysis the concept，feature and theory of AJAX，then introduces the neWthought of constructing tree using AJAX.The author discusses the method of constructing and designing the tree structure and also gives the key codes.

Web courseware；AJAX；Dynamic tree

TP 311

A

1674-4942（2010）03-0259-05

2010-04-17