第二十一章 Ajax與Comet

1. 在發(fā)送XHR請求的同時屡谐,還會發(fā)送以下頭部信息:

① Accept:瀏覽器能夠處理的內(nèi)容類型

② Accept-Charset:瀏覽器能夠顯示的字符集

③ Accept-Encoding:瀏覽器能夠處理的壓縮編碼

④ Accept-Language:瀏覽器當(dāng)前設(shè)置的語言

⑤ Connection:瀏覽器與服務(wù)器之間連接的類型

⑥ Cookie:當(dāng)前頁面設(shè)置的任何Cookie

⑦ Host:發(fā)出請求的頁面所在的域

⑧ Referer:發(fā)出請求的頁面的URI

⑨ User-Agent:瀏覽器的用戶代理字符串


2. GET請求的查詢字符串中每個參數(shù)的名稱和值都必須使用encodeURIComponent()進行編碼尸曼,然后才能放到URL的末尾凑耻;并且所有名-值對都必須由和號(&)分隔


3. XMLHttpRequest 2級中定義了FormData類型稚疹,用于序列化表單以及創(chuàng)建與表單格式相同的數(shù)據(jù)香拉。


4. 微軟在IE8中引入了XDR(XDomainRequest)類型,這個對象與XHR類似濒翻,但是能實現(xiàn)安全可靠的跨域通信屁柏。XDR與XHR相比的的不同之處:

① XDR的cookie不會隨請求發(fā)送,也不會隨請求返回有送。?

② XDR只能設(shè)置請求頭部信息中的Content-Type字段.

③ XDR不能訪問響應(yīng)頭部信息

④ XDR只支持GET請求和POST請求

XDR的這些變化使CSRF(Cross-Site Request Forgery淌喻,跨站點請求偽造)和XSS(Cross-Site Scripting,跨站點腳本)的問題得到了緩解雀摘。


5. 跨域XHR對象為了安全所做的限制:

① 不能使用setRequestHeader()設(shè)置自定義頭部裸删;

② 不能發(fā)送和接收cookie

③ 調(diào)用getAllResponseHeaders()方法總會返回空字符串


6. 檢測XHR是否支持CORS(Cross-Origin Resource Sharing,跨源資源共享)的最簡單方式阵赠,就是檢查是否存在withCredentials屬性涯塔,同時結(jié)合檢測XDomainRequest對象是否存在。


7. 其他跨域技術(shù):

① 圖像Ping:與服務(wù)器進行簡單清蚀、單向的跨域通信的一種方式匕荸。請求的數(shù)據(jù)通過查詢字符串形式發(fā)送,而響應(yīng)式任意內(nèi)容枷邪。瀏覽器得不到任何具體的數(shù)據(jù)榛搔,但通過監(jiān)聽load和error事件判斷服務(wù)器何時接收到請求。

? ? 其最常用于跟蹤用戶點擊頁面或動態(tài)廣告曝光次數(shù)东揣。

? ? 兩個主要缺點:一是智能發(fā)送GET請求践惑,而是無法訪問服務(wù)器的響應(yīng)文本。

② JSONP:包括回調(diào)函數(shù)和數(shù)據(jù)兩個部分嘶卧。

? ? 兩個主要缺點:一是如果JSONP加載代碼的來源域不安全童本,很可能會在響應(yīng)中夾雜一些惡意代碼,此時只能完全放棄JSONP調(diào)用脸候;二是要確定JSONP請求是否失敗并不容易。

③Comet:是一種服務(wù)器向頁面推送數(shù)據(jù)的技術(shù)绑蔫。有長輪詢和HTTP流這兩種方式實現(xiàn)运沦。

? ? 長輪詢:瀏覽器在接收數(shù)據(jù)之前,先發(fā)起對服務(wù)器的連接配深,使用XHR對象和setTimeout()就能實現(xiàn)携添;

? ? HTTP流:瀏覽器想服務(wù)器發(fā)送一個請求,而服務(wù)器保持連接打開篓叶,然后周期性地向瀏覽器發(fā)送數(shù)據(jù)烈掠。?

④ SSE:SSE(Server-Sent Events,服務(wù)器發(fā)送事件)是圍繞只讀Comet交互推出的API或者模式羞秤。SSE API用于創(chuàng)建到服務(wù)器的單向連接,服務(wù)器響應(yīng)的MIME類型必須是text/event-stream

⑤ Web Socket:在JavaScript中創(chuàng)建Web Socket后左敌,會有一個HTTP請求發(fā)送到瀏覽器以發(fā)起連接瘾蛋。在取得服務(wù)器響應(yīng)后,建立的連接會使用HTTP升級從HTTP協(xié)議交換為Web Socket協(xié)議矫限。


8. 創(chuàng)建Web Socket步驟:

① 實例一個WebSocket對象并傳入要連接的URL(絕對URL):

var socket = new WebSocket("ws://www. example.com/server. php");

② 發(fā)送數(shù)據(jù)(只能發(fā)送純文本數(shù)據(jù)):

socket.send("Hello WebSocket");

③ 接收數(shù)據(jù)哺哼,當(dāng)服務(wù)器向客戶端發(fā)來消息時,WebSocket對象就會觸發(fā)message事件(返回的數(shù)據(jù)保存在event.data屬性中):

socket. onmessage = function (event){

? ? ? ? var data = event. data;

}

④ open事件叼风,在成功建立連接時觸發(fā):

socket. onopen = function(){

? ? ? ? console.log("此時連接已經(jīng)成功建立");

}

⑤ error事件取董,在發(fā)生錯誤時觸發(fā),連接不能持續(xù):

socket. onerror = function(){

? ? ? ? console.log("連接發(fā)生錯誤无宿,快看看什么問題");

}

⑥ close事件茵汰,在連接關(guān)閉時觸發(fā):

socket. onclose = function(event){

? ? ? ? console.log(event. wasClean); ? ?// wasClean是個布爾值,表示連接是否已經(jīng)明確地關(guān)閉

? ? ? ? console.log(event. code); ? ? ? ? ? ?// code是服務(wù)器返回的數(shù)值狀態(tài)碼

? ? ? ? console.log(event. reason);// reason是個字符串孽鸡,包含服務(wù)器返回的消息

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蹂午,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子梭灿,更是在濱河造成了極大的恐慌画侣,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件堡妒,死亡現(xiàn)場離奇詭異配乱,居然都是意外死亡,警方通過查閱死者的電腦和手機皮迟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門搬泥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人伏尼,你說我怎么就攤上這事忿檩。” “怎么了爆阶?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵燥透,是天一觀的道長。 經(jīng)常有香客問我辨图,道長班套,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任故河,我火速辦了婚禮吱韭,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘鱼的。我一直安慰自己理盆,他們只是感情好痘煤,可當(dāng)我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著猿规,像睡著了一般衷快。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上坎拐,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天烦磁,我揣著相機與錄音,去河邊找鬼哼勇。 笑死都伪,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的积担。 我是一名探鬼主播陨晶,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼帝璧!你這毒婦竟也來了先誉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤的烁,失蹤者是張志新(化名)和其女友劉穎褐耳,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體渴庆,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡铃芦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了襟雷。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片刃滓。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖耸弄,靈堂內(nèi)的尸體忽然破棺而出咧虎,到底是詐尸還是另有隱情,我是刑警寧澤计呈,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布砰诵,位于F島的核電站,受9級特大地震影響捌显,放射性物質(zhì)發(fā)生泄漏茁彭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一苇瓣、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧偿乖,春花似錦击罪、人聲如沸哲嘲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽眠副。三九已至,卻和暖如春竣稽,著一層夾襖步出監(jiān)牢的瞬間囱怕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工毫别, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留娃弓,地道東北人。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓岛宦,卻偏偏與公主長得像台丛,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子砾肺,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,486評論 2 348

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

  • Ajax:Asynchronous JavaScript + XML的簡寫挽霉。Ajax技術(shù)的核心是XMLHttpRe...
    exialym閱讀 871評論 0 8
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)变汪,斷路器侠坎,智...
    卡卡羅2017閱讀 134,629評論 18 139
  • Ajax和XMLHttpRequest 我們通常將Ajax等同于XMLHttpRequest,但細究起來它們兩個是...
    changxiaonan閱讀 2,229評論 0 2
  • ajax作為前端開發(fā)必需的基礎(chǔ)能力之一裙盾,你可能會使用它实胸,但并不一定懂得其原理,以及更深入的服務(wù)器通信相關(guān)的知識闷煤。在...
    蕭玄辭閱讀 816評論 0 0
  • https://nodejs.org/api/documentation.html 工具模塊 Assert 測試 ...
    KeKeMars閱讀 6,312評論 0 6