教你如何终止JQUERY的$.AJAX请求
更新时间：2016年02月23日 11:36:22 投稿：hebedich
本文给大家分享的是使用abort来终止JQUERY的$.AJAX请求的方法和示例，有需要的小伙伴可以参考下
最近遇到，如果用户频繁点击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);
相关文章
jQuery底层AJAX实现，其返回其创建的XMLHttpRequest对象，大多数情况下无需直接操作该函数，除非需要操作不常用的选项，以获得更多的灵活性，这篇文章给大家介绍JQuery AJAX操作代码，感兴趣的朋友一起看看吧2022-12-12
这篇文章主要介绍了jQuery对于显示和隐藏等常用状态的判断方法,给出了两种较为常用的判断方法,非常具有实用价值,需要的朋友可以参考下2014-12-12
工作快一年了,最近学习jquery，对jquery很感兴趣。第一次写博客，有不足之处还请各位拍砖。2011-04-04
今天要介绍的是实现类跑马灯效果的的广告插件。类似偶公司web-dev的同事在网站首页上做的目录广告播放器。其实很简单，LEVIN实际应用中也用到,所以稍作整理如下.2010-04-04
jquerymobile checkbox及时刷新才能获取其准确值
一般登录的时候 都有个记住用户名 记住密码 的两个checkbox 多选框用jquerymobile 做页面 ，当勾选checkbox 时总是不能获取它正确的值2012-04-04
Jquery ，大家都熟悉的一个框架，我对Jquery正在学习中，对其影响最深的当属 它的选择器之强,ajax与服务器之间的交谈2009-10-10
这篇文章主要介绍了jquery中object对象循环遍历的方法，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了jQuery each和js forEach用法,结合实例形式对比分析了jQuery each和js forEach具体使用方法及相关操作注意事项,需要的朋友可以参考下2019-02-02
基于 jquery-cxselect 实现下拉联动效果功能实现
这篇文章主要介绍了基于 jquery-cxselect 实现下拉联动效果,下拉联动是基于query的一款联动下拉菜单插件 jquery-cxselect实现，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了jQuery模拟html下拉多选框的原生实现方法,结合完整实例形式分析了jQuery动态操作页面元素实现select下拉框效果的相关操作技巧,需要的朋友可以参考下2019-05-05
最新评论