高偉,郭瑾,劉德山,徐本強
隨著計算機和互聯(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)。
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ù)內部就可以對服務器的響應進行處理。
任務驅動的VFP網絡教學系統(tǒng)的總體結構如圖2所示。
圖2 任務驅動的VFP網絡教學系統(tǒng)結構圖
教師和學生進行在線交流,對學生提出的問題進行解答。在教師與學生的實時交流通訊中,信息數(shù)據(jù)的變化是十分迅速的,答疑頁面加載以后,通過Ajax引擎在后臺進行定時的輪詢,向服務器發(fā)送請求,查看是否有最新的消息。如果有則將新的數(shù)據(jù)下載并且在頁面上進行動態(tài)的更新,避免用戶不斷刷新頁面的不變,防止重復刷新頁面造成的資源浪費。
在線考試系統(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ā)送無刷新的修改客戶端的剩余考試時間,而不是頻繁的刷新客戶端頁面來顯示服務器的時間。
網絡課件由于按照章節(jié)劃分的自身原因,因此課件制作中廣泛的使用分類樹。應用Ajax可以改進分類樹的實現(xiàn)機制,在初始化頁面時,只獲取第一級子分類的數(shù)據(jù)并顯示;當用戶點開一級分類的第一個節(jié)點時,頁面會通過Ajax向服務器請求當前分類所屬的二級分類的所有數(shù)據(jù);如果再請求已經呈現(xiàn)的二級分類的某一個節(jié)點時,再次向服務器請求當前分類所屬的三級子分類的所有數(shù)據(jù),以此類推。頁面會根據(jù)用戶的操作請求服務器它所需要的數(shù)據(jù),這樣就減少了數(shù)據(jù)的下載總量,不會產生數(shù)據(jù)冗余。同時,更新頁面時不需要重載所有內容,只需更新當前請求更新的內容即可,相對以前后臺處理并且重載的方式,大大縮短了用戶的等待時間。
具備網上論壇、網絡會議的功能,用戶之間可以實時交流。使用Ajax技術,可以由XMLHttpRequest對象發(fā)出驗證請求,而不是提交整個頁面,根據(jù)返回的HTTP響應判讀驗證是否成功,整個過程快速而又不加重服務器負擔。同時,用戶還能繼續(xù)填寫下面的信息,用戶甚至沒有意識到頁面已經與服務器進行了交互。
主要包括用戶基本信息管理、用戶在線狀況管理。用戶按照角色分為教師、學生和管理員三類。用戶管理應用過濾器,所有操作交給JavaScript來處理而不是向服務器來提交一系列的請求。在查找信息或常見問題解答時,Ajax使頁面視圖的改變大大加速。
在任務驅動的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。
下面是客戶端部分代碼:
本文以任務驅動的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.