XMLHttpRequest實現(xiàn)終止請求和超時

這里是使用的XMLHttpRequest2中的API笑窜,口蹄疫通過XMLHttpRequest對象的?abort( )方法?來取消正在進行的HTTP請求,abort( )方法是在XMLHttpRequest和XMLHttpRequest2中都可用的乘瓤,調(diào)用abort( )方法在這個對象上觸發(fā)abort事件。

調(diào)用abort( )的主要原因是完成像取消或超時請求消耗的是啊進太長或當(dāng)響應(yīng)變得無關(guān)時的情況?

例如:使用XMLHttpRequest為文本輸入域請求自動完成推薦,如果用戶在服務(wù)器的建議到達(dá)之前輸入了新的字符兼搏,這時等待請求就不再有用了,所有應(yīng)該終止

XMLHttpRequest2中定義了?timeout?屬性來指定請求自動終止的毫秒數(shù)沙郭,也定義了timeout事件用于超時發(fā)生時觸發(fā)佛呻,但是到目前位置,瀏覽器還不支持這些自動超時病线,?

但是我們可以使用setTimeout( )和abort( )方法來實現(xiàn)自己的超時

/*

發(fā)起HTTP GET請求獲取指定URL的內(nèi)容

如果響應(yīng)成功到達(dá)吓著,則傳入responseText給回調(diào)函數(shù)

如果響應(yīng)在timeout時間內(nèi)沒有到達(dá),則中止請求

瀏覽器可能會在abort()后出啊發(fā)readystatechange

如果部分請求結(jié)果到達(dá)送挑,甚至可能設(shè)置status屬性

所有需要設(shè)置一個標(biāo)記绑莺,當(dāng)部分且超時的響應(yīng)到達(dá)時不會調(diào)用回調(diào)函數(shù)

如果使用load(當(dāng)請求完成時觸發(fā))事件就沒有這個風(fēng)險

/*

發(fā)起HTTP GET請求獲取指定URL的內(nèi)容

如果響應(yīng)成功到達(dá),則傳入responseText給回調(diào)函數(shù)

如果響應(yīng)在timeout時間內(nèi)沒有到達(dá)惕耕,則中止請求

瀏覽器可能會在abort()后出啊發(fā)readystatechange

如果部分請求結(jié)果到達(dá)纺裁,甚至可能設(shè)置status屬性

所有需要設(shè)置一個標(biāo)記,當(dāng)部分且超時的響應(yīng)到達(dá)時不會調(diào)用回調(diào)函數(shù)

如果使用load(當(dāng)請求完成時觸發(fā))事件就沒有這個風(fēng)險*/

function (url,timeout,callback) {

var request =new XMLHttpRequest();

var time =false;//是否超時

? ? var timer =setTimeout(function(){

????timeout =true;

????request.abort(); / /請求中止

?},timeout);

request.open("GET",url);

request.onreadystatechange =function(){

if(request.readyState !==4)continue;//忽略未完成的請求

? ? ? ? if(timeout)return;//忽略中止請求

? ? ? ? clearTimeout(timer);//取消等待的超時

? ? ? ? if(request.status ===200)

callback(request.responseText);

}

request.send(null);

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末司澎,一起剝皮案震驚了整個濱河市欺缘,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌惭缰,老刑警劉巖浪南,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異漱受,居然都是意外死亡络凿,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門昂羡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來絮记,“玉大人,你說我怎么就攤上這事虐先≡狗撸” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵蛹批,是天一觀的道長撰洗。 經(jīng)常有香客問我篮愉,道長,這世上最難降的妖魔是什么差导? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任试躏,我火速辦了婚禮,結(jié)果婚禮上设褐,老公的妹妹穿的比我還像新娘颠蕴。我一直安慰自己,他們只是感情好助析,可當(dāng)我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布犀被。 她就那樣靜靜地躺著,像睡著了一般外冀。 火紅的嫁衣襯著肌膚如雪寡键。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天锥惋,我揣著相機與錄音昌腰,去河邊找鬼。 笑死膀跌,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的固灵。 我是一名探鬼主播捅伤,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼巫玻!你這毒婦竟也來了丛忆?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤仍秤,失蹤者是張志新(化名)和其女友劉穎熄诡,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诗力,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡凰浮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了苇本。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片袜茧。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖瓣窄,靈堂內(nèi)的尸體忽然破棺而出笛厦,到底是詐尸還是另有隱情,我是刑警寧澤俺夕,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布裳凸,位于F島的核電站贱鄙,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏姨谷。R本人自食惡果不足惜逗宁,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望菠秒。 院中可真熱鬧疙剑,春花似錦、人聲如沸践叠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽禁灼。三九已至管挟,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間弄捕,已是汗流浹背僻孝。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留守谓,地道東北人穿铆。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像斋荞,于是被迫代替她去往敵國和親荞雏。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,592評論 2 353

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

  • 本文詳細(xì)介紹了 XMLHttpRequest 相關(guān)知識平酿,涉及內(nèi)容: AJAX凤优、XMLHTTP、XMLHttpReq...
    semlinker閱讀 13,657評論 2 18
  • Ajax和XMLHttpRequest 我們通常將Ajax等同于XMLHttpRequest蜈彼,但細(xì)究起來它們兩個是...
    changxiaonan閱讀 2,232評論 0 2
  • ??2005 年幸逆,Jesse James Garrett 發(fā)表了一篇在線文章棍辕,題為“Ajax: A new App...
    霜天曉閱讀 889評論 0 1
  • 看到標(biāo)題時痢毒,有些同學(xué)可能會想:“我已經(jīng)用xhr成功地發(fā)過很多個Ajax請求了,對它的基本操作已經(jīng)算挺熟練了蚕甥∧奶妫” 我...
    前端渣渣閱讀 5,762評論 1 12
  • Ajax 模塊也是經(jīng)常會用到的模塊,Ajax 模塊中包含了 jsonp 的現(xiàn)實菇怀,和 XMLHttpRequest ...
    對角另一面閱讀 603評論 0 1