最近遇到，如果用户频繁点击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请求及自我终止的函数封装。

场景描述: 在我们平时的开发过程中,经常会遇到这样的情况.在搜索功能中进行模糊搜索或者联想关联. 这就要我们每次对输入框中的数据进行改动时,都要发送一次请求.当在短时间内多次操作改动时,问题就出现了. ...

终止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 ...

随机推荐

servlet定义

. 运行在服务器上的java类

关于netbeans中的JComboBox(复选框)

以最近写的选课系统中添加课程项为例 1.往复选框中放入选项(根据数据库添加) (1)首先将  属性—>model中默认Item1234清空 (2)获得数据库中的数据并放入. SelectCour ...

java窗口添加背景

1.import javax.swing.ImageIcon; 2.import javax.swing.JFrame; 3.import javax.swing.JLabel; 4.import j ...

oracle--dba和表的备份与恢复

数据库管理员 每个oracle数据库应该至少有一名数据库管理员(dba),对于一个小的数据库,一个dba就够了,但是对于一个大的数据库可能需要多个dba分别担负不同的管理职责,那么一个数据库管理员的主 ...

activiti uuid主键

1.1.1.  activiti默认主键生成方式 ; 下面我们看一下主键的生成策略:主键的生成策略定义在IdGenerator接口中,接口定义如下所示: public interface IdGene ...

mysql 通过测试'for update'，深入了解行锁、表锁、索引

mysql 通过测试'for update',深入了解行锁.表锁.索引 条件 FOR UPDATE 仅适用于InnoDB存储引擎,且必须在事务区块(BEGIN/COMMIT)中才能生效. mysql默 ...

使用 pkg 打包分发 nodejs 应用

pkg 是一个很不错的跨平台 nodejs 应用打包工具,使用此工具,我们只需要给与用户提供一个简单的 可执行文件就可以了,同时代码也是二进制的,提高了代码的安全性 备注:测试demo 很简单,也比较 ...

山寨"每日故宫"应用的图层遮罩效果

山寨"每日故宫"应用的图层遮罩效果 最终效果: 应用中的效果: 素材图片: 源码: // // ViewController.m // 每日故宫 // // Created by ...

[BZOJ3166][Heoi2013]Alo 可持久化Trie树

3166: [Heoi2013]Alo Time Limit: 20 Sec Memory Limit: 256 MB DescriptionWelcome to ALO ( Arithmetic a ...

Flex Validator的小BUG

Flex中对同一控件如TextInput进行多种格式校验的情况下,如不注意,可能导致错误信息不显示的BUG,比如 ...