最近遇到,如果用户频繁点击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. bootstrap table 双击可编辑,添加、删除行

    html: <table class="table table-bordered" id="para_table"> <tr> < ...

  2. JavaScript 跳转 页面

    * window.location.href , self.location, window.location 出现问题不能跳转 Chome 不能本页跳转, IE 有时可以

  3. 关于一些对location认识的误区

    1. location 的匹配顺序是“先匹配正则,再匹配普通”. 矫正: location 的匹配顺序其实是“先匹配普通,再匹配正则”.我这么说,大家一定会反驳我,因为按“先匹配普通,再匹配正则”解释 ...

  4. gbdt和xgboost中feature importance的获取

    来源于stack overflow,其实就是计算每个特征对于降低特征不纯度的贡献了多少,降低越多的,说明feature越重要 I'll use the sklearn code, as it is g ...

  5. C++卷积神经网络实例(一)

    跟着这位博主来学习C++的卷积网络实例,因为作者一直在更新代码,所以新的代码和这位博主的分析有所不同:这位博主写的东西太泛了,没有讲到实质, 可以参考下他分析的类与类之间的关系图.. 前四节:http ...

  6. 详解Oracle的unlimited tablespace系统权限

    1. 系统权限unlimited tablespace是隐含在dba, resource角色中的一个系统权限. 当用户得到dba或resource的角色时, unlimited tablespace系 ...

  7. span文字里面自动换行时怎么办

    可以用white-space:nowrap来强制文字不换行,知道遇到<br>为止

  8. LeetCode741. Cherry Pickup

    https://leetcode.com/problems/cherry-pickup/description/ In a N x N grid representing a field of che ...

  9. csu 1806 & csu 1742 (simpson公式+最短路)

    1806: Toll Time Limit: 5 Sec  Memory Limit: 128 MB  Special JudgeSubmit: 256  Solved: 74[Submit][Sta ...

  10. ie6 css 返回顶部图标固定在浏览器右下角

    比较常用记录一下. #e_float{ _position:absolute; _bottom:auto; _right:50%; _margin-right:-536px; _top:express ...