教你如何终止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 相关文章推荐
JavaScript 事件记录使用说明
Oct 20 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
Yii2单元测试用法示例
2016/11/12 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
javascript读取xml
2006/11/04 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
python中if及if-else如何使用
2020/06/02 Python
Python 远程开关机的方法
2020/11/18 Python
python制作抽奖程序代码详解
2021/01/15 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
《天安门广场》教学反思
2014/04/23 职场文书
个人授权委托书样本
2014/09/13 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
租房协议书范例
2014/10/14 职场文书
商铺租房协议书范本
2014/12/04 职场文书
2015年大学生工作总结
2015/04/21 职场文书
小学中队委竞选稿
2015/11/20 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
Python基础之元类详解
2021/04/29 Python
Python OpenCV实现图形检测示例详解
2022/04/08 Python