最近遇到,如果用户频繁点击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下的C操作SQLLITE

    from: http://baike.so.com/doc/1529694.html 由于Linux下侧重使用命令,没有win的操作容易上手,所以在测试C操作SQLITE时会比较容易出现错误,给大家做 ...

  2. URAL题解二

    URAL题解二 URAL 1082 题目描述:输出程序的输入数据,使得程序输出"Beutiful Vasilisa" solution 一开始只看程序的核心部分,发现是求快排的比较 ...

  3. HOJ 1108

    题目链接:HOJ-1108 题意为给定N和M,找出最小的K,使得K个N组成的数能被M整除.比如对于n=2,m=11,则k=2. 思路是抽屉原理,K个N组成的数modM的值最多只有M个. 具体看代码: ...

  4. selenium grid应用1-多浏览器执行用例

    driver =webdriver.Remote(command_executor=’http://127.0.0.1:4444/wd/hub’, desired_capabilities=Desir ...

  5. 在ubuntu 上安装sublime

    1.在sublime官网上下载sublime 2.将下载包解压到指定位置(自己决定) 3.进入解压文件里面 4.鼠标选中sublime_text,点击右键运行. 5.锁在启动器.

  6. 移动端touch滑屏事件

    <script> var windowHeight = $(window).height(), $body = $("body");// console.log($(w ...

  7. 保存进程的pid 文件目录/var/run/

    http://blog.ddup.us/?p=110 http://blog.csdn.net/fyinsonw/article/details/4113124 首先声明这不是愚人节消息,事实上这个消 ...

  8. ZOJ 1610 Count the Colors(区间染色)

    题目大意:多组数据,每组给一个n(1=<n<=8000),下面有n行,每行有l,r,color(1=<color<=8000),表示将l~r颜色变为color,最后求各种颜色( ...

  9. Android 下使用 JSON 实现 HTTP 请求,外加几个示例!

    不得不说,JSON 格式的确是非常美妙的,速度快而且简化了很多操作在 Android 下,Android SDK 已经为我们封装好了整个与 JSON 有关的操作,使用非常方便 以下就是一个标准的 JS ...

  10. PHP 权威代码风格规范

    1.常规 尽量统一ide 比如phpstream 配置文件(Settings → Code Style → PHP → Set from... → Predefined Style → PSR1/PS ...