快捷導(dǎo)航

教你如何終止JQUERY的$.AJAX請(qǐng)求

更新時(shí)間：2016年02月23日 11:36:22 投稿：hebedich

本文給大家分享的是使用abort來終止JQUERY的$.AJAX請(qǐng)求的方法和示例，有需要的小伙伴可以參考下

最近遇到，如果用戶頻繁點(diǎn)擊ajax請(qǐng)求，有兩個(gè)問題：

1，如果連續(xù)點(diǎn)擊了5個(gè)ajax請(qǐng)求，前4個(gè)其實(shí)是無效的，趁早結(jié)束節(jié)省資源。

2，更嚴(yán)重的問題是：最后一個(gè)發(fā)送的請(qǐng)求，響應(yīng)未必是最后一個(gè)，有可能造成混亂。還需要一個(gè)隊(duì)列來維護(hù)發(fā)送的請(qǐng)求和響應(yīng)。

我其實(shí)已經(jīng)設(shè)計(jì)好了該隊(duì)列的實(shí)現(xiàn)方式，后來發(fā)現(xiàn)jQuery直接通過abort方法，這樣就不需要那么復(fù)雜的實(shí)現(xiàn)了，畢竟還有其他事情等著完成。

用jquery發(fā)送ajax請(qǐng)求的確是太方便了，$.get、$.post、$.ajax等等，但我們有時(shí)候需要中途中止ajax請(qǐng)求。

舉個(gè)例子，用comet做聊天時(shí)，發(fā)送一個(gè)請(qǐng)求后，服務(wù)端通常過幾十秒后才會(huì)刷新鏈接、返回?cái)?shù)據(jù)。假設(shè)服務(wù)端是30秒刷新一次鏈接，如果我們?cè)?0秒時(shí)想要停止這個(gè)ajax請(qǐng)求，怎么辦呢？

先上代碼，后面再解釋

var ajaxGet = $.get(“comet_server.php”,{id:1},function(data){
….//一些操作
});
ajaxGet.abort();

上面這段代碼其于兩個(gè)知識(shí)點(diǎn)：

1. $.get返回的數(shù)據(jù)類型是XMLHttpRequest，請(qǐng)參考手冊(cè)。（$.post、$.ajax、$.getJSON、$.getScript也同樣）

2. XMLHttpRequest對(duì)象有abort()方法

注意：abort()后，ajax請(qǐng)求立即停止，但還是會(huì)執(zhí)行后面的function()。如果想避免執(zhí)行其中的操作，可以在function()開始位置加判斷

var ajaxGet = $.get(“comet_server.php”,{id:1},function(data){
if(data.length == 0) return true;
….//一些操作
});
ajaxGet.abort();

終止ajax請(qǐng)求：

var request = $.get(“ajax.aspx”,{id:1},function(data){
  //do something
});
//終止請(qǐng)求動(dòng)作.
request.abort();

防止重復(fù)請(qǐng)求：

var request;
if(request != null)
  request.abort();
request = $.get(“ajax.aspx”,{id:1},function(){
  //do something
});
ajax & setTimeout實(shí)現(xiàn) secondTry 在等待一秒之后將firstTry的ajax終止：
var firstTry = $.ajax(
 //do something
 );
var secondTry = setTimeout(function(){alert(‘ok');firstTry.abort()},1000);

您可能感興趣的文章: