如何终止JQUERY的$.AJAX请求
最近遇到,如果用户频繁点击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请求的更多相关文章
- 基于jquery,ajax请求及自我终止的函数封装。
场景描述: 在我们平时的开发过程中,经常会遇到这样的情况.在搜索功能中进行模糊搜索或者联想关联. 这就要我们每次对输入框中的数据进行改动时,都要发送一次请求.当在短时间内多次操作改动时,问题就出现了. ...
- 终止jQuery的$.ajax方法abort
最近遇到,如果用户频繁点击ajax请求,有两个问题: 1,如果连续点击了5个ajax请求,前4个其实是无效的,趁早结束节省资源. 2,更严重的问题是:最后一个发送的请求,响应未必是最后一个,有可能造成 ...
- jQuery发送ajax请求
利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...
- JQuery发送ajax请求不能用数组作为参数
JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){ var select ...
- Angular和jQuery的ajax请求的差别
近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释con ...
- Jquery发送ajax请求以及datatype参数为text/JSON方式
Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...
- 使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- jQuery发送Ajax请求以及出现的问题
普通jQuery的Ajax请求代码如下: $.ajax({ type: 'POST', url: "http://xxx/yyy/zzz/sendVerifyCode", data ...
随机推荐
- makefile里PHONY的相关介绍
Phony Targets PHONY 目标并非实际的文件名:只是在显式请求时执行命令的名字.有两种理由需要使用PHONY 目标:避免和同名文件冲突,改善性能. 如果编写一个规则,并不产生目标文件 ...
- 教你如何修改FireFox打开新标签页(NewTab Page)的行列数
FireFox的打开新建标签页(即NewTab Page)默认只能显示3x3个网站缩略图,这9个自定义的网站,非常方便快捷,什么hao123的弱爆了,本人从未用过此类导航网站,曾经用过的也只是abou ...
- c/c++中static用法总结
static的作用主要有两种: 第一个作用是限定作用域:第二个作用是保持变量内容持久化: c语言中static的用法: 1.全局静态变量: 用法:在全局变量前加上关键字static,全局变量就定义成一 ...
- HBase原理解析(转)
本文属于转载,原文链接:http://www.aboutyun.com/thread-7199-1-1.html 前提是大家至少了解HBase的基本需求和组件. 从大家最熟悉的客户端发起请求开始讲 ...
- 进度条算法 progressBar
; ;var maxNum=int.MaxValue; progressBar.Maximum =maxNum; progressBar.Minimum = ; progressBar.Value = ...
- lumen 框架的特殊使用
1. 配置代码格式管理工具: composer require squizlabs/php_codesniffer, 使用 php artisan cs 检查代码格式: 2.单元测试用例编写 1./d ...
- win10产品密钥 win10专业版激活码key
转载地址:http://www.xitongcheng.com/jiaocheng/xtazjc_article_35407.html https://blog.csdn.net/WangJianku ...
- [ python ] 网络编程(2)
黏包问题 这样一个实例 import socket import subprocess sk_server = socket.socket() # 创建 socket对象 sk_server.bind ...
- linux自动获得mac地址,修改网络配置
1.修改网络配置,自动获得mac地址 删除 /etc/udev/rules.d/70-persistent-net.rules 文件 删除 /etc/sysconfig/network-scripts ...
- Vue进阶篇
前引 今天是2018年12月30,虽不是2018年的最后一天,但是却是自己在2018年写的最后一篇博客了,昨天下班在地铁上闲来无事,翻起了关注的一些公众号发的技术博文,里面就提到写博客的重要性,其实这 ...