第21章 Ajax與Comet

改變傳統(tǒng)的“單擊、等待”模式
Ajax技術(shù)的核心是XMLHttpRequest對(duì)象(XHR)

一、XMLHttpRequest對(duì)象
IE5中,通過(guò)MSXML庫(kù)中的ActiveXObject對(duì)象來(lái)實(shí)現(xiàn)
IE7+、Chrome、Firefox、Opera、Safari都支持原生的XMLHttpRequest對(duì)象

XHR對(duì)象的方法:
1)open(參數(shù)1,參數(shù)2,參數(shù)3)---->啟動(dòng)請(qǐng)求預(yù)備發(fā)送
參數(shù)1:請(qǐng)求的方法(get或post等)
參數(shù)2:URL(相對(duì)于執(zhí)行代碼的當(dāng)前界面)不可跨域請(qǐng)求
參數(shù)3:true(異步,js代碼繼續(xù)執(zhí)行而無(wú)需等待響應(yīng))false(同步,js代碼會(huì)等到服務(wù)器響應(yīng)之后再執(zhí)行)

2)send(參數(shù))---->請(qǐng)求分派到服務(wù)器
參數(shù):請(qǐng)求主體發(fā)送的數(shù)據(jù),沒(méi)有的話為null

3)abort()---->接收到響應(yīng)之前調(diào)用此方法,可以取消異步請(qǐng)求

收到響應(yīng)后,自動(dòng)填充的XHR屬性:
status:響應(yīng)的http狀態(tài),確定響應(yīng)是否成功返回
statusText:響應(yīng)狀態(tài)碼的說(shuō)明
responseText:響應(yīng)主體返回的內(nèi)容
responseXML:返回內(nèi)容是XML格式時(shí),是XML DOM文檔,否則為null

readyState:異步時(shí)使用,有以下幾種值::
0:未初始化,未調(diào)用open方法
1:已經(jīng)初始化,啟動(dòng)了open,未使用send
2:?jiǎn)?dòng)了send,未收到響應(yīng)
3:已經(jīng)接收部分?jǐn)?shù)據(jù)
4:已經(jīng)接收全部數(shù)據(jù),并可以在客戶(hù)端使用
注意:這個(gè)屬性的變化會(huì)引發(fā)readystatechange事件,一般在調(diào)用open之前對(duì)這個(gè)事件做好處理。

下面總結(jié)一下status的幾種常見(jiàn)的值:
200 返回成功
304 跟瀏覽器說(shuō)我這里的資源沒(méi)有被修改?。∧阕约旱木彺胬镆呀?jīng)有啦,不要來(lái)煩我啦

XHR對(duì)象操作請(qǐng)求頭和響應(yīng)頭:
setRequestHeader(參數(shù)1,參數(shù)2)---->設(shè)置自定義的請(qǐng)求頭信息
參數(shù)1:頭部字段的名稱(chēng)
參數(shù)2:頭部字段的值
注意:open之后、send之前調(diào)用

getResponseHeader(字段名)---->
getAllResponseHeaders()---->返回全部頭部信息

get請(qǐng)求和post請(qǐng)求:
get請(qǐng)求:可以將字符串參數(shù)追加到URL尾部,請(qǐng)求速度更快

post請(qǐng)求:把數(shù)據(jù)作為請(qǐng)求的主體提交,可以包含非常多的數(shù)據(jù),而且格式不限,耗費(fèi)資源更多;
可以模擬表單數(shù)據(jù)提交,來(lái)提交post的數(shù)據(jù),設(shè)置請(qǐng)求頭信息:
Content-Type:application/x-www-form-urlencoded

二、XHR對(duì)象的發(fā)展:XHR2.0
新定義了FormData類(lèi)型(不必設(shè)置請(qǐng)求頭信息)
IE8開(kāi)始提出的,timeout屬性,超過(guò)了timeout屬性值以后,觸發(fā)timeout事件
Firefox最早提出的overrideMimeType(),在send之前重新設(shè)定響應(yīng)內(nèi)容的類(lèi)型

三、進(jìn)度事件
1)loadstart:接收到第一個(gè)字節(jié)觸發(fā)
2)process:持續(xù)觸發(fā)
利用這個(gè)屬性可以定制一個(gè)進(jìn)度條
觸發(fā)onprocess事件的XHR對(duì)象有三個(gè)屬性(進(jìn)度信息是否可用、已接收字節(jié)數(shù)、預(yù)期接收字節(jié)數(shù))
3)error:錯(cuò)誤時(shí)觸發(fā)
4)abort:調(diào)用abort()觸發(fā)
5)load:接收到完整數(shù)據(jù)時(shí)觸發(fā),用于簡(jiǎn)化readystatechange事件
6)loadend:通信完成或者觸發(fā)了error、abort、load時(shí)觸發(fā)

四、跨域
XHR的限制:跨域安全策略
跨域:協(xié)議、域名、端口 任一不同
跨域危險(xiǎn):CSRF跨站點(diǎn)請(qǐng)求偽造(未經(jīng)授權(quán)系統(tǒng)有權(quán)訪問(wèn)某資源) XSS跨站點(diǎn)腳本

官方解決方案:CORS跨域資源共享
思想:使用自定義的頭信息,讓瀏覽器和服務(wù)器進(jìn)行溝通,協(xié)商是否允許請(qǐng)求或者響應(yīng),如果服務(wù)器返回的響應(yīng)頭信息和瀏覽器發(fā)送的請(qǐng)求頭信息相同URL,則表示允許!
注意:請(qǐng)求和響應(yīng)中都不包含cookie信息

IE對(duì)CORS的實(shí)現(xiàn):引入了XDR(只能異步)
同樣,請(qǐng)求和響應(yīng)中都不包含cookie信息
只支持get和post方法
不能讀取響應(yīng)頭信息
只能設(shè)置請(qǐng)求頭中的Content-Type字段,設(shè)置發(fā)送數(shù)據(jù)的格式
只能訪問(wèn)響應(yīng)的原始文本,不能得到響應(yīng)的狀態(tài)代碼

其他瀏覽器對(duì)CORS的實(shí)現(xiàn):
跨域XHR對(duì)象
支持同步
可以訪問(wèn)響應(yīng)的狀態(tài)代碼
使用絕對(duì)路徑,加以區(qū)分
不能發(fā)送和接收cookie
不能設(shè)置自定義頭信息
調(diào)用getAllResponseHeaders()返回空字符串

Preflight Request:第一次發(fā)送請(qǐng)求時(shí)會(huì)多一次http請(qǐng)求

帶憑據(jù)(cookie等信息)的請(qǐng)求:

其他跨域技術(shù):CORS出現(xiàn)之前
1)圖像ping,動(dòng)態(tài)創(chuàng)建圖像,利用img.src
特點(diǎn):只能get方法、不能訪問(wèn)響應(yīng)文本,單向通信

2)JSONP:回調(diào)函數(shù)(響應(yīng)到來(lái)時(shí)在頁(yè)面中調(diào)用的函數(shù))+數(shù)據(jù)(傳入回調(diào)函數(shù)的json數(shù)據(jù))
利用動(dòng)態(tài)script的src(有能力不受限制從其他域加載資源)
特點(diǎn):雙向通信,可以訪問(wèn)響應(yīng)文本
但是無(wú)法確定跨域是否安全
無(wú)法確定是否請(qǐng)求成功,網(wǎng)速和帶寬會(huì)影響判斷,script的onerror事件暫時(shí)沒(méi)有得到瀏覽器的支持

五、Comet
Ajax:從頁(yè)面向服務(wù)器請(qǐng)求數(shù)據(jù)
Comet:服務(wù)器向頁(yè)面推送數(shù)據(jù)(更實(shí)時(shí))

實(shí)現(xiàn)Comet的兩種方式:
1)長(zhǎng)輪詢(xún)
短輪詢(xún):瀏覽器定時(shí)向服務(wù)器發(fā)送請(qǐng)求
長(zhǎng)輪詢(xún):瀏覽器發(fā)送一個(gè)請(qǐng)求以后,服務(wù)器一直打開(kāi),直到發(fā)送完數(shù)據(jù)
2)HTTP流
只存在一個(gè)HTTP連接
瀏覽器發(fā)送請(qǐng)求后,服務(wù)器一直打開(kāi),周期性發(fā)送數(shù)據(jù)

六、Web Socket
在一個(gè)單獨(dú)的持久連接上,全雙工、雙向通信
必須使用支持Web Socket協(xié)議(快速傳輸小數(shù)據(jù))的服務(wù)器才可以正常工作
可以跨域 必須傳入絕對(duì)URL

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容