AJAX
開(kāi)發(fā)簡(jiǎn)略
參與人員：
發(fā)布記錄：
|
版本
|
日期
|
作者
|
說(shuō)明
|
|
1.0
|
<chsdate w:st="on" isrocdate="False" islunardate="False" day="28" month="10" year="2005"><span lang="EN-US" style="FONT-FAMILY: 宋體">2005-10-28</span></chsdate>
|
柯自聰
|
創(chuàng)建，第一版
|
|
|
|
|
|
鏈接：
OpenDoc
版權(quán)說(shuō)明：
本文檔版權(quán)歸原作者所有。
在免費(fèi)、且無(wú)任何附加條件的前提下，可在
網(wǎng)絡(luò)媒體中
自由傳播。
如需部分或者全文引用，請(qǐng)事先征求作者意見(jiàn)。
如果本文對(duì)您有些許幫助，表達(dá)謝意的最好方式，是將您發(fā)現(xiàn)的問(wèn)題和文檔改進(jìn)意見(jiàn)及時(shí)反饋給作者。當(dāng)然，倘若有時(shí)間和能力，能為技術(shù)群體無(wú)償貢獻(xiàn)自己的所學(xué)為最好的回饋。
AJAX
開(kāi)發(fā)簡(jiǎn)略
...
1
一、AJAX
定義
...
3
二、現(xiàn)狀與需要解決的問(wèn)題
...
3
三、為什么使用AJAX
.
4
四、誰(shuí)在使用AJAX
.
6
五、用AJAX
改進(jìn)你的設(shè)計(jì)
...
6
例子1
：數(shù)據(jù)校驗(yàn)
...
7
例子2
：按需取數(shù)據(jù)—
級(jí)聯(lián)菜單
...
7
例子3
：讀取外部數(shù)據(jù)
...
7
六、AJAX
的缺陷
...
7
七、AJAX
開(kāi)發(fā)
...
8
7.1
、AJAX
應(yīng)用到的技術(shù)
...
8
A
、XMLHttpRequest
對(duì)象
...
8
B
、Javascript
.
9
C
、DOM
.
9
D
、XML
.
9
7.2
、AJAX
開(kāi)發(fā)框架
...
9
A
、初始化對(duì)象并發(fā)出XMLHttpRequest
請(qǐng)求
...
9
B
、指定響應(yīng)處理函數(shù)
...
10
C
、發(fā)出HTTP
請(qǐng)求
...
10
D
、處理服務(wù)器返回的信息
...
11
E
、一個(gè)初步的開(kāi)發(fā)框架
...
11
7.3
、簡(jiǎn)單的示例
...
13
A
、數(shù)據(jù)校驗(yàn)
...
13
B
、級(jí)聯(lián)菜單
...
14
參考文章：
...
16
在使用瀏覽器瀏覽網(wǎng)頁(yè)的時(shí)候，當(dāng)頁(yè)面刷新很慢的時(shí)候，你的瀏覽器在干什么？你的屏幕內(nèi)容是什么？是的，你的瀏覽器在等待刷新，而你的屏幕內(nèi)容是一片空白，而你在屏幕前苦苦的等待瀏覽器的響應(yīng)。開(kāi)發(fā)人員為了克服這種尷尬的局面，不得不在每一個(gè)可能需要長(zhǎng)時(shí)間等待響應(yīng)的頁(yè)面上增加一個(gè)
DIV
，告訴用戶“系統(tǒng)正在處理您的請(qǐng)求，請(qǐng)稍候
……
”。
現(xiàn)在，有一種越來(lái)越流行越熱的“老”技術(shù)，可以徹底改變這種窘迫的局面。那就是
AJAX
。如今，隨著
Gmail
、
Google-maps
的應(yīng)用和各種瀏覽器的支持，
AJAX
正逐漸吸引全世界的眼球。
AJAX
（
Asynchronous JavaScript and XML
）其實(shí)是多種技術(shù)的綜合，包括
Javascript
、
XHTML
和
CSS
、
DOM
、
XML
和
XSTL
、
XMLHttpRequest
。其中：
使用
XHTML
和
CSS
標(biāo)準(zhǔn)化呈現(xiàn)，使用
DOM
實(shí)現(xiàn)動(dòng)態(tài)顯示和交互，使用
XML
和
XSTL
進(jìn)行數(shù)據(jù)交換與處理，使用
XMLHttpRequest
對(duì)象進(jìn)行異步數(shù)據(jù)讀取，使用
Javascript
綁定和處理所有數(shù)據(jù)。
在
AJAX
提出之前，業(yè)界對(duì)于上述技術(shù)都只是單獨(dú)的使用，沒(méi)有綜合使用，也是由于之前的技術(shù)需求所決定的。隨著應(yīng)用的廣泛，
AJAX
也成為香餑餑了。
傳統(tǒng)的
Web
應(yīng)用采用同步交互過(guò)程，這種情況下，用戶首先向
HTTP
服務(wù)器觸發(fā)一個(gè)行為或請(qǐng)求的呼求。反過(guò)來(lái)，服務(wù)器執(zhí)行某些任務(wù)，再向發(fā)出請(qǐng)求的用戶返回一個(gè)
HTML
頁(yè)面。這是一種不連貫的用戶體驗(yàn)，服務(wù)器在處理請(qǐng)求的時(shí)候，用戶多數(shù)時(shí)間處于等待的狀態(tài)，屏幕內(nèi)容也是一片空白。如下圖：
自從采用超文本作為
Web
傳輸和呈現(xiàn)之后，我們都是采用這么一套傳輸方式。當(dāng)負(fù)載比較小的時(shí)候，這并不會(huì)體現(xiàn)出有什么不妥。可是當(dāng)負(fù)載比較大，響應(yīng)時(shí)間要很長(zhǎng)，
1
分鐘、
2
分鐘
……
數(shù)分鐘的時(shí)候，這種等待就不可忍受了。嚴(yán)重的，超過(guò)響應(yīng)時(shí)間，服務(wù)器干脆告訴你頁(yè)面不可用。另外，某些時(shí)候，我只是想改變頁(yè)面一小部分的數(shù)據(jù)，那為什么我必須重新加載整個(gè)頁(yè)面呢？！當(dāng)軟件設(shè)計(jì)越來(lái)越講究人性化的時(shí)候，這么糟糕的用戶體驗(yàn)簡(jiǎn)直與這種原則背道而馳。為什么老是要讓用戶等待服務(wù)器取數(shù)據(jù)呢？至少，我們應(yīng)該減少用戶等待的時(shí)間。現(xiàn)在，除了程序設(shè)計(jì)、編碼優(yōu)化和服務(wù)器調(diào)優(yōu)之外，還可以采用
AJAX
。
與傳統(tǒng)的
Web
應(yīng)用不同，
AJAX
采用異步交互過(guò)程。
AJAX
在用戶與服務(wù)器之間引入一個(gè)中間媒介，從而消除了網(wǎng)絡(luò)交互過(guò)程中的處理—等待—處理—等待缺點(diǎn)。用戶的瀏覽器在執(zhí)行任務(wù)時(shí)即裝載了
AJAX
引擎。
AJAX
引擎用
JavaScript
語(yǔ)言編寫，通常藏在一個(gè)隱藏的框架中。它負(fù)責(zé)編譯用戶界面及與服務(wù)器之間的交互。
AJAX
引擎允許用戶與應(yīng)用軟件之間的交互過(guò)程異步進(jìn)行，獨(dú)立于用戶與網(wǎng)絡(luò)服務(wù)器間的交流。現(xiàn)在，可以用
Javascript
調(diào)用
AJAX
引擎來(lái)代替產(chǎn)生一個(gè)
HTTP
的用戶動(dòng)作，內(nèi)存中的數(shù)據(jù)編輯、頁(yè)面導(dǎo)航、數(shù)據(jù)校驗(yàn)這些不需要重新載入整個(gè)頁(yè)面的需求可以交給
AJAX
來(lái)執(zhí)行。
使用
AJAX
，可以為
ISP
、開(kāi)發(fā)人員、終端用戶帶來(lái)可見(jiàn)的便捷：
l
減輕服務(wù)器的負(fù)擔(dān)。
AJAX
的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請(qǐng)求，和響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)。
l
無(wú)刷新更新頁(yè)面，減少用戶心理和實(shí)際的等待時(shí)間。特別的，當(dāng)要讀取大量的數(shù)據(jù)的時(shí)候，不用像
Reload
那樣出現(xiàn)白屏的情況，
AJAX
使用
XMLHTTP
對(duì)象發(fā)送請(qǐng)求并得到服務(wù)器響應(yīng)，在不重新載入整個(gè)頁(yè)面的情況下用
Javascript
操作
DOM
最終更新頁(yè)面。所以在讀取數(shù)據(jù)的過(guò)程中，用戶所面對(duì)的不是白屏，是原來(lái)的頁(yè)面內(nèi)容（也可以加一個(gè)
Loading
的提示框讓用戶知道處于讀取數(shù)據(jù)過(guò)程），只有當(dāng)數(shù)據(jù)接收完畢之后才更新相應(yīng)部分的內(nèi)容。這種更新是瞬間的，用戶幾乎感覺(jué)不到。
l
帶來(lái)更好的用戶體驗(yàn)。
l
可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。
l
可以調(diào)用外部數(shù)據(jù)。
l
基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序。
l
進(jìn)一步促進(jìn)頁(yè)面呈現(xiàn)和數(shù)據(jù)的分離。
在應(yīng)用
AJAX
開(kāi)發(fā)上面，
Google
當(dāng)仁不讓是表率。
Orkut
、
Gmail
、
Google Groups
、
Google Maps
、
Google Suggest
都應(yīng)用了這項(xiàng)技術(shù)。
Amazon
的
A9.com
搜索引擎也采用了類似的技術(shù)。
微軟也在積極開(kāi)發(fā)更為完善的
AJAX
應(yīng)用：它即將推出代號(hào)為
Atlas
的
AJAX
工具。
Atlas
的功能超越了
AJAX
本身，包括整合
Visual Studio
的調(diào)試功能。另外，新的
ASP.NET
控件將使客戶端控件與服務(wù)器端代碼的捆綁更為簡(jiǎn)便。
Atlas
客戶腳本框架（
Atlas Clent Script Framework
）也使與網(wǎng)頁(yè)及相關(guān)項(xiàng)目的交互更為便利。但
Visual Studio 2005
中并不包含此項(xiàng)功能。
微軟最近宣布
Atlas
客戶腳本框架將包含如下內(nèi)容（詳細(xì)資料請(qǐng)?jiān)L問(wèn)
Atlas
計(jì)劃網(wǎng)站）：
*
一個(gè)可擴(kuò)展的核心框架，它添加了
JavaScript
功能：如生命同時(shí)期管理、繼承管理、多點(diǎn)傳送處理器和界面管理。
*
一個(gè)常見(jiàn)功能的基本類庫(kù)，有豐富的字符串處理、計(jì)時(shí)器和運(yùn)行任務(wù)。
*
為
HTML
附加動(dòng)態(tài)行為的用戶界面框架。
*
一組用來(lái)簡(jiǎn)化服務(wù)器連通和網(wǎng)絡(luò)訪問(wèn)的網(wǎng)絡(luò)堆棧。
*
一組豐富的用戶界面開(kāi)發(fā)控件，如：自動(dòng)完成的文本框、動(dòng)畫和拖放。
*
處理瀏覽器腳本行為差異的瀏覽器兼容層面。
典型的，微軟將
AJAX
技術(shù)應(yīng)用在
MSN Space
上面。很多人一直都對(duì)
MS Space
服務(wù)感到很奇怪，當(dāng)提交回復(fù)評(píng)論以后，瀏覽器會(huì)暫時(shí)停頓一下，然后在無(wú)刷新的情況下把我提交的評(píng)論顯示出來(lái)。這個(gè)就是應(yīng)用了
AJAX
的效果。試想，如果添加一個(gè)評(píng)論就要重新刷新整個(gè)頁(yè)面，那可真費(fèi)事。
目前，
AJAX
應(yīng)用最普遍的領(lǐng)域是
GIS-Map
方面。
GIS
的區(qū)域搜索強(qiáng)調(diào)快速響應(yīng)，
AJAX
的特點(diǎn)正好符合這種需求。
AJAX
雖然可以實(shí)現(xiàn)無(wú)刷新更新頁(yè)面內(nèi)容，但是也不是什么地方都可以用，主要應(yīng)用在交互較多、頻繁讀數(shù)據(jù)、數(shù)據(jù)分類良好的
Web
應(yīng)用中。現(xiàn)在，讓我們舉兩個(gè)例子，看看如何用
AJAX
改進(jìn)你的設(shè)計(jì)。
在輸入
form
表單內(nèi)容的時(shí)候，我們通常需要確保數(shù)據(jù)的唯一性。因此，常常在頁(yè)面上提供“唯一性校驗(yàn)”按鈕，讓用戶點(diǎn)擊，打開(kāi)一個(gè)校驗(yàn)小窗口；或者等
form
提交到服務(wù)器端，由服務(wù)器判斷后在返回相應(yīng)的校驗(yàn)信息。前者，
window.open
操作本來(lái)就是比較耗費(fèi)資源的，通常由
window. showModalDialog
代替，即使這樣也要彈出一個(gè)對(duì)話框；后者，需要把整個(gè)頁(yè)面提交到服務(wù)器并由服務(wù)器判斷校驗(yàn)，這個(gè)過(guò)程不僅時(shí)間長(zhǎng)而且加重了服務(wù)器負(fù)擔(dān)。而使用
AJAX
，這個(gè)校驗(yàn)請(qǐng)求可以由
XMLHttpRequest
對(duì)象發(fā)出，整個(gè)過(guò)程不需要彈出新窗口，也不需要將整個(gè)頁(yè)面提交到服務(wù)器，快速又不加重服務(wù)器負(fù)擔(dān)。
以前，為了避免每次對(duì)菜單的操作引起的重載頁(yè)面，不采用每次調(diào)用后臺(tái)的方式，而是一次性將級(jí)聯(lián)菜單的所有數(shù)據(jù)全部讀取出來(lái)并寫入數(shù)組，然后根據(jù)用戶的操作用
JavaScript
來(lái)控制它的子集項(xiàng)目的呈現(xiàn)，這樣雖然解決了操作響應(yīng)速度、不重載頁(yè)面以及避免向服務(wù)器頻繁發(fā)送請(qǐng)求的問(wèn)題，但是如果用戶不對(duì)菜單進(jìn)行操作或只對(duì)菜單中的一部分進(jìn)行操作的話，那讀取的數(shù)據(jù)中的一部分就會(huì)成為冗余數(shù)據(jù)而浪費(fèi)用戶的資源，特別是在菜單結(jié)構(gòu)復(fù)雜、數(shù)據(jù)量大的情況下（比如菜單有很多級(jí)、每一級(jí)菜又有上百個(gè)項(xiàng)目），這種弊端就更為突出。
現(xiàn)在應(yīng)用
AJAX
，在初始化頁(yè)面時(shí)我們只讀出它的第一級(jí)的所有數(shù)據(jù)并顯示，在用戶操作一級(jí)菜單其中一項(xiàng)時(shí)，會(huì)通過(guò)
Ajax
向后臺(tái)請(qǐng)求當(dāng)前一級(jí)項(xiàng)目所屬的二級(jí)子菜單的所有數(shù)據(jù)，如果再繼續(xù)請(qǐng)求已經(jīng)呈現(xiàn)的二級(jí)菜單中的一項(xiàng)時(shí)，再向后面請(qǐng)求所操作二級(jí)菜單項(xiàng)對(duì)應(yīng)的所有三級(jí)菜單的所有數(shù)據(jù)，以此類推……這樣，用什么就取什么、用多少就取多少，就不會(huì)有數(shù)據(jù)的冗余和浪費(fèi)，減少了數(shù)據(jù)下載總量，而且更新頁(yè)面時(shí)不用重載全部?jī)?nèi)容，只更新需要更新的那部分即可，相對(duì)于后臺(tái)處理并重載的方式縮短了用戶等待時(shí)間，也把對(duì)資源的浪費(fèi)降到最低。
AJAX
可以調(diào)用外部數(shù)據(jù)，因此，可以對(duì)一些開(kāi)發(fā)的數(shù)據(jù)比如
XML
文檔、
RSS
文檔進(jìn)行二次加工，實(shí)現(xiàn)數(shù)據(jù)整合或者開(kāi)發(fā)應(yīng)用程序。
AJAX
不是完美的技術(shù)。使用
AJAX
，它的一些缺陷不得不權(quán)衡一下：
l
AJAX
大量使用了
Javascript
和
AJAX
引擎，而這個(gè)取決于瀏覽器的支持。
IE5.0
及以上、
Mozilla1.0
、
NetScape7
及以上版本才支持，
Mozilla
雖然也支持
AJAX
，但是提供
XMLHttpRequest
的方式不一樣。所以，使用
AJAX
的程序必須測(cè)試針對(duì)各個(gè)瀏覽器的兼容性。
l
AJAX
更新頁(yè)面內(nèi)容的時(shí)候并沒(méi)有刷新整個(gè)頁(yè)面，因此，網(wǎng)頁(yè)的后退功能是失效的；有的用戶還經(jīng)常搞不清楚現(xiàn)在的數(shù)據(jù)是舊的還是已經(jīng)更新過(guò)的。這個(gè)就需要在明顯位置提醒用戶“數(shù)據(jù)已更新”。
l
對(duì)流媒體的支持沒(méi)有
FLASH
、
Java Applet
好。
l
一些手持設(shè)備（如手機(jī)、
PDA
等）現(xiàn)在還不能很好的支持
Ajax
。
到這里，已經(jīng)可以清楚的知道
AJAX
是什么，
AJAX
能做什么，
AJAX
什么地方不好。如果你覺(jué)得
AJAX
真的能給你的開(kāi)發(fā)工作帶來(lái)改進(jìn)的話，那么繼續(xù)看看怎么使用
AJAX
吧。
7.1
、
AJAX
應(yīng)用到的技術(shù)
AJAX
涉及到的
7
項(xiàng)技術(shù)中，個(gè)人認(rèn)為
Javascript
、
XMLHttpRequest
、
DOM
、
XML
比較有用。
A
、
XMLHttpRequest
對(duì)象
XMLHttpRequest
是
XMLHTTP
組件的對(duì)象，通過(guò)這個(gè)對(duì)象，
AJAX
可以像桌面應(yīng)用程序一樣只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換，而不用每次都刷新界面，也不用每次將數(shù)據(jù)處理的工作都交給服務(wù)器來(lái)做；這樣既減輕了服務(wù)器負(fù)擔(dān)又加快了響應(yīng)速度、縮短了用戶等待的時(shí)間。
IE5.0
開(kāi)始，開(kāi)發(fā)人員可以在
Web
頁(yè)面內(nèi)部使用
XMLHTTP ActiveX
組件擴(kuò)展自身的功能，不用從當(dāng)前的
Web
頁(yè)面導(dǎo)航就可以直接傳輸數(shù)據(jù)到服務(wù)器或者從服務(wù)器接收數(shù)據(jù)。
,Mozilla1.0
以及
NetScape7
則是創(chuàng)建繼承
XML
的代理類
XMLHttpRequest
；對(duì)于大多數(shù)情況，
XMLHttpRequest
對(duì)象和
XMLHTTP
組件很相似，方法和屬性類似，只是部分屬性不同。
XMLHttpRequest
對(duì)象初始化：
<script language="”javascript”" type="text/javascript"></script>
var http_request = false;
//IE
瀏覽器
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request = new ActiveXObject("Microsoft.XMLHTTP");
//Mozilla
瀏覽器
http_request = new XMLHttpRequest();
XMLHttpRequest
對(duì)象的方法：
|
方法
|
描述
|
|
abort()
|
停止當(dāng)前請(qǐng)求
|
|
getAllResponseHeaders()
|
作為字符串返回完整的
headers
|
|
getResponseHeader("headerLabel")
|
作為字符串返回單個(gè)的
header
標(biāo)簽
|
|
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])
|
設(shè)置未決的請(qǐng)求的目標(biāo)
URL
，方法，和其他參數(shù)
|
|
send(content)
|
發(fā)送請(qǐng)求
|
|
setRequestHeader("label", "value")
|
設(shè)置
header
并和請(qǐng)求一起發(fā)送
|
XMLHttpRequest
對(duì)象的屬性：
|
屬性
|
描述
|
|
onreadystatechange
|
狀態(tài)改變的事件觸發(fā)器
|
|
readyState
|
對(duì)象狀態(tài)
(integer):
0 =
未初始化
1 =
讀取中
2 =
已讀取
3 =
交互中
4 =
完成
|
|
responseText
|
服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的文本版本
|
|
responseXML
|
服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的兼容
DOM
的
XML
文檔對(duì)象
|
|
status
|
服務(wù)器返回的狀態(tài)碼
,
如：
404 = "
文件未找到
"
、
200 ="
成功
"
|
|
statusText
|
服務(wù)器返回的狀態(tài)文本信息
|
B
、
Javascript
Javascript
一直被定位為客戶端的腳本語(yǔ)言，應(yīng)用最多的地方是表單數(shù)據(jù)的校驗(yàn)。現(xiàn)在，可以通過(guò)
Javascript
操作
XMLHttpRequest
，來(lái)跟數(shù)據(jù)庫(kù)打交道。
C
、
DOM
DOM
（
Document Object Model
）是提供給
HTML
和
XML
使用的一組
API
，提供了文件的表述結(jié)構(gòu)，并可以利用它改變其中的內(nèi)容和可見(jiàn)物。腳本語(yǔ)言通過(guò)
DOM
才可以跟頁(yè)面進(jìn)行交互。
Web
開(kāi)發(fā)人員可操作及建立文件的屬性、方法以及事件都以對(duì)象來(lái)展現(xiàn)。比如，
document
就代表頁(yè)面對(duì)象本身。
D
、
XML
通過(guò)
XML
（
Extensible Markup Language
），可以規(guī)范的定義結(jié)構(gòu)化數(shù)據(jù)，是網(wǎng)上傳輸?shù)臄?shù)據(jù)和文檔符合統(tǒng)一的標(biāo)準(zhǔn)。用
XML
表述的數(shù)據(jù)和文檔，可以很容易的讓所有程序共享。
7.2
、
AJAX
開(kāi)發(fā)框架
這里，我們通過(guò)一步步的解析，來(lái)形成一個(gè)發(fā)送和接收
XMLHttpRequest
請(qǐng)求的程序框架。
AJAX
實(shí)質(zhì)上也是遵循
Request/Server
模式，所以這個(gè)框架基本的流程也是：對(duì)象初始化
à
發(fā)送請(qǐng)求
à
服務(wù)器接收
à
服務(wù)器返回
à
客戶端接收
à
修改客戶端頁(yè)面內(nèi)容。只不過(guò)這個(gè)過(guò)程是異步的。
A
、初始化對(duì)象并發(fā)出
XMLHttpRequest
請(qǐng)求
為了讓
Javascript
可以向服務(wù)器發(fā)送
HTTP
請(qǐng)求，必須使用
XMLHttpRequest
對(duì)象。使用之前，要先將
XMLHttpRequest
對(duì)象實(shí)例化。之前說(shuō)過(guò)，各個(gè)瀏覽器對(duì)這個(gè)實(shí)例化過(guò)程實(shí)現(xiàn)不同。
IE
以
ActiveX
控件的形式提供，而
Mozilla
等瀏覽器則直接以
XMLHttpRequest
類的形式提供。為了讓編寫的程序能夠跨瀏覽器運(yùn)行，要這樣寫：
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
有些版本的
Mozilla
瀏覽器處理服務(wù)器返回的未包含
XML mime-type
頭部信息的內(nèi)容時(shí)會(huì)出錯(cuò)。因此，要確保返回的內(nèi)容包含
text/xml
信息。
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');
B
、指定響應(yīng)處理函數(shù)
接下來(lái)要指定當(dāng)服務(wù)器返回信息時(shí)客戶端的處理方式。只要將相應(yīng)的處理函數(shù)名稱賦給
XMLHttpRequest
對(duì)象的
onreadystatechange
屬性就可以了。比如：
http_request.onreadystatechange = processRequest;
需要指出的時(shí)，這個(gè)函數(shù)名稱不加括號(hào)，不指定參數(shù)。也可以用
Javascript
即時(shí)定義函數(shù)的方式定義響應(yīng)函數(shù)。比如：
http_request.onreadystatechange = function() {
};
C
、發(fā)出
HTTP
請(qǐng)求
指定響應(yīng)處理函數(shù)之后，就可以向服務(wù)器發(fā)出
HTTP
請(qǐng)求了。這一步調(diào)用
XMLHttpRequest
對(duì)象的
open
和
send
方法。
http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);
open
的第一個(gè)參數(shù)是
HTTP
請(qǐng)求的方法，為
Get
、
Post
或者
Head
。
第二個(gè)參數(shù)是目標(biāo)
URL
。基于安全考慮，這個(gè)
URL
只能是同網(wǎng)域的，否則會(huì)提示“沒(méi)有權(quán)限”的錯(cuò)誤。這個(gè)
URL
可以是任何的
URL
，包括需要服務(wù)器解釋執(zhí)行的頁(yè)面，不僅僅是靜態(tài)頁(yè)面。
第三個(gè)參數(shù)只是指定在等待服務(wù)器返回信息的時(shí)間內(nèi)是否繼續(xù)執(zhí)行下面的代碼。如果為
True
，則不會(huì)繼續(xù)執(zhí)行，直到服務(wù)器返回信息。默認(rèn)為
True
。
按照順序，
open
調(diào)用完畢之后要調(diào)用
send
方法。
send
的參數(shù)如果是以
Post
方式發(fā)出的話，可以是任何想傳給服務(wù)器的內(nèi)容。不過(guò)，跟
form
一樣，如果要傳文件給服務(wù)器，必須先調(diào)用
setRequestHeader
方法，修改
MIME
類別。如下：
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
D
、處理服務(wù)器返回的信息
在第二步我們已經(jīng)指定了響應(yīng)處理函數(shù)，這一步，來(lái)看看這個(gè)響應(yīng)處理函數(shù)都應(yīng)該做什么。
首先，它要檢查
XMLHttpRequest
對(duì)象的
readyState
值，判斷請(qǐng)求目前的狀態(tài)。參照前文的屬性表可以知道，
readyState
值為
4
的時(shí)候，代表服務(wù)器已經(jīng)傳回所有的信息，可以開(kāi)始處理信息并更新頁(yè)面內(nèi)容了。如下：
if (http_request.readyState == 4) {
//
信息已經(jīng)返回，可以開(kāi)始處理
} else {
//
信息還沒(méi)有返回，等待
}
服務(wù)器返回信息后，還需要判斷返回的
HTTP
狀態(tài)碼，確定返回的頁(yè)面沒(méi)有錯(cuò)誤。所有的狀態(tài)碼都可以在
W3C
的官方網(wǎng)站上查到。其中，
200
代表頁(yè)面正常。
if (http_request.status == 200) {
//
頁(yè)面正常，可以開(kāi)始處理信息
} else {
//
頁(yè)面有問(wèn)題
}
XMLHttpRequest
對(duì)成功返回的信息有兩種處理方式：
responseText
：將傳回的信息當(dāng)字符串使用；
responseXML
：將傳回的信息當(dāng)
XML
文檔使用，可以用
DOM
處理。
E
、一個(gè)初步的開(kāi)發(fā)框架
總結(jié)上面的步驟，我們整理出一個(gè)初步的可用的開(kāi)發(fā)框架，供以后調(diào)用；這里，將服務(wù)器返回的信息用
window.alert
以字符串的形式顯示出來(lái)：
<script language="javascript">
var http_request = false;
function send_request(url) {//
初始化、指定處理函數(shù)、發(fā)送請(qǐng)求的函數(shù)
http_request = false;
//
開(kāi)始初始化
XMLHttpRequest
對(duì)象
if(window.XMLHttpRequest) { //Mozilla
瀏覽器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//
設(shè)置
MiME
類別
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE
瀏覽器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { //
異常，創(chuàng)建對(duì)象實(shí)例失敗
window.alert("
不能創(chuàng)建
XMLHttpRequest
對(duì)象實(shí)例
.");
return false;
}
http_request.onreadystatechange = processRequest;
//
確定發(fā)送請(qǐng)求的方式和
URL
以及是否同步執(zhí)行下段代碼
http_request.open("GET", url, true);
http_request.send(null);
}
//
處理返回信息的函數(shù)
function processRequest() {
if (http_request.readyState == 4) { //
判斷對(duì)象狀態(tài)
if (http_request.status == 200) { //
信息已經(jīng)成功返回，開(kāi)始處理信息
alert(http_request.responseText);
} else { //
頁(yè)面不正常
alert("
您所請(qǐng)求的頁(yè)面有異常。
");
}
}
}
</script>
<script language="javascript" type="text/javascript"></script>
var http_request = false;
function send_request(url) {//
初始化、指定處理函數(shù)、發(fā)送請(qǐng)求的函數(shù)
http_request = false;
//
開(kāi)始初始化
XMLHttpRequest
對(duì)象
if(window.XMLHttpRequest) { //Mozilla
瀏覽器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//
設(shè)置
MiME
類別
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE
瀏覽器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { //
異常，創(chuàng)建對(duì)象實(shí)例失敗
window.alert("
不能創(chuàng)建
XMLHttpRequest
對(duì)象實(shí)例
.");
return false;
}
http_request.onreadystatechange = processRequest;
//
確定發(fā)送請(qǐng)求的方式和
URL
以及是否同步執(zhí)行下段代碼
http_request.open("GET", url, true);
http_request.send(null);
}
//
處理返回信息的函數(shù)
function processRequest() {
if (http_request.readyState == 4) { //
判斷對(duì)象狀態(tài)
if (http_request.status == 200) { //
信息已經(jīng)成功返回，開(kāi)始處理信息
alert(http_request.responseText);
} else { //
頁(yè)面不正常
alert("
您所請(qǐng)求的頁(yè)面有異常。
");
}
}
}
7.3
、簡(jiǎn)單的示例
接下來(lái)，我們利用上面的開(kāi)發(fā)框架來(lái)做兩個(gè)簡(jiǎn)單的應(yīng)用。
A
、數(shù)據(jù)校驗(yàn)
在用戶注冊(cè)的表單中，經(jīng)常碰到要檢驗(yàn)待注冊(cè)的用戶名是否唯一。傳統(tǒng)的做法是采用
window.open
的彈出窗口，或者
window. showModalDialog
的對(duì)話框。不過(guò)，這兩個(gè)都需要打開(kāi)窗口。采用
AJAX
后，采用異步方式直接將參數(shù)提交到服務(wù)器，用
window.alert
將服務(wù)器返回的校驗(yàn)信息顯示出來(lái)。代碼如下：
在
之間增加一段
form
表單代碼：
在開(kāi)發(fā)框架的基礎(chǔ)上再增加一個(gè)調(diào)用函數(shù)：
function userCheck() {
var f = document.form1;
var username = f.username.value;
if(username=="") {
window.alert("
用戶名不能為空。
");
f.username.focus();
return false;
}
else {
send_request('sample1_2.jsp?username='+username);
}
}
看看
sample1_2.jsp
做了什么：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String username = request.getParameter("username");
if("educhina".equals(username)) out.print("
用戶名已經(jīng)被注冊(cè)，請(qǐng)更換一個(gè)用戶名。
");
else out.print("
用戶名尚未被使用，您可以繼續(xù)。
");
%>
運(yùn)行一下，嗯，沒(méi)有彈出窗口，沒(méi)有頁(yè)面刷新，跟預(yù)想的效果一樣。如果需要的話，可以在
sample1_2.jsp
中實(shí)現(xiàn)更復(fù)雜的功能。最后，只要將反饋信息打印出來(lái)就可以了。
B
、級(jí)聯(lián)菜單
我們?cè)诘谖宀糠痔岬嚼?
AJAX
改進(jìn)級(jí)聯(lián)菜單的設(shè)計(jì)。接下來(lái)，我們就演示一下如何“按需取數(shù)據(jù)”。
首先，在
<body></body>
中間增加如下
HTML
代碼：
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20">
<a href="javascript:void(0)" onClick="showRoles('pos_1')">
經(jīng)理室
</a>
</td>
</tr>
<tr style="display:none">
<td height="20" id="pos_1"> </td>
</tr>
<tr>
<td height="20">
<a href="javascript:void(0)" onClick="showRoles('pos_2')">
開(kāi)發(fā)部
</a>
</td>
</tr>
<tr style="display:none ">
<td id="pos_2" height="20"> </td>
</tr>
</table>
在框架的基礎(chǔ)上增加一個(gè)響應(yīng)函數(shù)
showRoles(obj)
：
//
顯示部門下的崗位
function showRoles(obj) {
document.getElementById(obj).parentNode.style.display = "";
document.getElementById(obj).innerHTML = "
正在讀取數(shù)據(jù)
..."
currentPos = obj;
send_request("sample2_2.jsp?playPos="+obj);
}
修改框架的
processRequest
函數(shù)：
//
處理返回信息的函數(shù)
function processRequest() {
if (http_request.readyState == 4) { //
判斷對(duì)象狀態(tài)
if (http_request.status == 200) { //
信息已經(jīng)成功返回，開(kāi)始處理信息
document.getElementById(currentPos).innerHTML = http_request.responseText;
} else { //
頁(yè)面不正常
alert("
您所請(qǐng)求的頁(yè)面有異常。
");
}
}
}
最后就是
smaple2_2.jsp
了：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String playPos = request.getParameter("playPos");
if("pos_1".equals(playPos))
out.print("
總經(jīng)理
<br>
副總經(jīng)理
");
else if("pos_2".equals(playPos))
out.println("
總工程師
<br>
軟件工程師
");
%>
運(yùn)行一下看看效果：
[轉(zhuǎn)]AJAX開(kāi)發(fā)簡(jiǎn)略