摘 要 Ajax技術是目前深受Web使用者歡迎的一項技術，它利用JavaScript、DOM、XML和XMLHttpRequest實現客戶端與伺服器的非同步互動，達到很好的使用者體驗。文中介紹的選課系統運用Ajax技術，提高了系統的執行效率。
關鍵詞 Ajax技術；Web伺服器；XMLHttpRequest；選課系統
1 引言
在傳統的Web應用中，大部分使用者動作會觸發一個連線到Web伺服器的HTTP請求，伺服器收到請求後要完成諸如驗證合法性、計算資料、訪問資料庫等處理工作，最後返回一個HTTP頁面到客戶端，這個過程中使用者一直處於等待狀態。隨著Web技術的廣泛應用，人們對Web應用程式提出了更高的要求，Web不再簡單應用於釋出網站，而是成為許多業務處理平臺，於是人們更加註重流暢、快捷、人性化的使用者體驗，為了滿足這一需求，一種新的技術出現了，它就是Ajax，它使Web應用程式繼承了桌面應用程式反應靈敏、胖客戶端、客戶體驗優秀等優點。
2 Ajax的工作原理2.1 Ajax工作方式
Ajax(Asynchronous JavaScript and XML)技術實際上是在客戶端和伺服器之間加入一個Ajax引擎，它允許採用非同步的方式實現客戶端與伺服器的互動，所以使用者不用開啟空白視窗等待伺服器的響應，而可以繼續進行客戶端的其它工作。伺服器響應完畢之後，將結果提交給Ajax引擎，Ajax引擎使用HTML和CSS技術展示給使用者。客戶端和伺服器的這種非同步通訊，使使用者感覺不到客戶端與伺服器的通訊，使得Web程式看起來是即時響應的。圖1顯示了Ajax的工作方式。
圖1 Ajax的工作方式
在傳統的Web應用中，客戶端只是通過瀏覽器簡單的顯示內容，所有的資訊都儲存在伺服器上，引入Ajax後，它把一部分Web應用程式移到了瀏覽器中，使瀏覽器中不再是純粹的`內容。使用者登入時，瀏覽器會從伺服器下載大量程式碼，這些程式碼具有一定的處理使用者請求的能力，由它們來決定是否將使用者的請求提交給伺服器。由於使用者的一部分請求可以直接在客戶端進行處理，客戶端與伺服器的通訊效率會提高許多。
2.2 Ajax關鍵技術
Ajax技術並不是一種孤立的技術，它是由多種技術綜合而成的，這些技術包括：JavaScript、DOM、XML和XMLHttpRequest，這些技術按照一定的方式發揮各自的作用構成Ajax技術。DOM實現動態顯示和互動，XML進行資料交換與處理，XMLHttpRequest進行非同步資料讀取，JavaScript用於邦定和處理所有資料。
1）JavaScript
JavaScript是一種基於物件和事件驅動的指令碼語言，具有很好的安全性，它通過嵌入在標準的HTML語言中完成各種與使用者互動的任務。Ajax利用JavaScript的特性實現對使用者行為的實時響應與處理，JavaScript還能通過其屬性和方法操作DOM，將使用者請求通過XMLHttpRequest物件實現與伺服器的非同步互動通訊。
2）DOM
DOM(Document Object Model)是一個能夠讓程式和指令碼動態訪問和更新文件內容、結構和樣式的語言平臺，它提供了標準的HTML和XML物件集，並由一個標準的介面來訪問並操作它們。DOM是一個樹型結構，由元素和節點組成，它是以面向物件的方式描述的物件模型。DOM物件分為HTML DOM物件和XML DOM物件。
3）XML
XML (eXtensible Markup Language) 是可擴充套件標記語言的縮寫，它通常作為資料傳輸的媒介，伺服器採用返回XML文字的方式將響應後的資料返回給客戶端。在應用Ajax技術時，XMLHttpRequest物件可以使用XML作為與伺服器端通訊的資料格式。
4）XMLHttpRequest
XMLHttpRequest是Ajax技術體系中最為核心的技術，它負責將使用者資訊以非同步方式傳送到伺服器，並接收伺服器返回的響應資訊和資料。Web應用程式無需重新整理頁面就可以向伺服器提交資訊，或從伺服器得到應答，這樣使用者就不會覺察後臺向伺服器提交和接收資料，而且，客戶端也不必每次都將資料處理工作交給伺服器來做，這樣加快了響應速度，也就縮短了使用者的等待時間。
3 Ajax在選課系統中的應用
3.1 系統功能分析
系統按功能劃分為三個模組：學生選課模組、教師開課模組、管理員管理模組。如圖2所示。各模組功能相對獨立，學生選課模組包括修改個人資訊和選課。教師開課模組包括修改個人資訊、瀏覽基本課程列表、檢視學生選課資訊、申請開課。管理員管理模組包括為教師和學生分配帳號密碼、登出或修改使用者狀態、建立課程和指定任課教師、為課程班級設定人數、對學生選課資訊進行統計、通知學生和老師選課結果和選課時間等。三個模組都需要經過註冊、登入後才能實現。
圖2 選課系統功能模組
3.2 Ajax在系統中的應用
本系統中使用者註冊、修改個人資訊、選課、申請教課等功能的實現需要客戶端向伺服器發出HTTP請求，伺服器收到請求後進行驗證、訪問資料庫等處理，處理完畢後重新整理頁面。其間使用者一直處於等待狀態，如果出現斷電、網路故障或資訊填寫不當等意外事件，使用者需要重新填寫大量資訊，這樣既降低了系統的執行效率，也給使用者帶來諸多不便。
引入Ajax技術後，使用者填寫完資訊由XMLHttpRequest提交給伺服器進行處理，使用者可以繼續其它操作，如果驗證不合格客戶端可立即得到通知，而不必重新下載整個網頁，如果出現意外情況也可從伺服器獲得已填寫的資訊。以下以註冊部分關鍵程式碼為例說明Ajax應用。
1)建立XMLHttpRequest物件
function createXMLHttpRequest()
{
if (veXObject) {
if(werCase()xOf (#39;msie 5#39;)!= -1) {
xmlHttp = new ActiveXObject ("Microsoft. XMLHTTP")；}
else {
xmlHttp = new ActiveXObject("Msxml2. XMLHTTP")；}
}
else if (ttpRequest) {
xmlHttp = new XMLHttpRequest()；}
else {
alert("建立XMLHttpRequest失敗！")；}
}
2)XMLHttpRequest傳送請求
function checkUser(userId){ //check userName
var userObj = document. getElement ById(userId)；
var url = " +escape(e)；//請求的URL
("GET"，url，true)；//true：非同步方式
adystatechange = checkUserOk；//指定狀態變化時觸發的事件控制代碼
(null)； ///傳送資訊
}
3)XMLHttpRequest處理伺服器響應
function checkUserOk(){ //check userName ready
if (yState ==4) { //完成
var response = onse Text；
var alertObj = document. Get ElementById ("reg_alert")；
if(response == "該帳號已註冊"){
rHTML="對不起，
此使用者已經註冊！"；
}else if(response == "帳號為空"){
rHTML="對不起，
使用者名稱不能為空！"；
}else if(response == "帳號未註冊"){
rHTML = "此使用者名稱可用！"；
}else if(response == "帳號不存在"){
rHTML="對不起，
使用者名稱不可用！"；}
}
}
4 結束語
Ajax技術並不是一項複雜的技術，但是它很好地利用了幾項技術的融合，達到了令人滿意的效果，成為深受Web使用者喜愛的一項技術。本選課系統主要在使用者註冊、修改個人資訊、填寫選課資訊、申請教課頁面運用Ajax技術，該技術避免了使用者多次填寫大量資訊的煩惱，縮短了使用者的等待時間，充分體現了Ajax技術的優點。
參考文獻
[1] 曹衍龍，葉達峰程式設計技術與例項[M].北京：人民郵電出版社，2007.5
[2] Ryan Asleson，Nathaniel T Schutta. Ajax 基礎教程[M] . 北京：人民郵電出版社，2006
[3] 尹永田，葛蘇慧，任佳.基於 的網上選課系統的設計與實現[J]. 中國現代教育裝備，2006，12
[4] 柯昌正，黃厚寬 技術的原理與應用[J].鐵路計算機應用，2007，1
[5]David Flanagan. JavaScript權威指南[M]. 北京：機械工業出版社，2003
[6]Dynamic Html and XML：The XMLHttpRequest Object[EB/OL]：// tent/
[7] BrettMcLaughlin. AJAX簡介[EB/OL]. http：//. net/lithe/archive/2006/02/22/605234. aspx
