ajax技術(shù)簡單入門

 一、 Ajax的簡介
ajax的英文全稱是“Asynchronous Javascript and XML”，即異步Javascript和XML。Ajax的核心技術(shù)理念在于使用XMLHttpRequest對(duì)象發(fā)送異步請(qǐng)求。最初為XMLHttpRequest對(duì)象提供瀏覽器支持的是微軟公司。是一種用來開發(fā)交互性網(wǎng)頁的技術(shù)，其本身由多種技術(shù)組成。
1、ajax的工作原理，首先我們看下傳統(tǒng)網(wǎng)絡(luò)應(yīng)用模型：


圖1 傳統(tǒng)網(wǎng)絡(luò)應(yīng)用模型
下面是ajax風(fēng)格的通信流

圖2 ajax風(fēng)格的通信流
使用Ajax可以帶來的好處有以下幾方面。
1． 減輕服務(wù)器的負(fù)擔(dān)。Ajax的原則是“按需取數(shù)據(jù)”，可以最大程度地減少冗余請(qǐng)求，減輕服務(wù)器的負(fù)擔(dān)。
2． 無需刷新頁面，減少用戶心理和實(shí)際的等待時(shí)間。特別是在讀取大量數(shù)據(jù)時(shí)，不會(huì)像刷新頁面那樣出現(xiàn)白屏的情況，Ajax使用XMLHttpRequest對(duì)象發(fā)送請(qǐng)求并且得到服務(wù)器響應(yīng)，在不重新載入整個(gè)頁面的情況下，用JavaScript操作DOM更新頁面。因此在讀取數(shù)據(jù)的過程中，用戶所面對(duì)的不是白屏，是原來的頁面內(nèi)容（也可以加一個(gè)“Loading”的提示框讓用戶知道目前正在讀取數(shù)據(jù)），只有在數(shù)據(jù)接收完畢之后才更新相應(yīng)部分的內(nèi)容。這種更新是瞬間的，用戶幾乎感覺不到。
3． 帶來更好的用戶體驗(yàn)。
4． 可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務(wù)器負(fù)擔(dān)，充分利用帶寬資源，節(jié)約空間和寬帶租用成本。
5． 可以調(diào)用外部數(shù)據(jù)。
6． 基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序。
7． 進(jìn)一步促進(jìn)頁面呈現(xiàn)與數(shù)據(jù)的分離。

二、ajax的核心—XMLHttpRequest (XHR)
Ajax應(yīng)用的特點(diǎn)之一就是無需刷新頁面即可向服務(wù)器傳輸或者讀寫數(shù)據(jù)（又稱無刷新更新頁面），這一特點(diǎn)主要得益于XMLHttpRequest對(duì)象。這樣就可以像桌面應(yīng)用程序一樣，只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換，而不用每次都刷新界面，也不用每次將數(shù)據(jù)處理的工作提交給服務(wù)器來做。這樣既減輕了服務(wù)器的負(fù)擔(dān)又加快了響應(yīng)速度、縮短了用戶等候的時(shí)間。
坦率的講，Ajax并不是什么新鮮玩藝。也就是說，Ajax并不是一種全新的技術(shù)，而更像一種技巧，是把過去的幾種技術(shù)巧妙結(jié)合的技巧。真正與Ajax相關(guān)的新名詞應(yīng)該是XMLHttpRequest――一個(gè)最早在IE 5中出現(xiàn)，最近開始在多數(shù)瀏覽器得到支持的用來實(shí)現(xiàn)異步通信的對(duì)象。正如前面所說，B/S模式是利用瀏覽器作為其通用的客戶端，所以要想異步通訊成為可能，必須要得到瀏覽器的支持。如果不是有了瀏覽器對(duì)XMLHttpRequest對(duì)象的廣泛支持，我們可能不會(huì)看到Ajax的今天，更不會(huì)看到許多對(duì)Ajax的著名應(yīng)用，如Google Map，Google Suggest，Ta-da List等。
Ajax的處理過程是怎樣的呢？下圖為Ajax應(yīng)用的標(biāo)準(zhǔn)處理模式：

 
圖 3 標(biāo)準(zhǔn)Ajax處理過程
下表是XHR的方法和屬性：
表 1 標(biāo)準(zhǔn)XMLHttpRequest方法

方 法 說 明
abort()
getAllResponseHeader()
getResponseHeader("Header")
open("method", "url")
send(content)
setRequestHeader("header", "value") 停止當(dāng)前請(qǐng)求
把HTTP請(qǐng)求的所有響應(yīng)頭部作為鍵/值對(duì)返回
返回指定首部的串值
建立對(duì)服務(wù)器的調(diào)用
向服務(wù)器發(fā)送請(qǐng)求
把指定首部設(shè)置為所提供的值


表 2 標(biāo)準(zhǔn)XMLHttpRequest屬性

 

PSE: collapse" cellspacing="0" cellpadding="0" width="588" border="1">

方      法	說      明
abort() getAllResponseHeader() getResponseHeader("Header") open("method", "url") send(content) setRequestHeader("header", "value")	停止當(dāng)前請(qǐng)求 把HTTP請(qǐng)求的所有響應(yīng)頭部作為鍵/值對(duì)返回 返回指定首部的串值 建立對(duì)服務(wù)器的調(diào)用 向服務(wù)器發(fā)送請(qǐng)求 把指定首部設(shè)置為所提供的值

屬 性 說 明

屬    性	說          明
onreadystatechange readyState   responseText responseXML status statusText	每個(gè)狀態(tài)改變都會(huì)觸發(fā)這個(gè)事件處理器 請(qǐng)求的狀態(tài)：0－未初始化，1－正在加載，2－已加載，3－交互中，4－完成 服務(wù)器的響應(yīng)，表示為一個(gè)文本字符串值 服務(wù)器的響應(yīng)，表示為一個(gè)XML 服務(wù)器的HTTP狀態(tài)碼 HTTP狀態(tài)碼的相應(yīng)文本

利用XMLHttpRequest對(duì)象發(fā)送簡單請(qǐng)求
創(chuàng)建了XMLHttpRequest對(duì)象，并了解了XMLHttpRequest對(duì)象的方法和屬性之后，讓我們來看看怎樣利用XMLHttpRequest對(duì)象發(fā)送簡單的請(qǐng)求。利用XMLHttpRequest對(duì)象發(fā)送簡單請(qǐng)求的基本步驟如下：
1） 創(chuàng)建XMLHttpRequest對(duì)象實(shí)例。
2） 設(shè)定XMLHttpRequest對(duì)象的回調(diào)函數(shù)，利用onreadystatechange屬性。
3） 設(shè)定請(qǐng)求屬性：設(shè)定HTTP方法（GET或POST）；設(shè)定目標(biāo)URL。利用open()方法。
將請(qǐng)求發(fā)送給服務(wù)器。利用send()方法。