分類: 知道 常識詞典 編輯 : 常識 發(fā)布 : 10-04

閱讀 :350

怎樣防止重復(fù)發(fā)送 Ajax 請求？一個(gè)簡易的需求，點(diǎn)一個(gè)按鈕，則向服務(wù)器請求資源，不作處理時(shí)，多次點(diǎn)擊后會(huì)有很多個(gè)請求在等待。粗暴的解決方式是點(diǎn)一次就將按鈕disable掉。請問一下有沒有更好的辦法，比如多點(diǎn)一次后自動(dòng)down掉前一次請求？補(bǔ)充：不是一次請求，更類似于g-il的全站AJAX，剛用firebug看了一下g-il，發(fā)現(xiàn)重復(fù)請求時(shí)，之前的請求狀態(tài)變?yōu)椤癆borted”，并且不反回任何數(shù)據(jù)。請問是如何做到的呢？畢竟一般理解客戶端AJAX發(fā)送后是不能終止的。5 個(gè)答案

答案 1：

通常需要防止重復(fù)Ajax請求的情形:表單提交這種情形在表單submit按鈕點(diǎn)擊后，一般采取disable按鈕，防止重復(fù)點(diǎn)擊，也就防止了重復(fù)請求。不過你需要處理各種出錯(cuò)情形，然后enable按鈕，以便用戶修改數(shù)據(jù)再次提交。資源請求比如有四個(gè)Tab標(biāo)簽，點(diǎn)擊每個(gè)標(biāo)簽都將從服務(wù)端獲取數(shù)據(jù)。如果用戶快速點(diǎn)擊標(biāo)簽，那么將不可避免的產(chǎn)生重復(fù)?？梢韵馌馬驍 所說的，設(shè)定flag。如果上一個(gè)請求尚未處理完畢，就不發(fā)送新的請求。但這么處理一是不夠通用，二是用戶體驗(yàn)也不好，因?yàn)橛脩粝Ｍc(diǎn)擊Tab就立刻得到響應(yīng)。因此，通常做法是abort掉上一個(gè)請求。用于Ajax請求的XMLHttpRequest對象有abort方法，直接調(diào)用就好了。

答案 2：

我的經(jīng)驗(yàn)的做法是,封裝自己的Ajax請求對象.不使用直接使用系統(tǒng)的或者其他第三方的包裝.有了自己的封裝之后,并不是簡單abort就是最好的.我這里會(huì)根據(jù)實(shí)際的情況做處理:1. 所有的Ajax請求都是異步的,我的封裝中做一個(gè)100毫秒的setTimeout延時(shí).這樣就可以有效的解決用戶快速重復(fù)點(diǎn)擊的問題.　足夠快的時(shí)候,前一請求并沒有真正的發(fā)出來.就被clearTimeout清除掉了. abort掉Ajax的請求也會(huì)有服務(wù)端響應(yīng),需要消耗資源.2.如果用戶的操作不并足夠快.比如點(diǎn)了保存按鈕,在服務(wù)器沒有返回成功的時(shí)候,再次點(diǎn)了保存按鈕.(事實(shí)上兩次請求是一樣的.而我們更希望第一次的請求是有效的,第二次的可以不做處理).在封裝中,我們檢查傳入ajax的請url及參數(shù)是否一致,如果一致.則第二次的AJAX并不發(fā)出.3.最后一種情況,兩次相間的請求是不同的請求,比如樓上說快速切換Tab的例子.無法,只能abort掉前一個(gè)Ajax請求了.再補(bǔ)充一點(diǎn),統(tǒng)一的Ajax封裝有許多特別的好處:1.可以計(jì)數(shù)pending中的請求數(shù),顯示當(dāng)前還有幾個(gè)請求進(jìn)行中(我們原來的系統(tǒng)中有一個(gè)這樣的需求,一般系統(tǒng)也會(huì)有比如顯示loading的需求...)2.可以有統(tǒng)一的異常處理,發(fā)送的請求失敗了(服務(wù)器可以返回統(tǒng)一的格式,客戶端做集中處理,彈出錯(cuò)框等,或者如firebug那樣,把所有的異常放到一個(gè)統(tǒng)一的地方去.或者調(diào)試階段增加處理.)3.如果有大量的小請求,比如取某個(gè)表單的下拉列表.一堆下拉框的話.可以在客戶端做請求合并.batc-ing Ajax, 這個(gè)是從DWR中獲得的靈感.

答案 3：

自己加一個(gè) flag 變量判斷一下就好了，還有一種方法，可以利用一些類庫提供的 "listenOnce" 方法綁定事件，這樣回調(diào)函數(shù)只會(huì)被執(zhí)行一次，比如 : goog.events.listenOnce();

答案 4：

用一個(gè)數(shù)組做容器，每點(diǎn)擊一次就pus-一個(gè)到數(shù)組中。在回調(diào)函數(shù)中去檢查數(shù)組，如果這個(gè)回調(diào)是success的，那么就清空數(shù)組，否則pop一個(gè)x-r出來進(jìn)行Ajax重發(fā)。

答案 5：

如果是jquery的話，可以試試 這個(gè)參數(shù) async:false,補(bǔ)充下，這是對于比較簡單ajax請求，設(shè)置后是同步的意思。對于復(fù)雜的ajax請求可以通過如下：var isSent = false;var timeout;jQuery("#buttonID").click(function() { if(!isSent) { isSent = true; jQuery.ajax({ url: "test", ...., complete: function() { isSent = false; //ajax失敗和成功是都重新設(shè)置isSend }, }); timeout = setTimeout( function() {if(isSent) isSent.abort(); // abort request}, 30000 );//after 30 seconds }});

下一篇:知乎團(tuán)隊(duì)能否考慮在知乎問題添加一個(gè)功能：分享到人人網(wǎng)，新浪微博等等？ 下一篇 【方向鍵 ( → )下一篇】

上一篇:喝排骨湯或者吃骨頭能補(bǔ)鈣嗎？ 上一篇 【方向鍵 ( ← )上一篇】