教你如何终止JQUERY的$.AJAX请求


Posted in Javascript onFebruary 23, 2016

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

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

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

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

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

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

先上代码,后面再解释

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()开始位置加判断

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

终止ajax请求:

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

防止重复请求:

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);
Javascript 相关文章推荐
jQuery模拟超链接点击效果代码
Apr 21 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
vue实现全选、反选功能
Nov 17 Javascript
JS随机数产生代码分享
Feb 24 Javascript
layui select动态添加option的实例
Mar 07 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
vue-cli 引入、配置axios的方法
May 08 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 #Javascript
javascript每日必学之多态
Feb 23 #Javascript
javascript每日必学之继承
Feb 23 #Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 #Javascript
理解javascript封装
Feb 23 #Javascript
学习Javascript面向对象编程之封装
Feb 23 #Javascript
javascript每日必学之封装
Feb 23 #Javascript
You might like
融入意大利的咖啡文化
2021/03/03 咖啡文化
深入PHP异步执行的详解
2013/06/03 PHP
学习PHP session的传递方式
2016/06/15 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
django 外键model的互相读取方法
2018/12/15 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
.net C#面试题
2012/08/28 面试题
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
安全责任书范本
2014/04/15 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
申报材料格式
2014/12/30 职场文书
公司辞职信模板
2015/05/13 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python