Ajax技術原理及其應用

來源：文萃谷 1.56W

　　Ajax技術原理及其應用

摘要 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

ajax 技術