Ajax 技術在任務驅動的VFP 網絡教學系統(tǒng)中的應用

高偉，郭瑾，劉德山，徐本強

0 引言

隨著計算機和互聯(lián)網的不斷完善和發(fā)展，網絡教學也得到了迅速的普及。為了提高教學質量，網絡教學平臺已經越來越為高校所需求。針對大學目前的非計算機專業(yè)的Visual FoxPro程序設計公共課，由于教學時間有限，教師少、學生多等實際問題，使得教師有限的教學輔導和答疑時間遠遠不能滿足學生的要求。另外，課程要求很強的動手操作能力。基于此，可以借助網絡教學系統(tǒng)解決這些問題。學生可以充分利用網絡的交互功能與老師和同學進行在線交流學習，通過在線考試系統(tǒng)進行測試。

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

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

1 Ajax技術簡介

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

1） 基于XHTML和CSS標準的表示；

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

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

4） 使用JavaScript綁定一切。

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

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

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

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

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

2 Ajax在任務驅動的VFP網絡教學系統(tǒng)中的應用

任務驅動的VFP網絡教學系統(tǒng)的總體結構如圖2所示。

圖2 任務驅動的VFP網絡教學系統(tǒng)結構圖

2.1 在線答疑

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

2.2 在線考試

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

2.3 網絡課件

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

2.4 交流平臺

具備網上論壇、網絡會議的功能，用戶之間可以實時交流。使用Ajax技術，可以由XMLHttpRequest對象發(fā)出驗證請求，而不是提交整個頁面，根據(jù)返回的HTTP響應判讀驗證是否成功，整個過程快速而又不加重服務器負擔。同時，用戶還能繼續(xù)填寫下面的信息，用戶甚至沒有意識到頁面已經與服務器進行了交互。

2.5 用戶管理

主要包括用戶基本信息管理、用戶在線狀況管理。用戶按照角色分為教師、學生和管理員三類。用戶管理應用過濾器，所有操作交給JavaScript來處理而不是向服務器來提交一系列的請求。在查找信息或常見問題解答時，Ajax使頁面視圖的改變大大加速。

3 Ajax技術在網絡教學系統(tǒng)中的應用示例

在任務驅動的VFP網絡教學系統(tǒng)中，Ajax主要用于頁面交互和顯示。下面就以無刷新頁面顯示為例介紹Ajax在網絡教學系統(tǒng)中的具體應用。

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

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

下面是客戶端部分代碼：

4 結束語

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

近年來，Ajax應用領域已經越來越廣泛。小到簡單、功能單一的Google Suggest，大到錯綜復雜的Google Maps，都已經采用這項技術[5]。目前雖然 Ajax應用還面臨著一些亟待解決的問題，但是隨著Ajax技術研究的進一步深入，Ajax將具有良好的應用前景。

[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在網絡考試系統(tǒng)中的應用[J].計算機應用.2007,27(6):349-350.

[5]嚴麗平,袁可風,宋凱.基于Ajax技術的Web應用開發(fā)研究[J].華東交通大學學報. 2007,24(4):97-100.