最近遇到,如果用户频繁点击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. C++ 模板特化以及Typelist的相关理解

    近日,在学习的过程中第一次接触到了Typelist的相关内容,比如Loki库有一本Modern C++ design的一本书,大概JD搜了一波没有译本,英文版600多R,瞬间从价值上看到了这本书的价值 ...

  2. SQLite3 安装、基本操作

    1. 安装SQLite3 sudo apt-get install sqlite3 2. 安装Sqlite3编译需要的工具包 如果,你需要的话可以安装该工具包.只是为了体验一把,可以不安装.该项是可选 ...

  3. 打开exls表格时报‘向程序发送命令是出现问题’的错误的解决方法

    1.问题现象 打开表格文件时系统报如下错误 2.解决方法 1)按照如下方法找到excel选项,点击进入 2)找到‘忽略使用动态数据交换(DDE)的其它应用程序(O)',去掉复选框种的勾,点击确定,重新 ...

  4. 解决IDEA导入Myclipse项目的时候没有识别为Web项目的问题

    IDEA在导入一个MyEclipse新建的Web项目的时候,一般会正确检测这个项目是什么项目.不过有时候会出现各种问题. 1. 出现一些Jar包不存在的问题,一般是servlet-api这样的包不存在 ...

  5. 删除/添加/调用WordPress用户个人资料的联系信息

    如果你要折腾主题或者将WordPress站点开放注册,你可能需要自定义WordPress用户个人资料信息.下面倡萌将简单说一下如何删除.添加和调用自定义用户信息字段. 添加或删除字段,可以在主题的 f ...

  6. IEEEXtreme 10.0 - Game of Stones

    这是 meelo 原创的 IEEEXtreme极限编程大赛题解 Xtreme 10.0 - Game of Stones 题目来源 第10届IEEE极限编程大赛 https://www.hackerr ...

  7. System.Net.Mail的应用,后端发送邮件

    private void btn_send_Click(object sender, EventArgs e) { var emailAcount = ConfigurationManager.App ...

  8. loadrunner 分用户日志

    loadrunner 分用户日志 loadrunner在run脚本时,模拟多用户并发场景下,通常需要分别关注每个用户的脚本执行日志,可以按照以下操作进行: 在“Run Load Tests”中选择需要 ...

  9. keycloak学习

    keycloak 是一个针对Web应用和RESTfull Web API 提供SSO(Single Sign On:单点登陆),它是一个开源软件,源码地址是:https://github.com/ke ...

  10. 《互联网MySQL开发规范》

    一.基础规范 使用 INNODB 存储引擎 表字符集使用 UTF8  所有表都需要添加注释 单表数据量建议控制在 5000W 以内 不在数据库中存储图⽚.文件等大数据 禁止在线上做数据库压力测试 禁⽌ ...