張囡囡 戴心來
摘 要:教育資源庫是教育信息化的基礎,其建設質(zhì)量與效益問題一直為人們所高度關(guān)注。文章主要探討基于AJAX技術(shù)的教育資源庫的建設,利用先進的AJAX技術(shù)實現(xiàn)了教育資源的搜索提示、數(shù)據(jù)校驗、局部頁面刷新等功能,并給出了功能實現(xiàn)的關(guān)鍵代碼。
關(guān)鍵詞:AJAX 異步交互 教育資源庫
中圖分類號:TP392 文獻標識碼:A 文章編號:1673-8454(2009)05-0051-03
一、問題提出
教育資源庫是教育信息化的基礎,也是教育信息化的核心內(nèi)容,有利于學生自主、探究地學習,提高學習效率,改善學習的效果。由于教育資源包羅萬象、內(nèi)容豐富多彩、形式多種多樣,同時存在大量不同層次、不同屬性的資源,因此需要一個高效的、能夠支持一定復雜性需求的工具進行管理,教育資源庫就是這樣的一種工具。[1]
目前的教育資源庫大多采用傳統(tǒng)Web應用模型,瀏覽器與服務器的通信是同步的,用戶觸發(fā)一個HTTP請求到服務器,服務器對其進行處理后再返回一個新的HTTP頁到客戶端,每當服務器處理客戶端提交的請求時,客戶端只能空閑等待,既浪費了帶寬及服務器資源,同時也會影響學習者學習的積極性和學習效果。為了解決這一問題,我們在教育資源庫建設中嘗試采用AJAX技術(shù)。AJAX技術(shù)能實現(xiàn)瀏覽器和服務器的異步通信,大大減輕服務器的負擔,提高了教育資源的可交互性和應用的執(zhí)行效率。
二、AJAX技術(shù)
1.AJAX概述
AJAX的全稱為異步JavaScript和XML(即Asynchronous JavaScript and XML),是多種技術(shù)的一種綜合應用,包括JavaScript、XHTML、CSS、DOM、XML和XSTL,以及最重要的一個對象XMLHttpRequest。其中,使用XHTML和CSS實現(xiàn)數(shù)據(jù)信息的統(tǒng)一化、標準化顯示;使用DOM實現(xiàn)瀏覽器端豐富的動態(tài)顯示效果以及與服務器端的交互;使用XML和XSTL進行瀏覽器和服務器兩端的數(shù)據(jù)信息交換與處理;使用XMLHttpRequest對象進行瀏覽器和服務器端的異步數(shù)據(jù)讀取;使用JavaScript腳本實現(xiàn)對所有數(shù)據(jù)的進一步處理。
2.AJAX的運行原理
使用AJAX后的Web應用程序看來更像是一個桌面應用程序,其原理相當于在客戶端和服務器端之間加了一個中間層——AJAX引擎,實現(xiàn)了客戶端和服務器之間的異步交互,如圖1所示。使用AJAX后,當用戶需要從服務器端讀取數(shù)據(jù)時,由AJAX引擎代為向服務器提交請求。具體過程如下:當用戶在Web頁面上進行某項操作(如單擊一個按鈕),觸發(fā)一個JavaScript事件。此時,相應的事件處理函數(shù)將被調(diào)用。在這個函數(shù)中,XMLHttpRequest對象被初始化,并根據(jù)情況向服務器發(fā)出異步通信請求。服務器接受到用戶請求后,根據(jù)URL地址判斷用戶行為并進行響應,然后將響應結(jié)果以HTML/XHTML/XML的形式打印出來。當XMLHttpRequest檢測到服務器已經(jīng)將響應結(jié)果打印出來,即將響應結(jié)果以文本或者XML文檔的形式返回,用JavaScript函數(shù)來處理服務器返回的數(shù)據(jù),最終更新頁面內(nèi)容。
三、AJAX在教育資源庫中的應用
教育資源庫主要具有資源的收集、存儲、預覽、導航、檢索、瀏覽、下載以及組織與管理等功能。教育資源庫建設主要是為了更好地實現(xiàn)教育資源共享,加快教育信息化步伐,使教育資源具有時效性、易用性、高效性。在教育資源庫建設中要充分考慮用戶的切身需求,努力提高教育資源的利用率,同時還要充分利用相關(guān)知識和技術(shù),提高教育資源的應用效果。AJAX技術(shù)自2005年被提出以來,以其先進的技術(shù)和強大的功能得到了一些大型網(wǎng)站(如Google)的大力推廣與使用。我們將AJAX技術(shù)引入到教育資源庫開發(fā)中,全面提升了資源的處理效率,增強了資源的利用率。
1.搜索提示
教育資源庫采用B/S結(jié)構(gòu),以文件管理系統(tǒng)與關(guān)系數(shù)據(jù)庫相結(jié)合的方式對教育資源進行存儲和管理,資源的相關(guān)屬性保存在數(shù)據(jù)庫中,具體資源以文件的形式存儲在硬盤中,它們之間通過數(shù)據(jù)庫中的名稱和存儲路徑來建立關(guān)聯(lián)。
教育資源數(shù)量龐大,如何更快、更準確地得到想要的信息是教育資源庫建設者所面臨的一個重要問題。借助AJAX技術(shù)實現(xiàn)搜索提示,用戶可以像使用桌面程序一樣,無需提交、刷新頁面就可以獲得相應的參考提示,這種智能化、人性化的功能為用戶節(jié)省了時間。
搜索提示的基本原理是,當用戶輸入完一個關(guān)鍵字時,觸發(fā)相應的鍵盤事件后,便向服務器端發(fā)送請求,服務器端根據(jù)用戶當前輸入的關(guān)鍵字,在數(shù)據(jù)庫中搜索相關(guān)的關(guān)鍵字信息,取出數(shù)據(jù)并及時返回給客戶。在資源檢索中,搜索提示工作的基本原理如圖2所示。
當用戶在瀏覽器客戶端界面輸入搜索關(guān)鍵字時,觸發(fā)onkeyup事件,該事件會調(diào)用searchSuggest()函數(shù),該函數(shù)向服務器發(fā)送XMLHttpRequest請求,服務器端接收到客戶端的請求后,根據(jù)用戶輸入的關(guān)鍵字,在教育資源數(shù)據(jù)庫中通過查詢資源表得到相關(guān)數(shù)據(jù),并將查詢結(jié)果保存到向量中,最后將向量中的數(shù)據(jù)組織成客戶端需要的格式并返回給客戶端,返回后的數(shù)據(jù)通過handleSearchSuggest()函數(shù)來處理。其關(guān)鍵代碼如下:
//創(chuàng)建XMLHttpReuqest對象
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;}
//向服務器發(fā)送請求
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); }}
//處理返回數(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;
}}}
程序運行效果如圖3所示。當用戶在瀏覽器頁面輸入關(guān)鍵字“教育”時,會得到與“教育”相匹配的提示信息。雖然瀏覽器本身也有搜索提示功能,但這是兩種截然不同的技術(shù)。瀏覽器主要是方便用戶操作,起到一個簡單記憶的功能。當用戶輸入關(guān)鍵字時,瀏覽器并沒有向任何服務器進行數(shù)據(jù)查詢,只是在用戶曾輸入的關(guān)鍵字中進行匹配而給出提示。一旦用戶清除瀏覽器的歷史記錄,那么將得不到任何提示信息。而通過AJAX技術(shù)可以實時從教育資源庫中得到數(shù)據(jù)并給出提示,使用戶更快、更好地搜索到自己想要的信息,不但具有減少用戶輸入時間的功能,而且更具智能化、人性化。
2.數(shù)據(jù)校驗
在教育資源庫中經(jīng)常要用到數(shù)據(jù)校驗。例如,用戶在線注冊時,我們要保證每個用戶的登錄名具有唯一性,所以需要添加一個檢查用戶名是否唯一的功能。
傳統(tǒng)的Web程序?qū)τ跀?shù)據(jù)校驗通常有兩種方式:一是整個表單提交后由后臺服務程序檢測,如用戶名已被注冊則重新回到提交前的頁面進行新的用戶名設置;二是用戶可以點擊相應的驗證按鈕進行校驗,但需要打開一個瀏覽器窗口或者對話框??梢娺@兩種方式既耗時又耗資源。利用AJAX技術(shù)可以進行異步數(shù)據(jù)校驗,校驗結(jié)果由AJAX引擎顯示在頁面適當?shù)奈恢茫麄€校驗過程不需要有任何動作,更不需要重新加載整個頁面,而且不會影響用戶填寫其他信息或進行其他操作,迅速流暢又不會增加服務器的負擔。
3.局部頁面刷新
在教育資源庫中,用戶經(jīng)常需要瀏覽資源信息。傳統(tǒng)的Web程序通常是用戶點擊某個資源,向服務器提交查詢請求,系統(tǒng)打開一個新的頁面,返回資源的相關(guān)信息,這期間大量重復數(shù)據(jù)被加載。而采用AJAX技術(shù),在用戶點擊資源時,向服務器發(fā)出的是異步提交請求,系統(tǒng)只返回需要的信息并顯示在當前頁面,實現(xiàn)了局部頁面刷新,從而避免了數(shù)據(jù)的重復加載。
四、結(jié)束語
教育資源庫是教育信息化的基礎,是需要長期建設與維護的系統(tǒng)工程。在教育資源庫建設中,合理利用AJAX技術(shù)使得程序?qū)τ脩舻捻憫友杆?,進而加強了與用戶的交互性,提高了處理效率,減少了資源的消耗,避免了大量重復數(shù)據(jù)的出現(xiàn),更具人性化和智能化,在一定程度上提高了系統(tǒng)的性能,為用戶提供了更好的教育服務。
參考文獻:
[1]何克抗,吳娟.信息技術(shù)與課程整合[M].北京:高等教育出版社,2007.
[2]張志潔等.AJAX技術(shù)及其在智能協(xié)作教學平臺中的應用[J].現(xiàn)代遠距離教育,2007(5):64-66.
[3]張豪鋒,岑俊杰.基于AJAX技術(shù)的網(wǎng)絡課程可交互性研究[J].現(xiàn)代遠距離教育,2008(1):70-72.
[4]王沛,馮曼菲.征服AJAX Web 2.0開發(fā)技術(shù)詳解[M].北京:人民郵電出版社,2006.