基于Ajax的資源管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

摘要:針對(duì)目前現(xiàn)有的資源管理系統(tǒng)存在的問題，提出了一種基于Ajax技術(shù)的資源管理系統(tǒng)。Web頁面采用局部動(dòng)態(tài)刷新，提高了系統(tǒng)的使用效率。介紹了系統(tǒng)的功能模塊和實(shí)現(xiàn)方案。

關(guān)鍵詞:Ajax;資源管理;無刷新;Web2.0

中圖分類號(hào):TP311 文獻(xiàn)標(biāo)識(shí)碼:A文章編號(hào):1009-3044(2009)35-9977-02

Design and Implementation of Resources Management System Based on Ajax

HAN Meng1， WEI Xin2

(1.Beifang Ethnic University， Yinchuan 750021， China; 2.Ningxia Talent Exchange Center， Yinchuan 750001， China)

Abstract: Aiming at the present problem of resources management system， the paper puts forward an Ajax technique to design system. Web page using a local dynamic refresh， to improve the system efficiency. Introduces its structure， design and implementation.

Key words: Ajax; resources management; non-refurbishing; Web2.0

Ajax(Asynchronous JavaScript and XML)是一種設(shè)計(jì)交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)， Ajax技術(shù)引進(jìn)了異步調(diào)用，使頁面可按照需要進(jìn)行局部刷新，節(jié)省了網(wǎng)絡(luò)帶寬，提升了用戶體驗(yàn)。實(shí)現(xiàn)瀏覽器與服務(wù)器的異步通訊，局部刷新瀏覽器窗口而滿足用戶的操作，減少頁面重載次數(shù)和用戶等待時(shí)間。

本文介紹的基于Ajax技術(shù)的資源系統(tǒng)為網(wǎng)絡(luò)教學(xué)平臺(tái)的使用者，主要是為教師和學(xué)生服務(wù)。本系統(tǒng)中教師可以針對(duì)教師教授的課程發(fā)布課程資源，學(xué)生可以下載學(xué)習(xí)課程資源。與傳統(tǒng)資源系統(tǒng)相比，采用Ajax技術(shù)實(shí)現(xiàn)局部刷新技術(shù)，用戶上傳資源后可以在Web頁面中無刷新顯示資源的路徑，主題等內(nèi)容，減少等待時(shí)間。

1 系統(tǒng)框架設(shè)計(jì)

1.1 Ajax技術(shù)

Ajax作為JavaScript和XML等技術(shù)的結(jié)合體，它通過Ajax引擎來實(shí)現(xiàn)web頁面與服務(wù)器的交互的，用戶在頁面上獲得的數(shù)據(jù)是通過Ajax引擎提供的。Ajax引擎可以消除web的開始—停止—開始—停止這樣的交互過程。它就像增加了一層機(jī)制到程序中，使它響應(yīng)更靈敏，而它的確做到了這一點(diǎn)。不像加載一個(gè)頁面一樣，在會(huì)話的開始，瀏覽器加載了一個(gè)Ajax引擎—采用 JavaScript編寫并且通常在一個(gè)隱藏frame或Div中。這個(gè)引擎負(fù)責(zé)繪制用戶界面以及與服務(wù)器端通訊。Ajax技術(shù)的Web交互模式如圖1所示。

1.2 系統(tǒng)實(shí)現(xiàn)

資源管理系統(tǒng)的功能包括教師上傳與課程相關(guān)的課件與資料并可以對(duì)其進(jìn)行管理，學(xué)生可以在線查看和下載，同時(shí)還要提供查詢資源的功能。教學(xué)資源管理分為4個(gè)子模塊:資源瀏覽、資源管理、資源下載和資源查詢，功能模塊圖如圖2所示。

1.2.1 資源查詢模塊

頁面無刷新的模糊查詢，通過頁面的“關(guān)鍵字搜索”文本框的“onKeyUp()”事件執(zhí)行javascript定義好的函數(shù)，提交到服務(wù)器后，執(zhí)行l(wèi)ike的sql語句，并將查詢結(jié)果返回至客戶端，而客戶端頁面并不刷新。資源查詢的運(yùn)行界面如圖3所示。

1.2.2 資源上傳模塊

在應(yīng)用程序的安裝或下載過程中，進(jìn)度條的使用已是非常普遍了。進(jìn)度條可以用來標(biāo)識(shí)項(xiàng)目的完成進(jìn)度，可以用百分比或數(shù)字表示，可以水平放置也可以垂直放置。利用Ajax技術(shù)創(chuàng)建進(jìn)度條，功能顯得更加強(qiáng)大和快捷。

完成此功能，主要包含兩個(gè)核心:

1)上傳文件類型的檢驗(yàn)，確保文件的類型為ppt、doc、rar或pdf格式。核心代碼如下:

客戶端檢驗(yàn):

var a=document.getElementById(\"file1\").value;

var b=a.split(\"\\\\\");

var c=b[b.length-1];

var d=c.split(\".\");

var ftype=d[1];

if(ftype!=\"ppt\"ftype!=\"doc\"ftype!=\"rar\"ftype!=\"pdf\")

{

alert(\"非法格式!只允許 ppt doc rar pdf 文件!!!\");

return 1;

}

服務(wù)器端檢驗(yàn):

String ftype=request.getParameter(\"ftype\");

String filename=fname+\".\"+ftype;

if(ftype!=\"ppt\"ftype!=\"doc\"ftype!=\"rar\"ftype!=\"pdf\")

{

out.println(\"

\" + ftype + \"格式文件不被支持!

}

2)提高程序運(yùn)行的可見性，即為用戶提供文件上傳進(jìn)度條的顯示。

JavaScript函數(shù)createXMLHttpRequest()主要用來創(chuàng)建XMLHttpRequest對(duì)象，goUpFile()函數(shù)完成向服務(wù)器端發(fā)送異步請(qǐng)求，該函數(shù)在用戶點(diǎn)擊“開始上傳”按鈕時(shí)被調(diào)用，主要作用就是通知服務(wù)器端，并在客戶端開始運(yùn)行進(jìn)度條。goCallback()函數(shù)主要用于處理服務(wù)器端響應(yīng)，并每隔200ms調(diào)用pollServer()函數(shù)。pollServer()函數(shù)也是用于向服務(wù)器端發(fā)送異步請(qǐng)求，主要請(qǐng)求服務(wù)器端響應(yīng)的百分比數(shù)字。pollCallback()函數(shù)主要用于處理服務(wù)器端響應(yīng)，即依據(jù)服務(wù)器端的返回?cái)?shù)字，指定進(jìn)度條的顯示狀態(tài)。這里需要注意的是goCallback()函數(shù)只執(zhí)行一次，而pollCallback()函數(shù)可以執(zhí)行多次，其余三個(gè)函數(shù)(processResult()，checkDiv()，clearBar())都是實(shí)現(xiàn)進(jìn)度條的輔助函數(shù)。進(jìn)度條流程圖如圖4所示。

1.2.3 資源維護(hù)模塊

傳統(tǒng)的Web實(shí)現(xiàn)方式，頁面初始化時(shí)準(zhǔn)備好所有列表框中的信息，并通過邏輯控制建立列表框之間對(duì)應(yīng)選項(xiàng)的聯(lián)系。再依據(jù)用戶的選擇，通過邏輯判斷將事先準(zhǔn)備好的列表框信息裝入對(duì)應(yīng)的聯(lián)動(dòng)列表框中。這種方法的弊端是造成瀏覽器端下載的頁面非常臃腫，許多在本次交互中根本用不到的信息也提前裝在到頁面中。

資源維護(hù)功能是系統(tǒng)管理員對(duì)教師上傳的資源刪除，這里實(shí)現(xiàn)了動(dòng)態(tài)加載列表框的功能，是Ajax的常用技巧。借助Ajax技術(shù)，可以實(shí)現(xiàn)當(dāng)用戶選擇第一個(gè)列表框中的對(duì)應(yīng)選項(xiàng)后，將對(duì)應(yīng)的請(qǐng)求以異步方式提交到服務(wù)器端，然后有選擇地從服務(wù)器端獲取下一個(gè)列表框中的列表信息，再返回瀏覽器端進(jìn)行響應(yīng)顯示。系統(tǒng)的實(shí)現(xiàn)頁面如圖5所示。

2 結(jié)論

針對(duì)當(dāng)前教學(xué)通知應(yīng)用中存在的問題，充分利用Ajax技術(shù)的特點(diǎn)，將該技術(shù)應(yīng)用到資源管理功能實(shí)現(xiàn)中。Ajax技術(shù)的應(yīng)用，讓用戶減少等待時(shí)間，提高響應(yīng)速度，給用戶提供更方便、更及時(shí)的服務(wù)。

參考文獻(xiàn):

[1] 黃永燁，劉暉.Ajax應(yīng)用開發(fā)典型實(shí)例[M].北京:電子工業(yè)出版社，2008.

[2] 梁文新，宋強(qiáng)，王占中，等.Ajax+JSP網(wǎng)站開發(fā)從入門到精通[M].北京:清華大學(xué)出版社，2008.

[3] 邵一川等.基于Ajax技術(shù)的智能客戶端流引擎[J].計(jì)算機(jī)工程，2009，6(35).

[4] 陳興渝，鐘朝亮.基于Web的告警實(shí)時(shí)顯示系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].北京郵電大學(xué)學(xué)報(bào)，2009，4(32).

[5] 歐陽榮彬.Ajax與新型管理信息系統(tǒng)[J].中山大學(xué)學(xué)報(bào)，2009，3(48).