- 相關(guān)推薦
Ajax技術(shù)原理及其應用
Ajax技術(shù)原理及其應用
摘 要 Ajax技術(shù)是目前深受Web用戶(hù)歡迎的一項技術(shù)，它利用JavaScript、DOM、XML和XMLHttpRequest實(shí)現客戶(hù)端與服務(wù)器的異步交互，達到很好的用戶(hù)體驗。文中介紹的選課系統運用Ajax技術(shù)，提高了系統的運行效率。
關(guān)鍵詞 Ajax技術(shù)；Web服務(wù)器；XMLHttpRequest；選課系統
1 引言
在傳統的Web應用中，大部分用戶(hù)動(dòng)作會(huì )觸發(fā)一個(gè)連接到Web服務(wù)器的HTTP請求，服務(wù)器收到請求后要完成諸如驗證合法性、計算數據、訪(fǎng)問(wèn)數據庫等處理工作，最后返回一個(gè)HTTP頁(yè)面到客戶(hù)端，這個(gè)過(guò)程中用戶(hù)一直處于等待狀態(tài)。隨著(zhù)Web技術(shù)的廣泛應用，人們對Web應用程序提出了更高的要求，Web不再簡(jiǎn)單應用于發(fā)布網(wǎng)站，而是成為許多業(yè)務(wù)處理平臺，于是人們更加注重流暢、快捷、人性化的用戶(hù)體驗，為了滿(mǎn)足這一需求，一種新的技術(shù)出現了，它就是Ajax，它使Web應用程序繼承了桌面應用程序反應靈敏、胖客戶(hù)端、客戶(hù)體驗優(yōu)秀等優(yōu)點(diǎn)。
2 Ajax的工作原理2.1 Ajax工作方式
Ajax(Asynchronous JavaScript and XML)技術(shù)實(shí)際上是在客戶(hù)端和服務(wù)器之間加入一個(gè)Ajax引擎，它允許采用異步的方式實(shí)現客戶(hù)端與服務(wù)器的交互，所以用戶(hù)不用打開(kāi)空白窗口等待服務(wù)器的響應，而可以繼續進(jìn)行客戶(hù)端的其它工作。服務(wù)器響應完畢之后，將結果提交給Ajax引擎，Ajax引擎使用HTML和CSS技術(shù)展示給用戶(hù)�？蛻�(hù)端和服務(wù)器的這種異步通信，使用戶(hù)感覺(jué)不到客戶(hù)端與服務(wù)器的通信，使得Web程序看起來(lái)是即時(shí)響應的。圖1顯示了Ajax的'工作方式。
圖1 Ajax的工作方式
在傳統的Web應用中，客戶(hù)端只是通過(guò)瀏覽器簡(jiǎn)單的顯示內容，所有的信息都保存在服務(wù)器上，引入Ajax后，它把一部分Web應用程序移到了瀏覽器中，使瀏覽器中不再是純粹的內容。用戶(hù)登錄時(shí)，瀏覽器會(huì )從服務(wù)器下載大量代碼，這些代碼具有一定的處理用戶(hù)請求的能力，由它們來(lái)決定是否將用戶(hù)的請求提交給服務(wù)器。由于用戶(hù)的一部分請求可以直接在客戶(hù)端進(jìn)行處理，客戶(hù)端與服務(wù)器的通信效率會(huì )提高許多。
2.2 Ajax關(guān)鍵技術(shù)
Ajax技術(shù)并不是一種孤立的技術(shù)，它是由多種技術(shù)綜合而成的，這些技術(shù)包括：JavaScript、DOM、XML和XMLHttpRequest，這些技術(shù)按照一定的方式發(fā)揮各自的作用構成Ajax技術(shù)。DOM實(shí)現動(dòng)態(tài)顯示和交互，XML進(jìn)行數據交換與處理，XMLHttpRequest進(jìn)行異步數據讀取，JavaScript用于邦定和處理所有數據。
1）JavaScript
JavaScript是一種基于對象和事件驅動(dòng)的腳本語(yǔ)言，具有很好的安全性，它通過(guò)嵌入在標準的HTML語(yǔ)言中完成各種與用戶(hù)交互的任務(wù)。Ajax利用JavaScript的特性實(shí)現對用戶(hù)行為的實(shí)時(shí)響應與處理，JavaScript還能通過(guò)其屬性和方法操作DOM，將用戶(hù)請求通過(guò)XMLHttpRequest對象實(shí)現與服務(wù)器的異步交互通信。
2）DOM
DOM(Document Object Model)是一個(gè)能夠讓程序和腳本動(dòng)態(tài)訪(fǎng)問(wèn)和更新文檔內容、結構和樣式的語(yǔ)言平臺，它提供了標準的HTML和XML對象集，并由一個(gè)標準的接口來(lái)訪(fǎng)問(wèn)并操作它們。DOM是一個(gè)樹(shù)型結構，由元素和節點(diǎn)組成，它是以面向對象的方式描述的對象模型。DOM對象分為HTML DOM對象和XML DOM對象。
3）XML
XML (eXtensible Markup Language) 是可擴展標記語(yǔ)言的縮寫(xiě)，它通常作為數據傳輸的媒介，服務(wù)器采用返回XML文本的方式將響應后的數據返回給客戶(hù)端。在應用Ajax技術(shù)時(shí)，XMLHttpRequest對象可以使用XML作為與服務(wù)器端通信的數據格式。
4）XMLHttpRequest
XMLHttpRequest是Ajax技術(shù)體系中最為核心的技術(shù)，它負責將用戶(hù)信息以異步方式發(fā)送到服務(wù)器，并接收服務(wù)器返回的響應信息和數據。Web應用程序無(wú)需刷新頁(yè)面就可以向服務(wù)器提交信息，或從服務(wù)器得到應答，這樣用戶(hù)就不會(huì )覺(jué)察后臺向服務(wù)器提交和接收數據，而且，客戶(hù)端也不必每次都將數據處理工作交給服務(wù)器來(lái)做，這樣加快了響應速度，也就縮短了用戶(hù)的等待時(shí)間。
3 Ajax在選課系統中的應用
3.1 系統功能分析
系統按功能劃分為三個(gè)模塊：學(xué)生選課模塊、教師開(kāi)課模塊、管理員管理模塊。如圖2所示。各模塊功能相對獨立，學(xué)生選課模塊包括修改個(gè)人信息和選課。教師開(kāi)課模塊包括修改個(gè)人信息、瀏覽基本課程列表、查看學(xué)生選課信息、申請開(kāi)課。管理員管理模塊包括為教師和學(xué)生分配帳號密碼、注銷(xiāo)或修改用戶(hù)狀態(tài)、創(chuàng )建課程和指定任課教師、為課程班級設定人數、對學(xué)生選課信息進(jìn)行統計、通知學(xué)生和老師選課結果和選課時(shí)間等。三個(gè)模塊都需要經(jīng)過(guò)注冊、登錄后才能實(shí)現。
圖2 選課系統功能模塊
3.2 Ajax在系統中的應用
本系統中用戶(hù)注冊、修改個(gè)人信息、選課、申請教課等功能的實(shí)現需要客戶(hù)端向服務(wù)器發(fā)出HTTP請求，服務(wù)器收到請求后進(jìn)行驗證、訪(fǎng)問(wèn)數據庫等處理，處理完畢后刷新頁(yè)面。其間用戶(hù)一直處于等待狀態(tài)，如果出現斷電、網(wǎng)絡(luò )故障或信息填寫(xiě)不當等意外事件，用戶(hù)需要重新填寫(xiě)大量信息，這樣既降低了系統的運行效率，也給用戶(hù)帶來(lái)諸多不便。
引入Ajax技術(shù)后，用戶(hù)填寫(xiě)完信息由XMLHttpRequest提交給服務(wù)器進(jìn)行處理，用戶(hù)可以繼續其它操作，如果驗證不合格客戶(hù)端可立即得到通知，而不必重新下載整個(gè)網(wǎng)頁(yè)，如果出現意外情況也可從服務(wù)器獲得已填寫(xiě)的信息。以下以注冊部分關(guān)鍵代碼為例說(shuō)明Ajax應用。
1)創(chuàng )建XMLHttpRequest對象
function createXMLHttpRequest()
{
if (window.ActiveXObject) {
if(navigator.userAgent.toLowerCase().indexOf (#39;msie 5#39;)!= -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 userObj = 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ù)器響應
function checkUserOk(){ //check userName ready
if (xmlHttp.readyState ==4) { //完成
var response = xmlHttp.response Text；
var alertObj = document. Get ElementById ("reg_alert")；
if(response == "該帳號已注冊"){
alertObj.innerHTML="對不起，
此用戶(hù)已經(jīng)注冊！"；
}else if(response == "帳號為空"){
alertObj.innerHTML="對不起，
用戶(hù)名不能為空！"；
}else if(response == "帳號未注冊"){
alertObj.innerHTML = "此用戶(hù)名可用！"；
}else if(response == "帳號不存在"){
alertObj.innerHTML="對不起，
用戶(hù)名不可用！"；}
}
}
4 結束語(yǔ)
Ajax技術(shù)并不是一項復雜的技術(shù)，但是它很好地利用了幾項技術(shù)的融合，達到了令人滿(mǎn)意的效果，成為深受Web用戶(hù)喜愛(ài)的一項技術(shù)。本選課系統主要在用戶(hù)注冊、修改個(gè)人信息、填寫(xiě)選課信息、申請教課頁(yè)面運用Ajax技術(shù)，該技術(shù)避免了用戶(hù)多次填寫(xiě)大量信息的煩惱，縮短了用戶(hù)的等待時(shí)間，充分體現了Ajax技術(shù)的優(yōu)點(diǎn)。
參考文獻
[1] 曹衍龍，葉達峰.Ajax編程技術(shù)與實(shí)例[M].北京：人民郵電出版社，2007.5
[2] Ryan Asleson，Nathaniel T Schutta. Ajax 基礎教程[M] . 北京：人民郵電出版社，2006
[3] 尹永田，葛蘇慧，任佳.基于A(yíng)SP.NET 的網(wǎng)上選課系統的設計與實(shí)現[J]. 中國現代教育裝備，2006，12
[4] 柯昌正，黃厚寬.Ajax 技術(shù)的原理與應用[J].鐵路計算機應用，2007，1
[5]David Flanagan. JavaScript權威指南[M]. 北京：機械工業(yè)出版社，2003
[6]Dynamic Html and XML：The XMLHttpRequest Object[EB/OL].http：//developer.apple.com/internet/webcon tent/xmlhttpreq.html
[7] BrettMcLaughlin. AJAX簡(jiǎn)介[EB/OL]. http：//blog.csdn. net/lithe/archive/2006/02/22/605234. aspx
【Ajax技術(shù)原理及其應用】相關(guān)文章：
關(guān)于A(yíng)jax技術(shù)原理的幾點(diǎn)總結01-10
關(guān)于VOIP網(wǎng)絡(luò )技術(shù)及其應用07-08
關(guān)于計算機的模擬技術(shù)及其應用10-11
ping命令的應用及原理10-25
計算機應用技術(shù)存在問(wèn)題及其改善措施04-08
動(dòng)漫游戲的現狀及其交互式創(chuàng )作技術(shù)的應用07-16
計算機云計算的原理與應用10-28