Ajax-8.25

2005年Jesse James Garrett發(fā)表了一篇文章墨吓,標(biāo)題為:“Ajax:A new Approach to Web Applications”。他在這篇文章里介紹了一種技術(shù)填渠,用他的話說,就叫:Ajax鸟辅,是Asynchronous JavaScript + XML的簡寫氛什。這種技術(shù)能夠想服務(wù)器請求額外的數(shù)據(jù)而無須卸載頁面(即刷新),會帶來更好的用戶體驗匪凉。一時間枪眉,席卷全球。

一.XMLHttpRequest

Ajax技術(shù)核心是XMLHttpRequest對象(簡稱XHR)再层,這是由微軟首先引入的一個特性贸铜,其他瀏覽器提供商后來都提供了相同的實現(xiàn)。在XHR出現(xiàn)之前聂受,Ajax式的通信必須借助一些hack手段來實現(xiàn)蒿秦,大多數(shù)是使用隱藏的框架或內(nèi)嵌框架。
XHR的出現(xiàn)蛋济,提供了向服務(wù)器發(fā)送請求和解析服務(wù)器響應(yīng)提供了流暢的接口棍鳖。能夠以異步方式從服務(wù)器獲取更多的信息,這就意味著碗旅,用戶只要觸發(fā)某一事件鹊杖,在不刷新網(wǎng)頁的情況下,更新服務(wù)器最新的數(shù)據(jù)扛芽。
雖然Ajax中的x代表的是XML骂蓖,但Ajax通信和數(shù)據(jù)格式無關(guān),也就是說這種技術(shù)不一定使用XML川尖。

1.1創(chuàng)建xhr

IE7+登下、Firefox、Opera叮喳、Chrome和Safari都支持原生的XHR對象被芳,在這些瀏覽器中創(chuàng)建XHR對象可以直接實例化XMLHttpRequest即可。

var xhr = new XMLHttpRequest();
alert(xhr);                             //XMLHttpRequest

1.2open 方法

在使用XHR對象時馍悟,先必須調(diào)用open()方法畔濒,它接受三個參數(shù):要發(fā)送的請求類型(get、post)锣咒、請求的URL和表示是否異步侵状。
xhr.open('get', 'demo.php', false); //對于demo.php的get請求赞弥,false同步

PS:demo.php的代碼如下:
<?php echo Date('Y-m-d H:i:s')?> //一個時間

open()方法并不會真正發(fā)送請求,而只是啟動一個請求以備發(fā)送趣兄。通過send()方法進(jìn)行發(fā)送請求绽左,send()方法接受一個參數(shù),作為請求主體發(fā)送的數(shù)據(jù)艇潭。如果不需要則拼窥,必須填null。執(zhí)行send()方法之后蹋凝,請求就會發(fā)送到服務(wù)器上鲁纠。
xhr.send(null); //發(fā)送請求

1.3 服務(wù)器返回內(nèi)容

當(dāng)請求發(fā)送到服務(wù)器端,收到響應(yīng)后鳍寂,響應(yīng)的數(shù)據(jù)會自動填充XHR對象的屬性房交。那么一共有四個屬性:

屬性名 說明
responseText 作為響應(yīng)主體被返回的文本
responseXML 如果響應(yīng)主體內(nèi)容類型是"text/xml"或"application/xml",則返回包含響應(yīng)數(shù)據(jù)的XML DOM文檔
status 響應(yīng)的HTTP狀態(tài)
statusText HTTP狀態(tài)的說明

接受響應(yīng)之后伐割,第一步檢查status屬性候味,以確定響應(yīng)已經(jīng)成功返回。一般而已HTTP狀態(tài)代碼為200作為成功的標(biāo)志隔心。除了成功的狀態(tài)代碼白群,還有一些別的:

1.4 http狀態(tài)碼

HTTP狀態(tài)碼 狀態(tài)字符串 說明
200 OK 服務(wù)器成功返回了頁面
300 跳轉(zhuǎn) 重定向地址
400 Bad Request 語法錯誤導(dǎo)致服務(wù)器不識別
401 Unauthorized 請求需要用戶認(rèn)證
404 Not found 指定的URL在服務(wù)器上找不到
500 Internal Server Error 服務(wù)器遇到意外錯誤,無法完成請求
503 ServiceUnavailable 由于服務(wù)器過載或維護(hù)導(dǎo)致無法完成請求

http://tool.oschina.net/commons?type=5 http響應(yīng)碼 全解
我們判斷HTTP狀態(tài)值即可硬霍,不建議使用HTTP狀態(tài)說明帜慢,因為在跨瀏覽器的時候,可能會不太一致唯卖。
addEvent(document, 'click', function () {
var xhr = new XMLHttpRequest();
xhr.open('get', 'demo.php?rand=' + Math.random(), false); //設(shè)置了同步
xhr.send(null);
if (xhr.status == 200) { //如果返回成功了
alert(xhr.responseText); //調(diào)出服務(wù)器返回的數(shù)據(jù)
} else {
alert('數(shù)據(jù)返回失斄涣帷!狀態(tài)代碼:' + xhr.status + '狀態(tài)信息:' + xhr.statusText);
}
});

以上的代碼每次點擊頁面的時候拜轨,返回的時間都是時時的抽减,不同的,說明都是通過服務(wù)器及時加載回的數(shù)據(jù)橄碾。

1.5 readystatechange(狀態(tài)發(fā)生改變)

使用異步調(diào)用的時候卵沉,需要觸發(fā)readystatechange事件,然后檢測readyState屬性即可法牲。這個屬性有五個值:

狀態(tài) 說明
0 未初始化 尚未調(diào)用open()方法
1 啟動 已經(jīng)調(diào)用open()方法史汗, 但尚未調(diào)用send()方法
2 發(fā)送 已經(jīng)調(diào)用send()方法, 但尚未接受響應(yīng)
3 接受 已經(jīng)接受到部分響應(yīng)數(shù)據(jù)
4 完成 已經(jīng)接受到全部響應(yīng)數(shù)據(jù)拒垃, 而且可以使用

addEvent(document, 'click', function () {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
alert('數(shù)據(jù)返回失斖W病!狀態(tài)代碼:' + xhr.status + '狀態(tài)信息:'

  • xhr.statusText);
    }
    }
    };
    xhr.open('get', 'demo.php?rand=' + Math.random(), true);
    xhr.send(null);
    });

PS:使用abort()方法可以取消異步請求悼瓮,放在send()方法之前會報錯戈毒。放在responseText之前會得到一個空值艰猬。

二.GET與POST

在提供服務(wù)器請求的過程中,有兩種方式副硅,分別是:GET和POST姥宝。在Ajax使用的過程中翅萤,GET的使用頻率要比POST高恐疲。

2.1 GET請求

GET請求是最常見的請求類型,最常用于向服務(wù)器查詢某些信息套么。必要時培己,可以將查詢字符串參數(shù)追加到URL的末尾,以便提交給服務(wù)器胚泌。
xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);

通過URL后的問號給服務(wù)器傳遞鍵值對數(shù)據(jù)省咨,服務(wù)器接收到返回響應(yīng)數(shù)據(jù)。特殊字符傳參產(chǎn)生的問題可以使用encodeURIComponent()進(jìn)行編碼處理玷室,中文字符的返回及傳參零蓉,可以講頁面保存和設(shè)置為utf-8格式即可。
//一個通用的URL提交函數(shù)
function addURLParam(url, name, value) {
    url += (url.indexOf('?') == -1 ? '?' : '&');            //判斷的url是否有已有參數(shù)
    url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
    alert(url);
    return url;
}

PS:當(dāng)沒有encodeURIComponent()方法時穷缤,在一些特殊字符比如“&”敌蜂,會出現(xiàn)錯誤導(dǎo)致無法獲取。

2.2 POST請求

POST請求可以包含非常多的數(shù)據(jù)津肛,我們在使用表單提交的時候章喉,很多就是使用的POST傳輸方式。
xhr.open('post', 'demo.php', true);

而發(fā)送POST請求的數(shù)據(jù)身坐,不會跟在URL的尾巴上秸脱,而是通過send()方法向服務(wù)器提交數(shù)據(jù)。
xhr.send('name=Lee&age=100');

一般來說部蛇,向服務(wù)器發(fā)送POST請求由于解析機(jī)制的原因摊唇,需要進(jìn)行特別的處理。因為POST請求和Web表單提交是不同的涯鲁,需要使用XHR來模仿表單提交遏片。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

PS:從性能上來講POST請求比GET請求消耗更多一些,用相同數(shù)據(jù)比較撮竿,GET最多比POST快兩倍吮便。

2.3 用json來解析服務(wù)器數(shù)據(jù)

上一節(jié)課的JSON也可以使用Ajax來回調(diào)訪問。
var url = 'demo.json?rand=' + Math.random();
var box = JSON.parse(xhr.responseText);

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末幢踏,一起剝皮案震驚了整個濱河市髓需,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌房蝉,老刑警劉巖僚匆,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件微渠,死亡現(xiàn)場離奇詭異,居然都是意外死亡咧擂,警方通過查閱死者的電腦和手機(jī)逞盆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來松申,“玉大人云芦,你說我怎么就攤上這事∶惩埃” “怎么了舅逸?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長皇筛。 經(jīng)常有香客問我琉历,道長,這世上最難降的妖魔是什么水醋? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任旗笔,我火速辦了婚禮,結(jié)果婚禮上拄踪,老公的妹妹穿的比我還像新娘蝇恶。我一直安慰自己,他們只是感情好宫蛆,可當(dāng)我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布艘包。 她就那樣靜靜地躺著,像睡著了一般耀盗。 火紅的嫁衣襯著肌膚如雪想虎。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天叛拷,我揣著相機(jī)與錄音舌厨,去河邊找鬼。 笑死忿薇,一個胖子當(dāng)著我的面吹牛裙椭,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播署浩,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼揉燃,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了筋栋?” 一聲冷哼從身側(cè)響起炊汤,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后抢腐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體姑曙,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年迈倍,在試婚紗的時候發(fā)現(xiàn)自己被綠了伤靠。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡啼染,死狀恐怖宴合,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情提完,我是刑警寧澤形纺,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布丘侠,位于F島的核電站徒欣,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蜗字。R本人自食惡果不足惜打肝,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望挪捕。 院中可真熱鬧粗梭,春花似錦、人聲如沸级零。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽奏纪。三九已至鉴嗤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間序调,已是汗流浹背醉锅。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留发绢,地道東北人硬耍。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像边酒,于是被迫代替她去往敵國和親经柴。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容