最近遇到,如果用户频繁点击ajax请求,有两个问题:

1,如果连续点击了5个ajax请求,前4个其实是无效的,趁早结束节省资源。

2,更严重的问题是:最后一个发送的请求,响应未必是最后一个,有可能造成混乱。还需要一个队列来维护发送的请求和响应。

我其实已经设计好了该队列的实现方式,后来发现jQuery直接通过abort方法,这样就不需要那么复杂的实现了,毕竟还有其他事情等着完成。

用jquery发送ajax请求的确是太方便了,$.get、$.post、$.ajax等等,但我们有时候需要中途中止ajax请求。

举个例子,用comet做聊天时,发送一个请求后,服务端通常过几十秒后才会刷新链接、返回数据。假设服务端是30秒刷新一次链接,如果我们在10秒时想要停止这个ajax请求,怎么办呢?

先上代码,后面再解释

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

上面这段代码其于两个知识点:

1. $.get返回的数据类型是XMLHttpRequest,请参考手册。($.post、$.ajax、$.getJSON、$.getScript也同样)

2. XMLHttpRequest对象有abort()方法

注意:abort()后,ajax请求立即停止,但还是会执行后面的function()。如果想避免执行其中的操作,可以在function()开始位置加判断

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

终止ajax请求:

1
2
3
4
5
var request = $.get(“ajax.aspx”,{id:1},function(data){
  //do something
});
//终止请求动作.
request.abort();

防止重复请求:

1
2
3
4
5
6
7
8
9
10
11
var request;
if(request != null)
  request.abort();
request = $.get(“ajax.aspx”,{id:1},function(){
  //do something
});
ajax & setTimeout实现 secondTry 在等待一秒之后将firstTry的ajax终止:
var firstTry = $.ajax(
 //do something
 );
var secondTry = setTimeout(function(){alert(‘ok');firstTry.abort()},1000);

如何终止JQUERY的$.AJAX请求的更多相关文章

  1. 基于jquery,ajax请求及自我终止的函数封装。

    场景描述: 在我们平时的开发过程中,经常会遇到这样的情况.在搜索功能中进行模糊搜索或者联想关联. 这就要我们每次对输入框中的数据进行改动时,都要发送一次请求.当在短时间内多次操作改动时,问题就出现了. ...

  2. 终止jQuery的$.ajax方法abort

    最近遇到,如果用户频繁点击ajax请求,有两个问题: 1,如果连续点击了5个ajax请求,前4个其实是无效的,趁早结束节省资源. 2,更严重的问题是:最后一个发送的请求,响应未必是最后一个,有可能造成 ...

  3. jQuery发送ajax请求

    利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...

  4. JQuery发送ajax请求不能用数组作为参数

    JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var select ...

  5. Angular和jQuery的ajax请求的差别

    近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释con ...

  6. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

  7. 使用es6的then()方法封装jquery的ajax请求

    使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...

  8. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  9. jQuery发送Ajax请求以及出现的问题

    普通jQuery的Ajax请求代码如下: $.ajax({ type: 'POST', url: "http://xxx/yyy/zzz/sendVerifyCode", data ...

随机推荐

  1. Linux kernel学习-内存管理

    转自:https://zohead.com/archives/linux-kernel-learning-memory-management/ 本文同步自(如浏览不正常请点击跳转):https://z ...

  2. netif_receive_skb->__netif_receive_skb_core

    在设备驱动收包之后,会通过netif_receive_skb将收取的包,按照注册的协议回调,传递到上层进行处理: /* 将skb传递到上层 */ static int __netif_receive_ ...

  3. UVA题解一

    UVA 100 题目描述:经典3n+1问题在\(n \leq 10^6\)已经证明是可行的,现在记\(f[n]\)为从\(n\)开始需要多少步才能到\(1\),给出\(L, R\),问\(f[L], ...

  4. 产生唯一的临时文件mkstemp()

    INUX下建立临时的方法(函数)有很多, mktemp, tmpfile等等. 今天只推荐最安全最好用的一种: mkstemp. mkstemp (建立唯一临时文件)头文件: #include < ...

  5. 简易web-slide

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. img标签src图片地址找不到显示默认图片

    可以采用onerror的属性: onerror="javascript:this.src='${base}/after/img/aifu.png'" <img id=&quo ...

  7. 【Java】 奇偶数的判断

    判断方法(奇数): 错误判断方法:通过a%2==1来判断.(原因:负奇数对2取余的结果为-1) 正确判断方法:(1) 通过a%2!=0来判断.                          (2) ...

  8. nodejs读取文件时相对路径的正确写法(使用fs模块)

    在开发nodejs中,我们往往需要读取文件或者写入文件,最常用的模块就是fs核心模块.一个最简单的写入文件的代码如下(暂时不考虑回调函数): fs.readFile("./test.txt& ...

  9. CodeFoorces 803C Maximal GCD

    枚举. 枚举$gcd$,然后计算剩下的那个数能不能分成$k$个递增的数. #include <iostream> #include <cstdio> #include < ...

  10. salt 常用命令整理

    salt 常用命令整理 ***********模块*********** 查看模块列表module salt 'minion' sys.list_modules 查看指定module的function ...