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

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

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

中圖分類號:TP311 文獻標(biāo)識碼:A文章編號: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è)計交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)， Ajax技術(shù)引進了異步調(diào)用，使頁面可按照需要進行局部刷新，節(jié)省了網(wǎng)絡(luò)帶寬，提升了用戶體驗。實現(xiàn)瀏覽器與服務(wù)器的異步通訊，局部刷新瀏覽器窗口而滿足用戶的操作，減少頁面重載次數(shù)和用戶等待時間。

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

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

1.1 Ajax技術(shù)

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

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

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

1.2.1 資源查詢模塊

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

1.2.2 資源上傳模塊

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

完成此功能，主要包含兩個核心:

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

客戶端檢驗:

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ù)器端檢驗:

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

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

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

{

out.println(\"

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

}

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

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

1.2.3 資源維護模塊

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

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

2 結(jié)論

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

參考文獻:

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

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

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

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

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