Ajax技術(shù)原理及其在選課系統(tǒng)中的應(yīng)用

1、 摘 要 Ajax技術(shù)是目前深受Web用戶歡迎的一項(xiàng)技術(shù)，它利用JavaScript、DOM、XML和XMLHttpRequest實(shí)現(xiàn)客戶端與服務(wù)器的異步交互，達(dá)到很好的用戶體驗(yàn)。文中介紹的選課系統(tǒng)運(yùn)用Ajax技術(shù)，提高了系統(tǒng)的運(yùn)行效率。 關(guān)鍵詞 Ajax技術(shù)；Web服務(wù)器；XMLHttpRequest；選課系統(tǒng)1 引言 在傳統(tǒng)的Web應(yīng)用中，大部分用戶動作會觸發(fā)一個(gè)連接到Web服務(wù)器的HTTP請求，服務(wù)器收到請求后要完成諸如驗(yàn)證合法性、計(jì)算數(shù)據(jù)、訪問數(shù)據(jù)庫等處理工作，最后返回一個(gè)HTTP頁面到客戶端，這個(gè)過程中用戶一直處于等待狀態(tài)。隨著Web技術(shù)的廣泛應(yīng)用，人們對Web應(yīng)用程序提出了更高的要

2、求，Web不再簡單應(yīng)用于發(fā)布網(wǎng)站，而是成為許多業(yè)務(wù)處理平臺，于是人們更加注重流暢、快捷、人性化的用戶體驗(yàn)，為了滿足這一需求，一種新的技術(shù)出現(xiàn)了，它就是Ajax，它使Web應(yīng)用程序繼承了桌面應(yīng)用程序反應(yīng)靈敏、胖客戶端、客戶體驗(yàn)優(yōu)秀等優(yōu)點(diǎn)。2 Ajax的工作原理2.1 Ajax工作方式 Ajax(Asynchronous JavaScript and XML)技術(shù)實(shí)際上是在客戶端和服務(wù)器之間加入一個(gè)Ajax引擎，它允許采用異步的方式實(shí)現(xiàn)客戶端與服務(wù)器的交互，所以用戶不用打開空白窗口等待服務(wù)器的響應(yīng)，而可以繼續(xù)進(jìn)行客戶端的其它工作。服務(wù)器響應(yīng)完畢之后，將結(jié)果提交給Ajax引擎，Ajax引擎使用HTM

3、L和CSS技術(shù)展示給用戶?？蛻舳撕头?wù)器的這種異步通信，使用戶感覺不到客戶端與服務(wù)器的通信，使得Web程序看起來是即時(shí)響應(yīng)的。圖1顯示了Ajax的工作方式。圖1 Ajax的工作方式 在傳統(tǒng)的Web應(yīng)用中，客戶端只是通過瀏覽器簡單的顯示內(nèi)容，所有的信息都保存在服務(wù)器上，引入Ajax后，它把一部分Web應(yīng)用程序移到了瀏覽器中，使瀏覽器中不再是純粹的內(nèi)容。用戶登錄時(shí)，瀏覽器會從服務(wù)器下載大量代碼，這些代碼具有一定的處理用戶請求的能力，由它們來決定是否將用戶的請求提交給服務(wù)器。由于用戶的一部分請求可以直接在客戶端進(jìn)行處理，客戶端與服務(wù)器的通信效率會提高許多。2.2 Ajax關(guān)鍵技術(shù) Ajax技術(shù)并不是

4、一種孤立的技術(shù)，它是由多種技術(shù)綜合而成的，這些技術(shù)包括：JavaScript、DOM、XML和XMLHttpRequest，這些技術(shù)按照一定的方式發(fā)揮各自的作用構(gòu)成Ajax技術(shù)。DOM實(shí)現(xiàn)動態(tài)顯示和交互，XML進(jìn)行數(shù)據(jù)交換與處理，XMLHttpRequest進(jìn)行異步數(shù)據(jù)讀取，JavaScript用于邦定和處理所有數(shù)據(jù)。 1）JavaScript JavaScript是一種基于對象和事件驅(qū)動的腳本語言，具有很好的安全性，它通過嵌入在標(biāo)準(zhǔn)的HTML語言中完成各種與用戶交互的任務(wù)。Ajax利用JavaScript的特性實(shí)現(xiàn)對用戶行為的實(shí)時(shí)響應(yīng)與處理，JavaScript還能通過其屬性和方法操作DOM

5、，將用戶請求通過XMLHttpRequest對象實(shí)現(xiàn)與服務(wù)器的異步交互通信。 2）DOM DOM(Document Object Model)是一個(gè)能夠讓程序和腳本動態(tài)訪問和更新文檔內(nèi)容、結(jié)構(gòu)和樣式的語言平臺，它提供了標(biāo)準(zhǔn)的HTML和XML對象集，并由一個(gè)標(biāo)準(zhǔn)的接口來訪問并操作它們。DOM是一個(gè)樹型結(jié)構(gòu)，由元素和節(jié)點(diǎn)組成，它是以面向?qū)ο蟮姆绞矫枋龅膶ο竽Ｐ?。DOM對象分為HTML DOM對象和XML DOM對象。 3）XML XML (eXtensible Markup Language) 是可擴(kuò)展標(biāo)記語言的縮寫，它通常作為數(shù)據(jù)傳輸?shù)拿浇?，服?wù)器采用返回XML文本的方式將響應(yīng)后的數(shù)據(jù)返回給客戶

6、端。在應(yīng)用Ajax技術(shù)時(shí)，XMLHttpRequest對象可以使用XML作為與服務(wù)器端通信的數(shù)據(jù)格式。 4）XMLHttpRequest XMLHttpRequest是Ajax技術(shù)體系中最為核心的技術(shù)，它負(fù)責(zé)將用戶信息以異步方式發(fā)送到服務(wù)器，并接收服務(wù)器返回的響應(yīng)信息和數(shù)據(jù)。Web應(yīng)用程序無需刷新頁面就可以向服務(wù)器提交信息，或從服務(wù)器得到應(yīng)答，這樣用戶就不會覺察后臺向服務(wù)器提交和接收數(shù)據(jù)，而且，客戶端也不必每次都將數(shù)據(jù)處理工作交給服務(wù)器來做，這樣加快了響應(yīng)速度，也就縮短了用戶的等待時(shí)間。3 Ajax在選課系統(tǒng)中的應(yīng)用3.1 系統(tǒng)功能分析 系統(tǒng)按功能劃分為三個(gè)模塊：學(xué)生選課模塊、教師開課模塊、管

7、理員管理模塊。如圖2所示。各模塊功能相對獨(dú)立，學(xué)生選課模塊包括修改個(gè)人信息和選課。教師開課模塊包括修改個(gè)人信息、瀏覽基本課程列表、查看學(xué)生選課信息、申請開課。管理員管理模塊包括為教師和學(xué)生分配帳號密碼、注銷或修改用戶狀態(tài)、創(chuàng)建課程和指定任課教師、為課程班級設(shè)定人數(shù)、對學(xué)生選課信息進(jìn)行統(tǒng)計(jì)、通知學(xué)生和老師選課結(jié)果和選課時(shí)間等。三個(gè)模塊都需要經(jīng)過注冊、登錄后才能實(shí)現(xiàn)。圖2 選課系統(tǒng)功能模塊3.2 Ajax在系統(tǒng)中的應(yīng)用 本系統(tǒng)中用戶注冊、修改個(gè)人信息、選課、申請教課等功能的實(shí)現(xiàn)需要客戶端向服務(wù)器發(fā)出HTTP請求，服務(wù)器收到請求后進(jìn)行驗(yàn)證、訪問數(shù)據(jù)庫等處理，處理完畢后刷新頁面。其間用戶一直處于等待狀

8、態(tài)，如果出現(xiàn)斷電、網(wǎng)絡(luò)故障或信息填寫不當(dāng)?shù)纫馔馐录?，用戶需要重新填寫大量信息，這樣既降低了系統(tǒng)的運(yùn)行效率，也給用戶帶來諸多不便。 引入Ajax技術(shù)后，用戶填寫完信息由XMLHttpRequest提交給服務(wù)器進(jìn)行處理，用戶可以繼續(xù)其它操作，如果驗(yàn)證不合格客戶端可立即得到通知，而不必重新下載整個(gè)網(wǎng)頁，如果出現(xiàn)意外情況也可從服務(wù)器獲得已填寫的信息。以下以注冊部分關(guān)鍵代碼為例說明Ajax應(yīng)用。1)創(chuàng)建XMLHttpRequest對象function createXMLHttpRequest() if (window.ActiveXObject) if(navigator.userAgent.toLow

9、erCase().indexOf (msie 5)!= -1) xmlHttp = new ActiveXObject (Microsoft. XMLHTTP)； else xmlHttp = new ActiveXObject(Msxml2. XMLHTTP)； else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest()； else alert(創(chuàng)建XMLHttpRequest失??！)；2)XMLHttpRequest發(fā)送請求function checkUser(userId) /check userName var user

10、Obj = document. getElement ById(userId)； var url = checkUser.asp?userName= +escape(userObj.value)；/請求的URL xmlHttp.open(GET，url，true)；/true：異步方式 xmlHttp.onreadystatechange = checkUserOk；/指定狀態(tài)變化時(shí)觸發(fā)的事件句柄xmlHttp.send(null)； /發(fā)送信息3)XMLHttpRequest處理服務(wù)器響應(yīng)function checkUserOk() /check userName ready if (xml

11、Http.readyState =4) /完成var response = xmlHttp.response Text； var alertObj = document. Get ElementById (reg_alert)； if(response = 該帳號已注冊) alertObj.innerHTML=對不起，此用戶已經(jīng)注冊??； else if(response = 帳號為空) alertObj.innerHTML=對不起，用戶名不能為空?。?else if(response = 帳號未注冊) alertObj.innerHTML = 此用戶名可用??； else if(response

12、 = 帳號不存在) alertObj.innerHTML=對不起，用戶名不可用！； 4 結(jié)束語 Ajax技術(shù)并不是一項(xiàng)復(fù)雜的技術(shù)，但是它很好地利用了幾項(xiàng)技術(shù)的融合，達(dá)到了令人滿意的效果，成為深受Web用戶喜愛的一項(xiàng)技術(shù)。本選課系統(tǒng)主要在用戶注冊、修改個(gè)人信息、填寫選課信息、申請教課頁面運(yùn)用Ajax技術(shù)，該技術(shù)避免了用戶多次填寫大量信息的煩惱，縮短了用戶的等待時(shí)間，充分體現(xiàn)了Ajax技術(shù)的優(yōu)點(diǎn)。參考文獻(xiàn)1 曹衍龍，葉達(dá)峰.Ajax編程技術(shù)與實(shí)例M.北京：人民郵電出版社，2007.52 Ryan Asleson，Nathaniel T Schutta. Ajax 基礎(chǔ)教程M . 北京：人民郵電出版社，20063 尹永田，葛蘇慧，任佳.基于ASP.NET 的網(wǎng)上選課系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)J. 中國現(xiàn)代教育裝備，2006，124 柯昌正，黃厚寬.Ajax 技術(shù)的原理與應(yīng)用J.鐵路計(jì)算機(jī)應(yīng)用，2007，15David Flanagan. JavaScript權(quán)威指南M. 北京：機(jī)械工業(yè)出版社，20036D