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

閱讀 :353

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

答案 1：

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

答案 2：

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

答案 3：

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

答案 4：

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

答案 5：

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

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

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