第21章 Ajax與comet

1覆享、XMLHttpRequest對(duì)象

Ajax能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無(wú)須卸載頁(yè)面实胸,會(huì)帶來(lái)更好的用戶體驗(yàn)择诈。
Ajax技術(shù)的核心是XMLHttpRequest對(duì)象(簡(jiǎn)稱XHR)XHR為向服務(wù)器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)提供了流暢的接口昔逗。能夠以異步方式從服務(wù)器取得更多信息钉迷,意味著用戶單擊后至非,可以不必刷新頁(yè)面也能取得新數(shù)據(jù)。

1.1XMLHttpRequest對(duì)象

IES是第一款引人XHR對(duì)象的瀏覽器糠聪。在IE5中荒椭,XHR對(duì)象是通過(guò)MSXML庫(kù)中的一個(gè)ActiveX對(duì)象實(shí)現(xiàn)的

1.1.1XHR的用法

在使用XHR對(duì)象時(shí),要調(diào)用的第一個(gè)方法是 open()舰蟆,它接受3個(gè)參數(shù):要發(fā)送的請(qǐng)求的類型( "get"趣惠、"post"等)、請(qǐng)求的URL和表示是否異步發(fā)送請(qǐng)求的布爾值身害。下面就是調(diào)用這個(gè)方法的例子味悄。

xhr.open ( "get" ,"example.php", false};

這行代碼會(huì)啟動(dòng)一個(gè)針對(duì)example.php的GET請(qǐng)求。有關(guān)這行代碼塌鸯,需要說(shuō)明兩點(diǎn):一是URL相對(duì)于執(zhí)行代碼的當(dāng)前頁(yè)面(當(dāng)然也可以使用絕對(duì)路徑)二是調(diào)用open()方法并不會(huì)真正發(fā)送請(qǐng)求侍瑟,而只是啟動(dòng)一個(gè)請(qǐng)求以備發(fā)送。
☆只能向同一個(gè)城中使用相同端口和協(xié)議的URL發(fā)送請(qǐng)求。如果URL與啟動(dòng)請(qǐng)求的頁(yè)面有任何差別涨颜,都會(huì)引發(fā)安全錯(cuò)誤费韭。
要發(fā)送特定的請(qǐng)求,必須像下面這樣調(diào)用send()方法:

xhr .open i "get" , " example.txt", false) ;
xhr .scnd (null);

由于這次請(qǐng)求是同步的庭瑰,JavaScript代碼會(huì)等到服務(wù)器響應(yīng)之后再繼續(xù)執(zhí)行星持。在收到響應(yīng)后,響應(yīng)的數(shù)據(jù)會(huì)自動(dòng)填充XHR對(duì)象的屬性弹灭,相關(guān)的屬性钉汗。
responseText:作為響應(yīng)主體被返回的文本。
responsexML:如果響應(yīng)的內(nèi)容類型是"text/xml"或" application/xml"鲤屡,這個(gè)屬性中將保存包含著響應(yīng)數(shù)據(jù)的XMLDOM文檔
status:響應(yīng)的HTTP狀態(tài)损痰。
statusText:HTTP狀態(tài)的說(shuō)明。

1.1.2HTTP頭部信息

每個(gè)HTTP請(qǐng)求和響應(yīng)都會(huì)帶有相應(yīng)的頭部信息酒来,其中有的對(duì)開(kāi)發(fā)人員有用卢未,有的也沒(méi)有什么用。XHR對(duì)象也提供了操作這兩種頭部(即請(qǐng)求頭部和響應(yīng)頭部)信息的方法堰汉。
默認(rèn)情況下辽社,在發(fā)送xHR請(qǐng)求的同時(shí),還會(huì)發(fā)送下列頭部信息翘鸭。
Accept:瀏覽器能夠處理的內(nèi)容類型滴铅。
Accept-Charset:瀏覽器能夠顯示的字符集。
Accept-Encoding:瀏覽器能夠處理的壓縮編碼就乓。
Accept-Language:瀏覽器當(dāng)前設(shè)置的語(yǔ)言汉匙。
connection:瀏覽器與服務(wù)器之間連接的類型。
Cookie:當(dāng)前頁(yè)面設(shè)置的任何Cookic生蚁。
Host:發(fā)出請(qǐng)求的頁(yè)面所在的域噩翠。
Referer:發(fā)出請(qǐng)求的頁(yè)面的URI。注意邦投,HTTP規(guī)范將這個(gè)頭部字段拼寫(xiě)錯(cuò)了伤锚,而為保證與規(guī)范一致,也只能將錯(cuò)就錯(cuò)了志衣。
user-Agent:瀏覽器的用戶代理字符串屯援。
使用setRequestHeader()方法可以設(shè)置自定義的請(qǐng)求頭部信息。這個(gè)方法接受兩個(gè)參數(shù):頭部字段使用setRequestHeader()方法可以設(shè)置自定義的請(qǐng)求頭部信息念脯。這個(gè)方法接受兩個(gè)參數(shù):頭部字段使用setRequestHeader()方法可以設(shè)置自定義的請(qǐng)求頭部信息狞洋。這個(gè)方法接受兩個(gè)參數(shù):頭部字段

21.1.3GET請(qǐng)求

GET是最常見(jiàn)的請(qǐng)求類型,最常用于向服務(wù)器查詢某些信息和二。必要時(shí)徘铝,可以將查詢字符串參數(shù)追加到URL的末尾耳胎,以便將信息發(fā)送給服務(wù)器惯吕。

1.1.4POST請(qǐng)求

使用頻率僅次于GET的是 POST請(qǐng)求惕它,通常用于向服務(wù)器發(fā)送應(yīng)該被保存的數(shù)據(jù)
2、XMLHttpRequest 2級(jí)
XMLHtpRequest 1級(jí)只是把已有的XHR對(duì)象的實(shí)現(xiàn)細(xì)節(jié)描述了出來(lái)废登。而XMLHtpRequest2級(jí)則進(jìn)一步發(fā)展了XHR淹魄。

2.1 FormData

FormData為序列化表單以及創(chuàng)建與表單格式相同的數(shù)據(jù)(用于通過(guò)XHR傳輸)提供了便利。

2.2超時(shí)設(shè)定

IE8為XHR對(duì)象添加了一個(gè)timeout屬性堡距,表示請(qǐng)求在等待響應(yīng)多少毫秒之后就終止甲锡。

2.3overrideMimeType()方法

用于重寫(xiě)XHR響應(yīng)的MIME類型。
3羽戒、進(jìn)度事件

1.3進(jìn)度事件

loadstart:在接收到響應(yīng)數(shù)據(jù)的第一個(gè)字節(jié)時(shí)觸發(fā)缤沦。
progress:在接收響應(yīng)期間持續(xù)不斷地觸發(fā)。
error:在請(qǐng)求發(fā)生錯(cuò)誤時(shí)觸發(fā)易稠。
abort:在因?yàn)檎{(diào)用abort()方法而終止連接時(shí)觸發(fā)缸废。
load:在接收到完整的響應(yīng)數(shù)據(jù)時(shí)觸發(fā)。
loadend:在通信完成或者觸發(fā)error驶社、abort或load事件后觸發(fā)企量。
4、跨源資源共享
5亡电、其他跨域技術(shù)

Comet

Comet是Alex Russell發(fā)明的一個(gè)詞兒届巩,指的是-種更高級(jí)的Ajax技術(shù)(經(jīng)常也有人稱為“服務(wù)器推送”)。Ajax是一種從頁(yè)面向服務(wù)器請(qǐng)求數(shù)據(jù)的技術(shù)份乒,而Comet則是一種服務(wù)器向頁(yè)面推送數(shù)據(jù)的技術(shù)恕汇。Comet能夠讓信息近乎實(shí)時(shí)地被推送到頁(yè)面上,非常適合處理體育比賽的分?jǐn)?shù)和股票報(bào)價(jià)或辖。有兩種實(shí)現(xiàn)Comet的方式:長(zhǎng)輪詢和流拇勃。長(zhǎng)輪詢是傳統(tǒng)輪詢(也稱為短輪詢)的一個(gè)翻版,即瀏覽器定時(shí)向服務(wù)器發(fā)送請(qǐng)求孝凌,看有沒(méi)有更新的數(shù)據(jù)方咆。

6、安全

為確保通過(guò)XHR訪問(wèn)的URL安全蟀架,通行的做法就是驗(yàn)證發(fā)送請(qǐng)求者是否有權(quán)限訪向相應(yīng)的資源有下列幾種方式可供選擇瓣赂。
要求以SSL連接來(lái)訪問(wèn)可以通過(guò)XHR請(qǐng)求的資源。
要求每一次請(qǐng)求都要附帶經(jīng)過(guò)相應(yīng)算法計(jì)算得到的驗(yàn)證碼請(qǐng)注意片拍,下列措施對(duì)防范CSRF攻擊不起作用煌集。
要求發(fā)送POST而不是GET請(qǐng)求——很容易改變。
檢查來(lái)源URL以確定是否可信——來(lái)源記錄很容易偽造捌省。
基于cookie信息進(jìn)行驗(yàn)證——同樣很容易偽造苫纤。

7、小結(jié)

Ajax是無(wú)需刷新頁(yè)面就能夠從服務(wù)器取得數(shù)據(jù)的一種方法。關(guān)于 Ajax卷拘,可以從以下幾方面來(lái)總結(jié)一下喊废。
負(fù)責(zé)Ajax運(yùn)作的核心對(duì)象是XMLHttpRequest ( XHR)對(duì)象。
XHR對(duì)象由微軟最早在IE5中引人栗弟,用于通過(guò)JavaScript從服務(wù)器取得XML數(shù)據(jù)污筷。
在此之后,F(xiàn)irefox乍赫、Safari瓣蛀、Chrome和Opera都實(shí)現(xiàn)了相同的特性,使XHR成為了Web的一個(gè)事實(shí)標(biāo)準(zhǔn)雷厂。
雖然實(shí)現(xiàn)之間存在差異惋增,但XHR對(duì)象的基本用法在不同瀏覽器間還是相對(duì)規(guī)范的,因此可以放心地用在Web開(kāi)發(fā)當(dāng)中改鲫。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末器腋,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子钩杰,更是在濱河造成了極大的恐慌纫塌,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件讲弄,死亡現(xiàn)場(chǎng)離奇詭異措左,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)避除,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門怎披,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人瓶摆,你說(shuō)我怎么就攤上這事凉逛。” “怎么了群井?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵状飞,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我书斜,道長(zhǎng)诬辈,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任荐吉,我火速辦了婚禮焙糟,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘样屠。我一直安慰自己穿撮,他們只是感情好缺脉,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著悦穿,像睡著了一般攻礼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上咧党,一...
    開(kāi)封第一講書(shū)人閱讀 51,182評(píng)論 1 299
  • 那天秘蛔,我揣著相機(jī)與錄音陨亡,去河邊找鬼傍衡。 笑死,一個(gè)胖子當(dāng)著我的面吹牛负蠕,可吹牛的內(nèi)容都是我干的蛙埂。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼遮糖,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼绣的!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起欲账,我...
    開(kāi)封第一講書(shū)人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤屡江,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后赛不,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體惩嘉,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年踢故,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了文黎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡殿较,死狀恐怖耸峭,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情淋纲,我是刑警寧澤劳闹,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站洽瞬,受9級(jí)特大地震影響玷或,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜片任,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一偏友、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧对供,春花似錦位他、人聲如沸氛濒。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)舞竿。三九已至,卻和暖如春窿冯,著一層夾襖步出監(jiān)牢的瞬間骗奖,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工醒串, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留执桌,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓芜赌,卻偏偏與公主長(zhǎng)得像仰挣,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子缠沈,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353