基于Ａｊａｘ技術的ｗｅｂ模型在網絡課程開發中的應用研究

【摘要】Ajax 是web2.0 標準的核心技術，基于Ajax的web模型通過在客戶端建構中間層，實現了頁面表現與應用邏輯的分離，并支持用戶操作與服務器響應的異步化。文章簡要闡述了Ajax模型的核心概念、體系結構和異步交互機制，并通過《電子技術實驗》網絡課程的開發實踐，探討了其在異步交互web環境中的應用，發現Ajax技術能改變傳統web應用模型中“點擊——等待”的不連貫行為方式，顯著提高學習者的交互體驗。

【關鍵詞】Ajax；異步交互；網絡課程；用戶體驗

【中圖分類號】G434 【文獻標識碼】B 【論文編號】1009—8097 (2008) 04—0099—04

一 當前web網絡課程存在的問題

隨著我國教育信息化的不斷發展，網絡課程的開發與應用已日益引起高校一線教師和教學工作人員的重視。網絡課程是在先進的教育思想、教學理論與學習理論指導下的基于Web 的課程，其學習過程具有交互性、共享性、開放性、協作性和自主性等基本特征[1]。學生利用網絡課程進行學習的過程實質上就是學生在網絡環境中與媒體界面、學習資源、學習伙伴及教師等因素的相互作用來建構知識意義的過程。因此，作為網絡教學活動支撐的網絡課程，需要具備動態性、互動性、多樣性的特點，因而也對數據傳輸速度和用戶體驗提出了更高的要求。

當前的網絡課程絕大部分采用目前最為流行的BS（Browser/Server）模式結構。在這種結構下，用戶工作界面通過Web瀏覽器來實現，很少一部分的事務邏輯在前端（Browser）實現，主要的事務邏輯都在服務器端（Server）實現。BS請求響應機制所使用的 HTTP協議決定其特有的工作機制以及Web應用模式，但也決定了其自身的一些缺陷。譬如，Web應用程序的交互效果不如桌面應用程序，客戶端功能和用戶體驗效果不佳等。原因在于傳統的web模式采用同步交互方式，即用戶在提交請求后，被迫中止當前工作，等待頁面的刷新、交換和重載。這種完整的頁面傳輸方式，使得服務器處理客戶端提交的請求時，客戶端只能空閑等待，面臨較長時間的空白頁，哪怕只是小量數據的讀取，用戶每次都要浪費時間和帶寬去重新讀取返回的整個頁面。這種“點擊—等待—點擊”不連貫的用戶體驗大大降低了響應的實時性，也影響了學習者的學習積極性和學習效果。這種不能滿足web用戶更多的全方位的體驗要求，就是被MacroMdia公司稱之為“體驗問題（Experience Matters）”[2]。

Jesse James Garrett在《Ajax: A New Approach to Web Application》一文中提出了應用Ajax來實現web應用的異步交互功能[3]。目前，Ajax技術在web 應用研究和開發中得到了越來越多的關注；基于Ajax的web開發模型為上述問題提供了較好的解決方案。

二 Ajax技術：新的web交互模型

1 Ajax原理

Ajax（Asynchronous JavaScript and XML）是Javascript， CSS， DOM， XMLHttpRequest等多項Web技術按照規范進行組合，并在基于B/S的web應用中整合信息交互的設計模式。其核心要素包括：

（1）使用XHTML 和CSS 實現標準化的呈現界面；

（2）使用DOM 實現動態的顯示和交互；

（3）使用XMLHttpRequest 實現與服務器的異步通信；

（4）使用 Javascript 將 XHTML、DOM、XML、XMLHttpRequest 綁定。

Ajax技術通過在客戶端構建中間層Ajax引擎，實現頁面表現與應用邏輯的分離，進而實現用戶操作與服務器響應的異步化。傳統的Web處理流程與基于Ajax的Web處理流程的比較如圖1所示。由圖1我們可以看出，Ajax中使用的各種技術使得整個交互通信過程是異步進行的：用戶單擊按鈕時，使用JavaScript和DHTML立即更新UI，并向服務器發出異步請求，以執行更新或查詢數據庫；當請求返回時，就可以使用JavaScript和CSS來相應地更新UI，而不是刷新整個頁面。最重要的是，用戶甚至沒有察覺瀏覽器正在與服務器通信，Web站點看起來是即時響應的。

通過Ajax引擎， 使得應用過程自然、 操作流暢， 因為客戶端只和服務器交換有用的數據， 而頁面元素、版式等不必要的數據則不再重新從服務器端加載， 提高了網絡傳輸效率。XML 文檔對象模型(XML DOM )的統一規范， 使我們用JavaScript 標準的DOM 對象就可以解析服務器端傳來的數據， 減輕了編碼和調試的工作量， 并能夠保證應用跨平臺運行。

2 基于Ajax的web模型

在現有技術無法消除網絡延遲的情況下，Ajax技術采用異步方式處理遠程調用，改變了傳統“請求——響應”這樣一種單向的通信協議模式（如圖2），提出了一種新的web開發模型（圖3）。

基于Ajax的web模型體現了如下四個基本原則：

（1） 瀏覽器中是應用而不是內容。 傳統基于頁面的web應用中，用戶每次與服務器交互，都會獲得另一個新文檔（內容）；在Ajax應用中，服務器交付一個客戶端應用給瀏覽器，這個應用可以處理很多的用戶交互，對于自己無法獨立處理的交互，應用會以后臺方式發送請求給服務器，而不會打斷用戶的操作流程。

（2） 服務器交付的是數據而不是內容。傳統web中，服務器在每個步驟都要把模板文件、內容和數據以大雜燴的方式發送給瀏覽器，而在Ajax中，通過異步請求做到“按需讀取”內容，大大降低帶寬消耗。

（3） 用戶交互變得流暢而連續。在傳統Web應用中，用戶通過點擊超鏈接或提交表單與服務器交互，然后等待頁面刷新，這時用戶實際上處于沒人管的狀態，用戶從愉快的使用體驗中被拽了出來，讓他們感覺到自己面對的只不過是一臺冰冷的機器罷了，與之對應的是，Ajax中可以對鼠標移動、拖拽 、鍵盤響應等豐富的用戶操作事件進行捕獲，讓服務器在用戶身邊為用戶服務，而不是擋在用戶前面打斷他們的操作。

（4） 組織良好，結構清晰。Ajax可以繼承傳統web開發的MVC體系架構，從而使Ajax應用從設計模式到代碼庫的組織都秩序井然；同時為用戶界面保持清晰的編程視圖、保持結構與視覺樣式的分離，這種職責分離對于開發大型Ajax應用非常重要。

三 Ajax在《電子技術實驗》網絡課程開發中的應用

由于Ajax較好地實踐了web2.0的思想和觀念，為網絡課程的開發提供了一種新的web開發模型。因此，我們首次將Ajax技術應用在廣州大學《電子技術實驗》網絡課程的開發中。

《電子技術實驗》是我校實驗中心開出的面向全校的一門專業基礎課程，與之對應的網絡課程平臺提供的功能有：多個班級的學生能在實驗現場，依據自己的實驗進度，同時在線編輯實驗原始數據，撰寫并提交實驗預習報告、正式報告；教師在線批閱、答疑、封存、講評、打印實驗報告，實現實驗過程和實驗報告的信息化，數字化管理。因此，該網絡課程對實時交互要求較高，定位于獨占式應用，還應付長時間的密集使用。

開發框架選擇微軟公司的ASP.NET Ajax，該框架是目前對 Ajax 技術最完備的封裝，其豐富的組件可以讓我們非常方便地利用面向對象的思想實現基于Ajax 的web技術；開發工具使用visual studio2005；數據庫使用SQL Server2000；使用IIS 6.0發布web應用。此外，還引用了ASP.NET AJAX Control Toolkit，該庫提供了豐富的具有Ajax思想的UI控件。開發出的《電子技術實驗》網絡課程如圖4所示。

通過將Ajax技術應用于《電子技術實驗》網絡課程的開發中，我們發現具有如下技術優勢：

（1）“無刷新”式更新頁面，減輕學習者心理和實際等待時間，提供更為平滑的用戶體驗。傳統的基于頁面的Web課程強制用戶進入提交/等待/重新顯示范例，用戶的動作總是與服務器的“思考時間”同步。Ajax提供與服務器異步通信的能力，從而使用戶從請求/響應的循環中解脫出來。使B/S結構的應用程序根據用戶輸入實現頁面實時、局部、快速刷新，模擬類似桌面應用程序的效果，從而顯著提高用戶體驗。

（2）促使web應用從瞬態模式適應到獨占模式。軟件可用性專家Alan Cooper定義了軟件的兩種主要使用模式：瞬態的（transient）和獨占的（sovereign）[4]。瞬態應用可能每天都會偶爾使用一下，但是總是作為次要的活動，突發性地用上一會兒。與之形成鮮明對比的是獨占應用，它需要應付用戶每天幾個小時的持續應用。傳統的基于web頁面的方案對于瞬態應用是足夠了，但是對于獨占應用卻遠遠不夠。Ajax最終允許開發人員和設計人員使用標準的HTML/CSS/JavaScript堆棧創建“桌面風格（desktop_like）”成為可能，能夠擁有一個響應極其靈敏的web站點使web應用逐漸過渡到到獨占模式。從而網絡課程不只是發布與提供信息，而是伴隨在學習者的學習全過程，無微不至。

（3）進一步促進頁面呈現與數據分離。Ajax 重用了廣泛應用于傳統web應用中的mvc架構模型，并用這種服務器端模型來設計客戶端代碼，更有效地從業務邏輯中分離出頁面表現。這種分離可以使頁面設計師和程序員的角色相分離，不互相影響，有利于分工合作、反映團隊的組織結構和技能，顯著提高效率。

以下是Ajax技術實現的部分應用效果：

（1）豐富的客戶端功能。提供桌面應用程序的豐富控件，如選項卡、日期、以及對用戶操作進行捕獲而支持拖拽操作的控件；同時采用異步傳輸機制，用戶可以模擬桌面程序多窗口處理業務（如圖4所示）。

（2）為學習者提供平滑交互，即不需要每次提交都刷新頁面，解決了傳統web中“白屏”現象，學習交互活動頻繁，參與程度高。

（3）直接編輯web數據，而不是要求用戶導航到新的頁面來編輯數據。對于Ajax，當用戶單擊Edit時，可以將靜態表格刷新為內容可編輯的表格。用戶單擊Done之后，就可以發出一個Ajax請求來更新服務器，并刷新表格，使其包含靜態、只讀的數據。

（4）草稿自動保存功能。程序中的autosave類定時自動發送請求保存實驗數據，并主動更新頁面提示信息“最后于*分*秒自動保存成功”，無需用戶單擊Update并等待服務器重新發送整個頁面，并解決長時間操作因session過期而丟失數據的問題。

（5）無刷新搜索和預覽（preview）功能。傳統web中一般在彈出窗口或提交頁面才能實現，Ajax異步請求可使用戶在當前頁面中完成工作，提高效率。

（6） 提升站點的性能，這是通過減少從服務器下載的數據量而實現的。實踐表明，Ajax的異步交互模式相比于傳統的整頁刷新模式，能節省網絡帶寬超過60%。

四 結束語

十年來，“請求—響應”的單向交互模式在我們對因特網教育應用的看法上打下了深深的烙印，傳統的web應用就這么一直牢牢地束縛在頁面刷新操作之上。我們所習慣的傳統web交互模型并不適合獨占式應用，只有打破這種交互模式，新的應用才有可能浮現出來。令Ajax與眾不同的地方也不是它所使用的技術本身，而是通過使用這些技術所帶來的新的交互模型，并催生一種新型的軟件應用模式。目前，Ajax開始在網絡虛擬實驗系統、Web Servers、考試系統等開發中得到嘗試，在網絡學習環境的構建中有著很好的應用前景。

參考文獻

[1]何克抗.現代教育技術和優質網絡課程的設計與開發[J].中國大學教學，2005，(1):16-21.

[2]施奈德曼，張國印，李健利.用戶界面設計:有效的人機交互策略[M].北京:電子工業出版社，2006:90-91.

[3]Jesse James Garrett， Ajax: A New Approach to Web Application[DB/OL].2007-08-14.

[4]Dave Crane， Eric Pascarello， Darren James. Ajaxcn.org 譯.Ajax實戰 [M].人民郵電出版社，2006 :12-13.