Aja技術原理應用

前言：本站為你精心整理了Aja技術原理應用范文，希望能為你的創(chuàng)作提供參考價值，我們的客服老師可以幫助你提供個性化的參考范文，歡迎咨詢。

摘要ajax技術是目前深受Web用戶歡迎的一項技術，它利用JavaScript、DOM、XML和XMLHttpRequest實現(xiàn)客戶端與服務器的異步交互，達到很好的用戶體驗。文中介紹的選課系統(tǒng)運用Ajax技術，提高了系統(tǒng)的運行效率。

關鍵詞Ajax技術；Web服務器；XMLHttpRequest；選課系統(tǒng)

1引言

在傳統(tǒng)的Web應用中，大部分用戶動作會觸發(fā)一個連接到Web服務器的HTTP請求，服務器收到請求后要完成諸如驗證合法性、計算數(shù)據(jù)、訪問數(shù)據(jù)庫等處理工作，最后返回一個HTTP頁面到客戶端，這個過程中用戶一直處于等待狀態(tài)。隨著Web技術的廣泛應用，人們對Web應用程序提出了更高的要求，Web不再簡單應用于網(wǎng)站，而是成為許多業(yè)務處理平臺，于是人們更加注重流暢、快捷、人性化的用戶體驗，為了滿足這一需求，一種新的技術出現(xiàn)了，它就是Ajax，它使Web應用程序繼承了桌面應用程序反應靈敏、胖客戶端、客戶體驗優(yōu)秀等優(yōu)點。

2Ajax的工作原理

2.1Ajax工作方式

Ajax(AsynchronousJavaScriptandXML)技術實際上是在客戶端和服務器之間加入一個Ajax引擎，它允許采用異步的方式實現(xiàn)客戶端與服務器的交互，所以用戶不用打開空白窗口等待服務器的響應，而可以繼續(xù)進行客戶端的其它工作。服務器響應完畢之后，將結果提交給Ajax引擎，Ajax引擎使用HTML和CSS技術展示給用戶?？蛻舳撕头掌鞯倪@種異步通信，使用戶感覺不到客戶端與服務器的通信，使得Web程序看起來是即時響應的。圖1顯示了Ajax的工作方式。

圖1Ajax的工作方式

在傳統(tǒng)的Web應用中，客戶端只是通過瀏覽器簡單的顯示內(nèi)容，所有的信息都保存在服務器上，引入Ajax后，它把一部分Web應用程序移到了瀏覽器中，使瀏覽器中不再是純粹的內(nèi)容。用戶登錄時，瀏覽器會從服務器下載大量代碼，這些代碼具有一定的處理用戶請求的能力，由它們來決定是否將用戶的請求提交給服務器。由于用戶的一部分請求可以直接在客戶端進行處理，客戶端與服務器的通信效率會提高許多。

2.2Ajax關鍵技術

Ajax技術并不是一種孤立的技術，它是由多種技術綜合而成的，這些技術包括：JavaScript、DOM、XML和XMLHttpRequest，這些技術按照一定的方式發(fā)揮各自的作用構成Ajax技術。DOM實現(xiàn)動態(tài)顯示和交互，XML進行數(shù)據(jù)交換與處理，XMLHttpRequest進行異步數(shù)據(jù)讀取，JavaScript用于邦定和處理所有數(shù)據(jù)。

1）JavaScript

JavaScript是一種基于對象和事件驅動的腳本語言，具有很好的安全性，它通過嵌入在標準的HTML語言中完成各種與用戶交互的任務。Ajax利用JavaScript的特性實現(xiàn)對用戶行為的實時響應與處理，JavaScript還能通過其屬性和方法操作DOM，將用戶請求通過XMLHttpRequest對象實現(xiàn)與服務器的異步交互通信。

2）DOM

DOM(DocumentObjectModel)是一個能夠讓程序和腳本動態(tài)訪問和更新文檔內(nèi)容、結構和樣式的語言平臺，它提供了標準的HTML和XML對象集，并由一個標準的接口來訪問并操作它們。DOM是一個樹型結構，由元素和節(jié)點組成，它是以面向對象的方式描述的對象模型。DOM對象分為HTMLDOM對象和XMLDOM對象。

3）XML

XML(eXtensibleMarkupLanguage)是可擴展標記語言的縮寫，它通常作為數(shù)據(jù)傳輸?shù)拿浇椋掌鞑捎梅祷豖ML文本的方式將響應后的數(shù)據(jù)返回給客戶端。在應用Ajax技術時，XMLHttpRequest對象可以使用XML作為與服務器端通信的數(shù)據(jù)格式。

4）XMLHttpRequest

XMLHttpRequest是Ajax技術體系中最為核心的技術，它負責將用戶信息以異步方式發(fā)送到服務器，并接收服務器返回的響應信息和數(shù)據(jù)。Web應用程序無需刷新頁面就可以向服務器提交信息，或從服務器得到應答，這樣用戶就不會覺察后臺向服務器提交和接收數(shù)據(jù)，而且，客戶端也不必每次都將數(shù)據(jù)處理工作交給服務器來做，這樣加快了響應速度，也就縮短了用戶的等待時間。

3Ajax在選課系統(tǒng)中的應用

3.1系統(tǒng)功能分析

系統(tǒng)按功能劃分為三個模塊：學生選課模塊、教師開課模塊、管理員管理模塊。如圖2所示。各模塊功能相對獨立，學生選課模塊包括修改個人信息和選課。教師開課模塊包括修改個人信息、瀏覽基本課程列表、查看學生選課信息、申請開課。管理員管理模塊包括為教師和學生分配帳號密碼、注銷或修改用戶狀態(tài)、創(chuàng)建課程和指定任課教師、為課程班級設定人數(shù)、對學生選課信息進行統(tǒng)計、通知學生和老師選課結果和選課時間等。三個模塊都需要經(jīng)過注冊、登錄后才能實現(xiàn)。.2Ajax在系統(tǒng)中的應用

本系統(tǒng)中用戶注冊、修改個人信息、選課、申請教課等功能的實現(xiàn)需要客戶端向服務器發(fā)出HTTP請求，服務器收到請求后進行驗證、訪問數(shù)據(jù)庫等處理，處理完畢后刷新頁面。其間用戶一直處于等待狀態(tài)，如果出現(xiàn)斷電、網(wǎng)絡故障或信息填寫不當?shù)纫馔馐录?，用戶需要重新填寫大量信息，這樣既降低了系統(tǒng)的運行效率，也給用戶帶來諸多不便。

引入Ajax技術后，用戶填寫完信息由XMLHttpRequest提交給服務器進行處理，用戶可以繼續(xù)其它操作，如果驗證不合格客戶端可立即得到通知，而不必重新下載整個網(wǎng)頁，如果出現(xiàn)意外情況也可從服務器獲得已填寫的信息。以下以注冊部分關鍵代碼為例說明Ajax應用。

1)創(chuàng)建XMLHttpRequest對象

functioncreateXMLHttpRequest()

{

if(window.ActiveXObject){

if(navigator.userAgent.toLowerCase().indexOf(''''msie5'''')!=-1){

xmlHttp=newActiveXObject("Microsoft.XMLHTTP")；}

else{

xmlHttp=newActiveXObject("Msxml2.XMLHTTP")；}

}

elseif(window.XMLHttpRequest){

xmlHttp=newXMLHttpRequest()；}

else{

alert("創(chuàng)建XMLHttpRequest失?。?)；}

}

2)XMLHttpRequest發(fā)送請求

functioncheckUser(userId){//checkuserName

varuserObj=document.getElementById(userId)；

varurl="checkUser.asp?userName="+escape(userObj.value)；//請求的URL

xmlHttp.open("GET"，url，true)；//true：異步方式

xmlHttp.onreadystatechange=checkUserOk；//指定狀態(tài)變化時觸發(fā)的事件句柄

xmlHttp.send(null)；///發(fā)送信息

}

3)XMLHttpRequest處理服務器響應

functioncheckUserOk(){//checkuserNameready

if(xmlHttp.readyState==4){//完成

varresponse=xmlHttp.responseText；

varalertObj=document.GetElementById("reg_alert")；

if(response=="該帳號已注冊"){

alertObj.innerHTML="對不起，<br/>此用戶已經(jīng)注冊！"；

}elseif(response=="帳號為空"){

alertObj.innerHTML="對不起，<br/>用戶名不能為空！"；

}elseif(response=="帳號未注冊"){

alertObj.innerHTML="<spanclass=''''blue_txt''''>此用戶名可用！</span>"；

}elseif(response=="帳號不存在"){

alertObj.innerHTML="對不起，<br/>用戶名不可用！"；}

}

}

4結束語

Ajax技術并不是一項復雜的技術，但是它很好地利用了幾項技術的融合，達到了令人滿意的效果，成為深受Web用戶喜愛的一項技術。本選課系統(tǒng)主要在用戶注冊、修改個人信息、填寫選課信息、申請教課頁面運用Ajax技術，該技術避免了用戶多次填寫大量信息的煩惱，縮短了用戶的等待時間，充分體現(xiàn)了Ajax技術的優(yōu)點。

參考文獻

[1]曹衍龍，葉達峰.Ajax編程技術與實例[M].北京：人民郵電出版社，2007.5

[2]RyanAsleson，NathanielTSchutta.Ajax基礎教程[M].北京：人民郵電出版社，2006

[3]尹永田，葛蘇慧，任佳.基于的網(wǎng)上選課系統(tǒng)的設計與實現(xiàn)[J].中國現(xiàn)代教育裝備，2006，12

[4]柯昌正，黃厚寬.Ajax技術的原理與應用[J].鐵路計算機應用，2007，1

[5]DavidFlanagan.JavaScript權威指南[M].北京：機械工業(yè)出版社，2003

[6]DynamicHtmlandXML：TheXMLHttpRequestObject[EB/OL].http：///internet/webcontent/xmlhttpreq.html

[7]BrettMcLaughlin.AJAX簡介[EB/OL].http：///lithe/archive/2006/02/22/605234.aspx