高偉，郭瑾，劉德山，徐本強(qiáng)

0 引言

隨著計(jì)算機(jī)和互聯(lián)網(wǎng)的不斷完善和發(fā)展，網(wǎng)絡(luò)教學(xué)也得到了迅速的普及。為了提高教學(xué)質(zhì)量，網(wǎng)絡(luò)教學(xué)平臺(tái)已經(jīng)越來(lái)越為高校所需求。針對(duì)大學(xué)目前的非計(jì)算機(jī)專(zhuān)業(yè)的Visual FoxPro程序設(shè)計(jì)公共課，由于教學(xué)時(shí)間有限，教師少、學(xué)生多等實(shí)際問(wèn)題，使得教師有限的教學(xué)輔導(dǎo)和答疑時(shí)間遠(yuǎn)遠(yuǎn)不能滿(mǎn)足學(xué)生的要求。另外，課程要求很強(qiáng)的動(dòng)手操作能力?；诖耍梢越柚W(wǎng)絡(luò)教學(xué)系統(tǒng)解決這些問(wèn)題。學(xué)生可以充分利用網(wǎng)絡(luò)的交互功能與老師和同學(xué)進(jìn)行在線(xiàn)交流學(xué)習(xí)，通過(guò)在線(xiàn)考試系統(tǒng)進(jìn)行測(cè)試。

由于Web應(yīng)用程序能訪(fǎng)問(wèn)Internet上豐富的資源，使得Web應(yīng)用程序得到了廣泛的應(yīng)用。但是，傳統(tǒng)的Web應(yīng)用程序強(qiáng)制用戶(hù)進(jìn)入提交、等待、重新顯示的模式。即當(dāng)用戶(hù)發(fā)出一個(gè)請(qǐng)求后，等待服務(wù)器響應(yīng)，等待屏幕刷新、等待請(qǐng)求返回和生成新的頁(yè)面。用戶(hù)在服務(wù)器處理數(shù)據(jù)的時(shí)候，只能處于等待的狀態(tài)，每一步操作都需要等待，使得 Web用戶(hù)界面在響應(yīng)靈活性方面大打折扣。Ajax技術(shù)的出現(xiàn)解決了這個(gè)問(wèn)題，它是于2005年由Jesse James Garrett 最先提出的[1]。

而Ajax帶給用戶(hù)完全不同的瀏覽感受。用戶(hù)看到的只是一個(gè)靜態(tài)頁(yè)面，不需要在提交頁(yè)面后等待或者主動(dòng)刷新頁(yè)面。動(dòng)態(tài)程序反饋的結(jié)果被直接無(wú)刷新地顯示在這個(gè)頁(yè)面上。Ajax改變了B/S系統(tǒng)提交請(qǐng)求、等待服務(wù)器響應(yīng)、響應(yīng)信息到達(dá)后刷新頁(yè)面的工作方式，通過(guò)異步傳輸方式來(lái)更新系統(tǒng)客戶(hù)端數(shù)據(jù)，大大提高了B/S系統(tǒng)的客戶(hù)端表現(xiàn)。

1 Ajax技術(shù)簡(jiǎn)介

Ajax(Asynchronous JavaScript and XML)是由對(duì)JavaScript、XHTML和 CSS、DOM、XML和 XSTL、XMLHttpRequest等多種技術(shù)的結(jié)合，同時(shí)它還是一種開(kāi)發(fā)模式，一種技術(shù)思想。Ajax包含：

1） 基于XHTML和CSS標(biāo)準(zhǔn)的表示；

2） 使用DOM（Document Object Model 文檔對(duì)象模型）進(jìn)行動(dòng)態(tài)顯示和交互[2]；

3） 使用 XMLHttpRequest 與服務(wù)器進(jìn)行異步通信，進(jìn)行異步數(shù)據(jù)查詢(xún)、檢索；

4） 使用JavaScript綁定一切。

Ajax提供與服務(wù)器異步通信的能力，從而使用戶(hù)從請(qǐng)求/響應(yīng)的循環(huán)中解脫出來(lái)[3]。借助于 Ajax，可以在用戶(hù)單擊按鈕時(shí)，使用JavaScript 和DHTML立即更新UI，并向服務(wù)器發(fā)出異步請(qǐng)求，以執(zhí)行更新或查詢(xún)數(shù)據(jù)庫(kù)。當(dāng)請(qǐng)求返回時(shí)，就可以使用JavaScript和CSS來(lái)相應(yīng)地更新UI，而不是刷新整個(gè)頁(yè)面，這個(gè)過(guò)程使 Web站點(diǎn)看起來(lái)就像桌面應(yīng)用程序一樣是即時(shí)相應(yīng)的。

Ajax的出現(xiàn)，揭開(kāi)了Web開(kāi)發(fā)中無(wú)刷新更新頁(yè)面的序幕，是Web開(kāi)發(fā)技術(shù)中進(jìn)步的一個(gè)里程碑。與傳統(tǒng)的Web開(kāi)發(fā)技術(shù)相比，Ajax具有異步交互、XML數(shù)據(jù)封裝和重視JavaScript腳本等特點(diǎn)。Web應(yīng)用模式與Ajax模式的對(duì)比如圖1所示。

圖1 傳統(tǒng)Web應(yīng)用模式與Ajax模式的對(duì)比

由圖1可以看出，與傳統(tǒng)Web應(yīng)用采用同步交互不同，Ajax在用戶(hù)和服務(wù)器之間引入了一個(gè)中間媒介，從而消除了網(wǎng)絡(luò)交互過(guò)程中的處理：等待、處理、等待的缺點(diǎn)。用戶(hù)瀏覽器在執(zhí)行任務(wù)時(shí)即裝載了Ajax引擎，當(dāng)用戶(hù)打開(kāi)一個(gè)Web頁(yè)面時(shí)，就載入了Ajax引擎。Ajax引擎用JavaScript腳本語(yǔ)言編寫(xiě)，通常在一個(gè)隱藏的框架中。它負(fù)責(zé)編譯用戶(hù)界面及與服務(wù)器之間的交互。Ajax引擎允許用戶(hù)與應(yīng)用軟件之間的交互過(guò)程異步進(jìn)行，獨(dú)立于用戶(hù)與網(wǎng)絡(luò)服務(wù)器件的交流。所以，就算當(dāng)請(qǐng)求和響應(yīng)在引擎和服務(wù)器之間被來(lái)回傳送，用戶(hù)還是能與應(yīng)用程序交互，從而可以用 JavaScript調(diào)用Ajax引擎來(lái)代替產(chǎn)生一個(gè)HTTP的用戶(hù)動(dòng)作。同時(shí)，引擎本身能夠立即處理不需要請(qǐng)求服務(wù)器的動(dòng)作，就像在內(nèi)存中編輯數(shù)據(jù)、驗(yàn)證數(shù)據(jù)等桌面應(yīng)用程序處理一樣便捷快速。

Ajax的一個(gè)最大的特點(diǎn)是無(wú)需刷新頁(yè)面便可向服務(wù)器傳輸或讀寫(xiě)數(shù)據(jù)。這一特點(diǎn)主要得益于 XMLHTTP組件中的XMLHttpRequest對(duì)象。當(dāng)用戶(hù)的頁(yè)面行為（點(diǎn)擊按鈕、輸入文字等）激發(fā) Ajax引擎時(shí)，Ajax引擎調(diào)用JavaScript創(chuàng)建 XMLHttpRequest對(duì)象，設(shè)置 XMLHttpRequest對(duì)象onreadystatechange屬性、請(qǐng)求的資源和請(qǐng)求的方法，隨后通過(guò)send方法發(fā)送請(qǐng)求。當(dāng)open方法設(shè)置成異步方式（true）時(shí)，XMLHttpRequest對(duì)象的send方法發(fā)送請(qǐng)求后，并不立即返回，而是等到服務(wù)器響應(yīng)之后才返回。send方法返回后改變 XMLHttpRequest對(duì)象狀態(tài)。XMLHttpRequest對(duì)象狀態(tài)改變后，onreadystatechange屬性指定的函數(shù)開(kāi)始執(zhí)行，在這個(gè)函數(shù)內(nèi)部就可以對(duì)服務(wù)器的響應(yīng)進(jìn)行處理。

2 Ajax在任務(wù)驅(qū)動(dòng)的VFP網(wǎng)絡(luò)教學(xué)系統(tǒng)中的應(yīng)用

任務(wù)驅(qū)動(dòng)的VFP網(wǎng)絡(luò)教學(xué)系統(tǒng)的總體結(jié)構(gòu)如圖2所示。

圖2 任務(wù)驅(qū)動(dòng)的VFP網(wǎng)絡(luò)教學(xué)系統(tǒng)結(jié)構(gòu)圖

2.1 在線(xiàn)答疑

教師和學(xué)生進(jìn)行在線(xiàn)交流，對(duì)學(xué)生提出的問(wèn)題進(jìn)行解答。在教師與學(xué)生的實(shí)時(shí)交流通訊中，信息數(shù)據(jù)的變化是十分迅速的，答疑頁(yè)面加載以后，通過(guò)Ajax引擎在后臺(tái)進(jìn)行定時(shí)的輪詢(xún)，向服務(wù)器發(fā)送請(qǐng)求，查看是否有最新的消息。如果有則將新的數(shù)據(jù)下載并且在頁(yè)面上進(jìn)行動(dòng)態(tài)的更新，避免用戶(hù)不斷刷新頁(yè)面的不變，防止重復(fù)刷新頁(yè)面造成的資源浪費(fèi)。

2.2 在線(xiàn)考試

在線(xiàn)考試系統(tǒng)的主要功能包括：考生登陸、試題抽取、在線(xiàn)答題、試卷評(píng)分以及后臺(tái)數(shù)據(jù)庫(kù)的管理等功能[4]。其中核心的內(nèi)容主要是試題呈現(xiàn)、答題情況的實(shí)時(shí)保存和考試時(shí)間的準(zhǔn)確控制。運(yùn)用Ajax引擎根據(jù)考試進(jìn)程抽取試題，實(shí)現(xiàn)了頁(yè)面無(wú)刷新的試題呈現(xiàn)；在考試過(guò)程中，當(dāng)出現(xiàn)交卷失敗、網(wǎng)絡(luò)中斷、二次登陸等意外情況時(shí)，會(huì)造成數(shù)據(jù)的丟失。為了保存考試進(jìn)度，保證考試數(shù)據(jù)的安全性和完整性，利用Ajax引擎對(duì)考試過(guò)程進(jìn)行監(jiān)督和管理，隨時(shí)發(fā)布通知和提示，實(shí)時(shí)保存考生答題情況，而不影響考生的答題界面；為了準(zhǔn)確控制考試時(shí)間，利用Ajax引擎通過(guò)服務(wù)器定時(shí)發(fā)送無(wú)刷新的修改客戶(hù)端的剩余考試時(shí)間，而不是頻繁的刷新客戶(hù)端頁(yè)面來(lái)顯示服務(wù)器的時(shí)間。

2.3 網(wǎng)絡(luò)課件

網(wǎng)絡(luò)課件由于按照章節(jié)劃分的自身原因，因此課件制作中廣泛的使用分類(lèi)樹(shù)。應(yīng)用Ajax可以改進(jìn)分類(lèi)樹(shù)的實(shí)現(xiàn)機(jī)制，在初始化頁(yè)面時(shí)，只獲取第一級(jí)子分類(lèi)的數(shù)據(jù)并顯示；當(dāng)用戶(hù)點(diǎn)開(kāi)一級(jí)分類(lèi)的第一個(gè)節(jié)點(diǎn)時(shí)，頁(yè)面會(huì)通過(guò)Ajax向服務(wù)器請(qǐng)求當(dāng)前分類(lèi)所屬的二級(jí)分類(lèi)的所有數(shù)據(jù)；如果再請(qǐng)求已經(jīng)呈現(xiàn)的二級(jí)分類(lèi)的某一個(gè)節(jié)點(diǎn)時(shí)，再次向服務(wù)器請(qǐng)求當(dāng)前分類(lèi)所屬的三級(jí)子分類(lèi)的所有數(shù)據(jù)，以此類(lèi)推。頁(yè)面會(huì)根據(jù)用戶(hù)的操作請(qǐng)求服務(wù)器它所需要的數(shù)據(jù)，這樣就減少了數(shù)據(jù)的下載總量，不會(huì)產(chǎn)生數(shù)據(jù)冗余。同時(shí)，更新頁(yè)面時(shí)不需要重載所有內(nèi)容，只需更新當(dāng)前請(qǐng)求更新的內(nèi)容即可，相對(duì)以前后臺(tái)處理并且重載的方式，大大縮短了用戶(hù)的等待時(shí)間。

2.4 交流平臺(tái)

具備網(wǎng)上論壇、網(wǎng)絡(luò)會(huì)議的功能，用戶(hù)之間可以實(shí)時(shí)交流。使用Ajax技術(shù)，可以由XMLHttpRequest對(duì)象發(fā)出驗(yàn)證請(qǐng)求，而不是提交整個(gè)頁(yè)面，根據(jù)返回的HTTP響應(yīng)判讀驗(yàn)證是否成功，整個(gè)過(guò)程快速而又不加重服務(wù)器負(fù)擔(dān)。同時(shí)，用戶(hù)還能繼續(xù)填寫(xiě)下面的信息，用戶(hù)甚至沒(méi)有意識(shí)到頁(yè)面已經(jīng)與服務(wù)器進(jìn)行了交互。

2.5 用戶(hù)管理

主要包括用戶(hù)基本信息管理、用戶(hù)在線(xiàn)狀況管理。用戶(hù)按照角色分為教師、學(xué)生和管理員三類(lèi)。用戶(hù)管理應(yīng)用過(guò)濾器，所有操作交給JavaScript來(lái)處理而不是向服務(wù)器來(lái)提交一系列的請(qǐng)求。在查找信息或常見(jiàn)問(wèn)題解答時(shí)，Ajax使頁(yè)面視圖的改變大大加速。

3 Ajax技術(shù)在網(wǎng)絡(luò)教學(xué)系統(tǒng)中的應(yīng)用示例

在任務(wù)驅(qū)動(dòng)的VFP網(wǎng)絡(luò)教學(xué)系統(tǒng)中，Ajax主要用于頁(yè)面交互和顯示。下面就以無(wú)刷新頁(yè)面顯示為例介紹Ajax在網(wǎng)絡(luò)教學(xué)系統(tǒng)中的具體應(yīng)用。

Ajax遵循“請(qǐng)求/響應(yīng)”模式，形成一個(gè)發(fā)送和接收XMLHttpRequest請(qǐng)求的Ajax程序框架。通過(guò)在用戶(hù)和服務(wù)器之間增加Ajax引擎中間層來(lái)處理信息的發(fā)送和提取。框架的基本流程為：對(duì)象初始化→發(fā)送請(qǐng)求→服務(wù)器接收→服務(wù)器返回→客戶(hù)端接收→修改客戶(hù)端頁(yè)面內(nèi)容。但其效果卻大大不同，客戶(hù)端的頁(yè)面被無(wú)刷新的直接更新顯示。

在具體的處理過(guò)程中，由客戶(hù)端創(chuàng)建XMLHttpRequest實(shí)例，將目標(biāo)URL設(shè)置到XMLHttpRequest 對(duì)象上，指定回調(diào)函數(shù)，將客戶(hù)的指令使用HTTP方法（GET或POST）向服務(wù)器端發(fā)送異步請(qǐng)求，并等待服務(wù)器響應(yīng)；應(yīng)用服務(wù)器解析到達(dá)的 HTTP請(qǐng)求參數(shù)后，Servlet執(zhí)行必須的應(yīng)用邏輯，將響應(yīng)序列化到 XML中，并將它寫(xiě)回 HTTP Servlet Response。數(shù)據(jù)發(fā)送回客戶(hù)端后，指定在 XMLHttpRequest上的回調(diào)函數(shù)被調(diào)用處理由服務(wù)器返回的XML文檔。最后，更新用戶(hù)界面來(lái)響應(yīng)服務(wù)器傳輸過(guò)來(lái)的數(shù)據(jù)，使用JavaScript來(lái)操縱頁(yè)面的HTML DOM。

下面是客戶(hù)端部分代碼：

4 結(jié)束語(yǔ)

本文以任務(wù)驅(qū)動(dòng)的VFP網(wǎng)絡(luò)教學(xué)系統(tǒng)為例介紹了Ajax的原理和工作過(guò)程，利用Ajax技術(shù)不但提高了B/S應(yīng)用的訪(fǎng)問(wèn)效率，并且從結(jié)構(gòu)上進(jìn)一步優(yōu)化了B/S的應(yīng)用架構(gòu)，提高了軟件的可維護(hù)性。Ajax利用異步交互實(shí)現(xiàn)無(wú)刷新的瀏覽界面給用戶(hù)帶來(lái)了良好的視覺(jué)感受，而且減少了不必要的網(wǎng)絡(luò)數(shù)據(jù)傳輸，加快了頁(yè)面的顯示速度。

近年來(lái)，Ajax應(yīng)用領(lǐng)域已經(jīng)越來(lái)越廣泛。小到簡(jiǎn)單、功能單一的Google Suggest，大到錯(cuò)綜復(fù)雜的Google Maps，都已經(jīng)采用這項(xiàng)技術(shù)[5]。目前雖然 Ajax應(yīng)用還面臨著一些亟待解決的問(wèn)題，但是隨著Ajax技術(shù)研究的進(jìn)一步深入，Ajax將具有良好的應(yīng)用前景。

[1]Jesse James Garrett .Ajax: A new approach to web applications .http://www.adaptivepath.com .

[2]Hendrickson B,Leland R.An improved spectral graph partitioning algorithm for mapping parallel computations[J]. SIAM Journal on Scientific Computing, 1995,16(2):452-469 .

[3]Puder,Arno.A code migration framework for Ajax applications.http://www.puder.org/publications/dais2006.p df.

[4]徐紅勤.Ajax在網(wǎng)絡(luò)考試系統(tǒng)中的應(yīng)用[J].計(jì)算機(jī)應(yīng)用.2007,27(6):349-350.

[5]嚴(yán)麗平,袁可風(fēng),宋凱.基于Ajax技術(shù)的Web應(yīng)用開(kāi)發(fā)研究[J].華東交通大學(xué)學(xué)報(bào). 2007,24(4):97-100.