教你如何终止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 动态生成表格示例代码
Dec 24 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
js实现验证码功能
Jul 24 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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
yii操作session实例简介
2014/07/31 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
图片之间的切换
2006/06/26 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
JS原型对象通俗"唱法"
2012/12/27 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
JS原型链怎么理解
2016/06/27 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
python图像处理入门(一)
2019/04/04 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
详解django中Template语言
2020/02/22 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
《学会合作》教学反思
2014/04/12 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
小学优秀班主任材料
2014/12/17 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python