摘 要：隨著多媒體技術(shù)的迅猛發(fā)展，越來越多的高校正在加快多媒體課件資源的建設(shè)，基于B/S模式的網(wǎng)絡(luò)多媒體課件系統(tǒng)很容易部署，具有傳播范圍廣、易于操作等優(yōu)點(diǎn)，被廣泛應(yīng)用到各高校中，但傳統(tǒng)的B/S架構(gòu)都是以同步請求/響應(yīng)模式作為基礎(chǔ)的，無法實現(xiàn)更加高端的用戶體驗。以AJXA技術(shù)為例，以異步請求/響應(yīng)模式實現(xiàn)在網(wǎng)絡(luò)多媒體課件制作系統(tǒng)中的應(yīng)用設(shè)計，并對系統(tǒng)實現(xiàn)過程中的關(guān)鍵技術(shù)要點(diǎn)做了重點(diǎn)解析。

關(guān)鍵詞：B/S模式； AJAX； Javascirpt;DOM;xml;XMLHttpRequest

中圖分類號：G434，TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1004373X(2008)1611903

Application Research of AJAX in Network Multimedia Courseware System

CAO Genyi

(Anhui Vocational Institute of Industrial Economy，Hefei，230051，China)

Abstract：With the rapid development of multimedia technology，more and more colleges and universities are speeding up the construction of multimedia courseware resources，it is easy to deploy based on the B/S mode network multimedia courseware system.It has been widely applied to all colleges and universities with its wide range of communication，easy operation and other advantages，but the traditional B/S structure is based on synchronous request/response mode，which can not be achieved to more highend user experience.In this paper，the author takes AJXA technology as an example to realize the application and design of the network multimedia courseware making system with asynchronous request/response mode，and pay special attention to analyze the key technical points in the process of achievement

Keywords：B/S mode;AJAX;Javascirpt;DOM;xml;XMLHttpRequest

隨著計算機(jī)網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，如今Web技術(shù)已經(jīng)成為商務(wù)和信息的中心，許多新方法和新技術(shù)也都粉墨登場。B/S結(jié)構(gòu)已成為大量多媒體技術(shù)應(yīng)用的首選平臺，越來越多的高校也開始采用B/S架構(gòu)來搭建課件系統(tǒng)，而AJAX的出現(xiàn)無疑是為當(dāng)今的因特網(wǎng)添加了一道亮麗的風(fēng)景線，讓用戶的體驗變的更加豐富多彩。AJXA技術(shù)主要以Javascirpt，xmlhttprequest，DOM和XML為核心，來實現(xiàn)Web異步交互功能的應(yīng)用，在Web應(yīng)用研究開發(fā)中得到越來越多的關(guān)注。

1 AJAX定義

AJAX是通過現(xiàn)有的幾種成熟技術(shù)的特性，相互結(jié)合構(gòu)成一個功能強(qiáng)大的新技術(shù)。AJAX包括：

XHTML和CSS實現(xiàn)基本內(nèi)容的顯示；

使用文檔對象模型Document Object Model來實現(xiàn)動態(tài)顯示和交互；

使用XML和XSLT來實現(xiàn)數(shù)據(jù)交換和操作；

使用XMLHttpRequest或XMLHttp來實現(xiàn)異步數(shù)據(jù)查詢；

使用JavaScript將以上技術(shù)結(jié)合在一起。

2 AJAX的工作流程

傳統(tǒng)的Web應(yīng)用程序，一般都是采取請求→刷新→顯示模式，這就是同步請求/響應(yīng)模式，就是每當(dāng)用戶通過單擊按鈕和鏈接向服務(wù)器發(fā)送一個請求時，都由服務(wù)器接收請求并處理，處理完畢后服務(wù)器將信息發(fā)送至瀏覽器進(jìn)行顯示。而在服務(wù)器處理的時間段里瀏覽器處于等待狀態(tài)，顯示為空白和無響應(yīng)狀態(tài)，用戶所能做的事情只有等待。如圖1所示。

在基于AJAX的Web程序中，最為重要的特征就是將同步請求轉(zhuǎn)變?yōu)楫惒秸埱蟆＿@意味著客戶端和服務(wù)器不必再互相等待，而是可以進(jìn)行一些并發(fā)的操作。用戶在發(fā)送請求以后可以繼續(xù)當(dāng)前工作，包括瀏覽或提交信息。在服務(wù)器響應(yīng)完成之后，AJAX引擎會將更新的數(shù)據(jù)顯示給用戶，而用戶則根據(jù)響應(yīng)內(nèi)容決定自己下一步的行為。AJAX在后臺異步的方式工作，用戶無需等待服務(wù)器的處理，可以進(jìn)行并發(fā)工作，使得用戶界面層次上更為接近C/S架構(gòu)的客戶端平臺，并且AJAX還帶來了性能的提高，因為用戶的行為經(jīng)過了AJAX引擎的處理，使得客戶端可以只獲取需要的數(shù)據(jù)。DOM模型使得動態(tài)改變頁面的層次結(jié)構(gòu)成為可能，這樣動態(tài)獲取的數(shù)據(jù)可以動態(tài)嵌入到頁面中去，避免了數(shù)據(jù)復(fù)雜加載帶來的速度和效率問題。服務(wù)器端的組織形式則可以將功能劃分的更細(xì)，這樣服務(wù)器就可以只為有用的數(shù)據(jù)進(jìn)行工作，大大提高了運(yùn)行效率。如圖2所示。

3 AJAX的優(yōu)勢

提高效率 利用xmlhttprequest獲取局部數(shù)據(jù)，減少了冗余請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)，所以最大可能的節(jié)約時間、帶寬、CPU耗用；

節(jié)約資源 利用AJAX技術(shù)把以前的一些服務(wù)器負(fù)擔(dān)的工作移交到客戶端，由閑置的客戶端進(jìn)行處理，從而節(jié)約服務(wù)器和帶寬負(fù)擔(dān)；

界面友好 AJAX無需刷新頁面，減少用戶等待時間，增強(qiáng)了用戶體驗；

技術(shù)支持 AJAX是基于標(biāo)準(zhǔn)化并被廣泛支持的技術(shù)，無需插件和第三方程序；

易于移植 AJAX不受底層平臺限制、有助于軟件的移植。

4 AJAX 在網(wǎng)絡(luò)多媒體課件系統(tǒng)中的應(yīng)用實例

4.1 用戶注冊驗證

在以往的網(wǎng)絡(luò)多媒體課件系統(tǒng)應(yīng)用中，一般情況下用戶注冊模塊，都是將信息填好后，再傳遞給服務(wù)器端進(jìn)行檢驗，這樣就會給用戶帶來不便。如:用戶名已被他人注冊的情況，注冊用戶只能等到提交注冊信息后，才能接收到系統(tǒng)反饋的信息，這樣就可能造成注冊失敗，從而浪費(fèi)用戶的寶貴時間。

在填寫表單內(nèi)容時，如果需要保證數(shù)據(jù)的惟一性（例如新用戶注冊填寫的用戶名），則必須對用戶輸入的內(nèi)容進(jìn)行數(shù)據(jù)驗證。數(shù)據(jù)驗證通常有2種方式：一種是直接填寫，然后提交表單，這種方式需要將這個頁面數(shù)據(jù)提交到服務(wù)器端進(jìn)行驗證，整個過程不僅時間長而且造成了服務(wù)器不必要的負(fù)擔(dān)；第二種方式是改進(jìn)了的驗證過程，用戶可以通過點(diǎn)擊相應(yīng)的驗證按鈕，打開新窗口查看驗證結(jié)果，但是這樣需要新開一個瀏覽器窗口或者對話框，還需要專門編寫驗證的頁面，比較耗費(fèi)系統(tǒng)資源。而使用AJAX技術(shù)，可以由XMLHttpRequest對象發(fā)出驗證請求，根據(jù)返回的HTTP響應(yīng)判斷驗證是否成功，整個過程不需要彈出新窗口，也不需要將整個頁面提交到服務(wù)器，快速而又不加重服務(wù)器負(fù)擔(dān)。通常驗證流程如圖3，圖4所示:

4.2 自由布局

在傳統(tǒng)的網(wǎng)頁中，頁面的布局是固定的，但利用AJAX技術(shù)后則可以根據(jù)用戶的使用習(xí)慣來進(jìn)行自由布局，操作起來更加簡單，并且在設(shè)置過程中用戶可以根據(jù)需要隨時改變窗口的布局。當(dāng)用戶關(guān)閉一個窗口時，也可以移動某一個窗口到需要的位置，而這些操作并不需要通過刷新頁面就可以直接保存新的布局設(shè)置。

這些功能都是利用Javascirpt實現(xiàn)窗口的拖動響應(yīng)、釋放響應(yīng)、顯示和隱藏的，而拖動完成后向服務(wù)器發(fā)送XMLHttpRequest請求以完成數(shù)據(jù)的保存，通過CSS樣式，豐富窗口效果，最終實現(xiàn)自由布局。

4.3 原理分析

(1) 當(dāng)鼠標(biāo)按下調(diào)用MouseDown事件，獲得拖動元素的初始值；

(2) 當(dāng)拖動時調(diào)用MouseOver事件，從而改變拖動元素的位置；

(3) 當(dāng)鼠標(biāo)釋放時調(diào)用MOUSEUP事件，獲得結(jié)束拖動時的鼠標(biāo)位置。判斷是否需要容器接收結(jié)點(diǎn)，如果需要容器接收該元素，則需要判斷容器是否能接收被拖動的元素，如果能則在相應(yīng)的結(jié)點(diǎn)插入拖動的元素，并刪除原始點(diǎn)上的該元素，如果不能接收，要使拖動元素恢復(fù)到拖動前的位置，刪除MouseOver事件。

4.4 防止頁面過期

服務(wù)器中的Session變量，主要用來保存客戶端的用戶信息，為了節(jié)約服務(wù)器資源，通常會有個默認(rèn)時間，所以session存在一個過期（也就是超時）的問題。如果在設(shè)置的時間內(nèi)沒有與服務(wù)器進(jìn)行交互，那么就會觸發(fā)服務(wù)器的session_end 事件，此時session就會過期。因此當(dāng)教師在線編輯課件時出現(xiàn)內(nèi)容較多的情況時，可能超出這個時間才與服務(wù)器進(jìn)行交互，提交失敗，導(dǎo)致編輯的內(nèi)容丟失，如果利用AJAX技術(shù)，以定時刷新局部窗口來與服務(wù)器端進(jìn)行交互，使瀏覽器窗口在被打開情況下與服務(wù)器保持暢通連接。

5 結(jié) 語

AJAX并不是一支獨(dú)秀，Adobe公司的Flex等很多技術(shù)體系都在嘗試提供更豐富的用戶體驗，隨著Web異步交互的需求成長，會有越來越多的技術(shù)涌現(xiàn)出來。目前AJAX還處于前景與風(fēng)險并存的階段，雖然在應(yīng)用領(lǐng)域AJAX已經(jīng)取得了一定的進(jìn)展，并且在用戶認(rèn)知度和影響力上也具有了相當(dāng)?shù)姆e累，但是其發(fā)展道路仍不能說一馬平川，同時目前的AJAX還只是一個新生事物，并不是十分完美成熟的技術(shù)，所以還是存在一定的不足。所以在網(wǎng)絡(luò)多媒體課件制作系統(tǒng)開發(fā)過程中也因該根據(jù)實際的需求，適當(dāng)?shù)厥褂肁JAX技術(shù)，來豐富用戶體驗是有必要的。

參 考 文 獻(xiàn)

［1］Dflying Chen.ASP.NET AJAX程序設(shè)計：第II卷（客戶端）［M］.北京：人民郵電出版社，2007.

［2］\\阿斯利森，\\舒塔.AJAX基礎(chǔ)教程 ［M］.北京：人民郵電出版社， 2006.

［3］\\克拉恩，帕斯卡雷洛，杰姆斯.AJAX實戰(zhàn) ［M］.北京：人民郵電出版社，2006.

［4］扎卡斯，姆克皮克，福西特.AJAX高級程序設(shè)計 ［M］.北京：人民郵電出版社，2006.

［5］李剛，宋偉，邱哲.征服AJAX+Lucene構(gòu)建搜索引擎 ［M］.北京：人民郵電出版社，2006.

［6］楊華.AJAX及在ASP.NET中的實現(xiàn)\\.現(xiàn)代電子技術(shù)，2006，29(12):7982.

作者簡介 曹根義 男，1966年出生，安徽貴池人，工程師。院網(wǎng)絡(luò)中心主任。主要從事網(wǎng)絡(luò)與通訊技術(shù)方面的研究。