張囡囡　戴心來

摘 要：教育資源庫是教育信息化的基礎(chǔ)，其建設(shè)質(zhì)量與效益問題一直為人們所高度關(guān)注。文章主要探討基于AJAX技術(shù)的教育資源庫的建設(shè)，利用先進(jìn)的AJAX技術(shù)實(shí)現(xiàn)了教育資源的搜索提示、數(shù)據(jù)校驗(yàn)、局部頁面刷新等功能，并給出了功能實(shí)現(xiàn)的關(guān)鍵代碼。

關(guān)鍵詞：AJAX 異步交互 教育資源庫

中圖分類號(hào)：TP392 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1673-8454（2009）05-0051-03

一、問題提出

教育資源庫是教育信息化的基礎(chǔ)，也是教育信息化的核心內(nèi)容，有利于學(xué)生自主、探究地學(xué)習(xí)，提高學(xué)習(xí)效率，改善學(xué)習(xí)的效果。由于教育資源包羅萬象、內(nèi)容豐富多彩、形式多種多樣，同時(shí)存在大量不同層次、不同屬性的資源，因此需要一個(gè)高效的、能夠支持一定復(fù)雜性需求的工具進(jìn)行管理,教育資源庫就是這樣的一種工具。[1]

目前的教育資源庫大多采用傳統(tǒng)Web應(yīng)用模型，瀏覽器與服務(wù)器的通信是同步的，用戶觸發(fā)一個(gè)HTTP請(qǐng)求到服務(wù)器，服務(wù)器對(duì)其進(jìn)行處理后再返回一個(gè)新的HTTP頁到客戶端，每當(dāng)服務(wù)器處理客戶端提交的請(qǐng)求時(shí)，客戶端只能空閑等待，既浪費(fèi)了帶寬及服務(wù)器資源，同時(shí)也會(huì)影響學(xué)習(xí)者學(xué)習(xí)的積極性和學(xué)習(xí)效果。為了解決這一問題，我們?cè)诮逃Y源庫建設(shè)中嘗試采用AJAX技術(shù)。AJAX技術(shù)能實(shí)現(xiàn)瀏覽器和服務(wù)器的異步通信，大大減輕服務(wù)器的負(fù)擔(dān)，提高了教育資源的可交互性和應(yīng)用的執(zhí)行效率。

二、AJAX技術(shù)

1.AJAX概述

AJAX的全稱為異步JavaScript和XML（即Asynchronous JavaScript and XML）,是多種技術(shù)的一種綜合應(yīng)用，包括JavaScript、XHTML、CSS、DOM、XML和XSTL，以及最重要的一個(gè)對(duì)象XMLHttpRequest。其中，使用XHTML和CSS實(shí)現(xiàn)數(shù)據(jù)信息的統(tǒng)一化、標(biāo)準(zhǔn)化顯示；使用DOM實(shí)現(xiàn)瀏覽器端豐富的動(dòng)態(tài)顯示效果以及與服務(wù)器端的交互；使用XML和XSTL進(jìn)行瀏覽器和服務(wù)器兩端的數(shù)據(jù)信息交換與處理；使用XMLHttpRequest對(duì)象進(jìn)行瀏覽器和服務(wù)器端的異步數(shù)據(jù)讀??；使用JavaScript腳本實(shí)現(xiàn)對(duì)所有數(shù)據(jù)的進(jìn)一步處理。

2.AJAX的運(yùn)行原理

使用AJAX后的Web應(yīng)用程序看來更像是一個(gè)桌面應(yīng)用程序，其原理相當(dāng)于在客戶端和服務(wù)器端之間加了一個(gè)中間層——AJAX引擎，實(shí)現(xiàn)了客戶端和服務(wù)器之間的異步交互，如圖1所示。使用AJAX后，當(dāng)用戶需要從服務(wù)器端讀取數(shù)據(jù)時(shí)，由AJAX引擎代為向服務(wù)器提交請(qǐng)求。具體過程如下：當(dāng)用戶在Web頁面上進(jìn)行某項(xiàng)操作（如單擊一個(gè)按鈕），觸發(fā)一個(gè)JavaScript事件。此時(shí)，相應(yīng)的事件處理函數(shù)將被調(diào)用。在這個(gè)函數(shù)中，XMLHttpRequest對(duì)象被初始化，并根據(jù)情況向服務(wù)器發(fā)出異步通信請(qǐng)求。服務(wù)器接受到用戶請(qǐng)求后，根據(jù)URL地址判斷用戶行為并進(jìn)行響應(yīng)，然后將響應(yīng)結(jié)果以HTML/XHTML/XML的形式打印出來。當(dāng)XMLHttpRequest檢測(cè)到服務(wù)器已經(jīng)將響應(yīng)結(jié)果打印出來，即將響應(yīng)結(jié)果以文本或者XML文檔的形式返回，用JavaScript函數(shù)來處理服務(wù)器返回的數(shù)據(jù)，最終更新頁面內(nèi)容。

三、AJAX在教育資源庫中的應(yīng)用

教育資源庫主要具有資源的收集、存儲(chǔ)、預(yù)覽、導(dǎo)航、檢索、瀏覽、下載以及組織與管理等功能。教育資源庫建設(shè)主要是為了更好地實(shí)現(xiàn)教育資源共享，加快教育信息化步伐，使教育資源具有時(shí)效性、易用性、高效性。在教育資源庫建設(shè)中要充分考慮用戶的切身需求，努力提高教育資源的利用率，同時(shí)還要充分利用相關(guān)知識(shí)和技術(shù)，提高教育資源的應(yīng)用效果。AJAX技術(shù)自2005年被提出以來，以其先進(jìn)的技術(shù)和強(qiáng)大的功能得到了一些大型網(wǎng)站（如Google）的大力推廣與使用。我們將AJAX技術(shù)引入到教育資源庫開發(fā)中，全面提升了資源的處理效率，增強(qiáng)了資源的利用率。

1.搜索提示

教育資源庫采用B/S結(jié)構(gòu)，以文件管理系統(tǒng)與關(guān)系數(shù)據(jù)庫相結(jié)合的方式對(duì)教育資源進(jìn)行存儲(chǔ)和管理，資源的相關(guān)屬性保存在數(shù)據(jù)庫中，具體資源以文件的形式存儲(chǔ)在硬盤中，它們之間通過數(shù)據(jù)庫中的名稱和存儲(chǔ)路徑來建立關(guān)聯(lián)。

教育資源數(shù)量龐大，如何更快、更準(zhǔn)確地得到想要的信息是教育資源庫建設(shè)者所面臨的一個(gè)重要問題。借助AJAX技術(shù)實(shí)現(xiàn)搜索提示，用戶可以像使用桌面程序一樣，無需提交、刷新頁面就可以獲得相應(yīng)的參考提示，這種智能化、人性化的功能為用戶節(jié)省了時(shí)間。

搜索提示的基本原理是，當(dāng)用戶輸入完一個(gè)關(guān)鍵字時(shí)，觸發(fā)相應(yīng)的鍵盤事件后，便向服務(wù)器端發(fā)送請(qǐng)求，服務(wù)器端根據(jù)用戶當(dāng)前輸入的關(guān)鍵字，在數(shù)據(jù)庫中搜索相關(guān)的關(guān)鍵字信息，取出數(shù)據(jù)并及時(shí)返回給客戶。在資源檢索中，搜索提示工作的基本原理如圖2所示。

當(dāng)用戶在瀏覽器客戶端界面輸入搜索關(guān)鍵字時(shí)，觸發(fā)onkeyup事件,該事件會(huì)調(diào)用searchSuggest（）函數(shù)，該函數(shù)向服務(wù)器發(fā)送XMLHttpRequest請(qǐng)求，服務(wù)器端接收到客戶端的請(qǐng)求后，根據(jù)用戶輸入的關(guān)鍵字，在教育資源數(shù)據(jù)庫中通過查詢資源表得到相關(guān)數(shù)據(jù)，并將查詢結(jié)果保存到向量中，最后將向量中的數(shù)據(jù)組織成客戶端需要的格式并返回給客戶端，返回后的數(shù)據(jù)通過handleSearchSuggest（）函數(shù)來處理。其關(guān)鍵代碼如下：

//創(chuàng)建XMLHttpReuqest對(duì)象

var searchReq = false;

function createAjaxObj() {

if (window.XMLHttpRequest) {

//如果為Mozilla，Safari瀏覽器

searchReq =new XMLHttpRequest();

if (searchReq.overrideMimeType) { searchReq.overrideMimeType("text/xml");}

}else{ if (window.ActiveXObject) {//如果為IE瀏覽器

try { searchReq = new ActiveXObject("Mxxml2.XMLHTTP");

}catch (e) {

try { searchReq = new ActiveXObject("Microsoft.XMLHTTP");}catch (e) { }

}}}return searchReq;}

//向服務(wù)器發(fā)送請(qǐng)求

function searchSuggest() {

if (searchReq.readyState == 4 || searchReq.readyState == 0) {var str = document.getElementById ("txtSearch").value;

searchReq.open("GET", "search？search=" + str, true);

searchReq.onreadystatechange = handleSearchSuggest;

searchReq.send(null); }}

//處理返回?cái)?shù)據(jù)函數(shù)

function handleSearchSuggest() {

if (searchReq.readyState == 4) {

var ss = document.getElementById ("search_suggest");

ss.innerHTML = "";

var str = searchReq.responseText .split(" ");

setSearch(this.innerHTML);"′;

suggest += class="suggest_link"＞′+ str[i] + ′＜/div＞′;

ss.innerHTML += suggest;

}}}

程序運(yùn)行效果如圖3所示。當(dāng)用戶在瀏覽器頁面輸入關(guān)鍵字“教育”時(shí)，會(huì)得到與“教育”相匹配的提示信息。雖然瀏覽器本身也有搜索提示功能，但這是兩種截然不同的技術(shù)。瀏覽器主要是方便用戶操作，起到一個(gè)簡(jiǎn)單記憶的功能。當(dāng)用戶輸入關(guān)鍵字時(shí)，瀏覽器并沒有向任何服務(wù)器進(jìn)行數(shù)據(jù)查詢，只是在用戶曾輸入的關(guān)鍵字中進(jìn)行匹配而給出提示。一旦用戶清除瀏覽器的歷史記錄，那么將得不到任何提示信息。而通過AJAX技術(shù)可以實(shí)時(shí)從教育資源庫中得到數(shù)據(jù)并給出提示，使用戶更快、更好地搜索到自己想要的信息，不但具有減少用戶輸入時(shí)間的功能，而且更具智能化、人性化。

2.數(shù)據(jù)校驗(yàn)

在教育資源庫中經(jīng)常要用到數(shù)據(jù)校驗(yàn)。例如，用戶在線注冊(cè)時(shí)，我們要保證每個(gè)用戶的登錄名具有唯一性，所以需要添加一個(gè)檢查用戶名是否唯一的功能。

傳統(tǒng)的Web程序?qū)τ跀?shù)據(jù)校驗(yàn)通常有兩種方式：一是整個(gè)表單提交后由后臺(tái)服務(wù)程序檢測(cè)，如用戶名已被注冊(cè)則重新回到提交前的頁面進(jìn)行新的用戶名設(shè)置；二是用戶可以點(diǎn)擊相應(yīng)的驗(yàn)證按鈕進(jìn)行校驗(yàn)，但需要打開一個(gè)瀏覽器窗口或者對(duì)話框。可見這兩種方式既耗時(shí)又耗資源。利用AJAX技術(shù)可以進(jìn)行異步數(shù)據(jù)校驗(yàn)，校驗(yàn)結(jié)果由AJAX引擎顯示在頁面適當(dāng)?shù)奈恢?，整個(gè)校驗(yàn)過程不需要有任何動(dòng)作，更不需要重新加載整個(gè)頁面，而且不會(huì)影響用戶填寫其他信息或進(jìn)行其他操作，迅速流暢又不會(huì)增加服務(wù)器的負(fù)擔(dān)。

3.局部頁面刷新

在教育資源庫中，用戶經(jīng)常需要瀏覽資源信息。傳統(tǒng)的Web程序通常是用戶點(diǎn)擊某個(gè)資源，向服務(wù)器提交查詢請(qǐng)求，系統(tǒng)打開一個(gè)新的頁面，返回資源的相關(guān)信息，這期間大量重復(fù)數(shù)據(jù)被加載。而采用AJAX技術(shù)，在用戶點(diǎn)擊資源時(shí)，向服務(wù)器發(fā)出的是異步提交請(qǐng)求，系統(tǒng)只返回需要的信息并顯示在當(dāng)前頁面，實(shí)現(xiàn)了局部頁面刷新，從而避免了數(shù)據(jù)的重復(fù)加載。

四、結(jié)束語

教育資源庫是教育信息化的基礎(chǔ)，是需要長(zhǎng)期建設(shè)與維護(hù)的系統(tǒng)工程。在教育資源庫建設(shè)中，合理利用AJAX技術(shù)使得程序?qū)τ脩舻捻憫?yīng)更加迅速，進(jìn)而加強(qiáng)了與用戶的交互性，提高了處理效率，減少了資源的消耗，避免了大量重復(fù)數(shù)據(jù)的出現(xiàn)，更具人性化和智能化，在一定程度上提高了系統(tǒng)的性能，為用戶提供了更好的教育服務(wù)。

參考文獻(xiàn)：

[1]何克抗,吳娟.信息技術(shù)與課程整合[M].北京：高等教育出版社,2007.

[2]張志潔等.AJAX技術(shù)及其在智能協(xié)作教學(xué)平臺(tái)中的應(yīng)用[J].現(xiàn)代遠(yuǎn)距離教育,2007(5):64-66.

[3]張豪鋒,岑俊杰.基于AJAX技術(shù)的網(wǎng)絡(luò)課程可交互性研究[J].現(xiàn)代遠(yuǎn)距離教育,2008(1):70-72.

[4]王沛,馮曼菲.征服AJAX Web 2.0開發(fā)技術(shù)詳解[M].北京：人民郵電出版社,2006.