最近遇到,如果用户频繁点击ajax请求,有两个问题:
1,如果连续点击了5个ajax请求,前4个其实是无效的,趁早结束节省资源。

2,更严重的问题是:最后一个发送的请求,响应未必是最后一个,有可能造成混乱。还需要一个队列来维护发送的请求和响应。



我其实已经设计好了该队列的实现方式,后来发现jQuery直接通过abort方法,这样就不需要那么复杂的实现了,毕竟还有其他事情等着完成。







用jquery发送ajax请求的确是太方便了,$.get、$.post、$.ajax等等,但我们有时候需要中途中止ajax请求。

举个例子,用comet做聊天时,发送一个请求后,服务端通常过几十秒后才会刷新链接、返回数据。假设服务端是30秒刷新一次链接,如果我们在10秒时想要停止这个ajax请求,怎么办呢?

先上代码,后面再解释

1var ajaxGet = $.get("comet_server.php",{id:1},function(data){

2....//一些操作

3});

4ajaxGet.abort();

上面这段代码其于两个知识点:

1. $.get返回的数据类型是XMLHttpRequest,请参考手册。($.post、$.ajax、$.getJSON、$.getScript也同样)

2. XMLHttpRequest对象有abort()方法

注意:abort()后,ajax请求立即停止,但还是会执行后面的function()。如果想避免执行其中的操作,可以在function()开始位置加判断

view sourceprint?

1var ajaxGet = $.get("comet_server.php",{id:1},function(data){

2if(data.length == 0) return true;

3....//一些操作

4});

5ajaxGet.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方法abort的更多相关文章

  1. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  2. jquery中$.ajax方法提交表单

    function postdata(){                        //提交数据函数 $.ajax({                                //调用jqu ...

  3. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  4. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

  5. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

  6. ajax系列之用jQuery的ajax方法向服务器发出get和post请求

    打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个 ...

  7. jQuery的$.ajax方法响应数据类型有哪几种?本质上原生ajax响应数据格式有哪几种,分别对应哪个属性?

    jQuery的$.ajax方法响应数据类型有:xml.html.script.json.jsonp.text 本质上原生ajax响应数据格式只有2种:xml和text,分别对应xhr.response ...

  8. jQuery中ajax方法无法执行回调函数问题

    最近遇到一个问题,发现使用jquery的ajax方法时,回调方法无法执行,而使用$.load()方法时却能正确返回数据.经过长时间调试最终发现是自己粗心大意,原来后台返回的是json数据,而返回的数据 ...

  9. 前端-jQuery的ajax方法

    https://www.cnblogs.com/majj/p/9134922.html 0.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascri ...

随机推荐

  1. 【python】python环境的安装与配置

    安装配置pip / easy_install / virtualenv 在ubuntu 10.10之后的版本中,要这样安装 sudo apt-get install python-pip python ...

  2. 【PyQuery】PyQuery总结

    pyquery库是jQuery的Python实现,可以用于解析HTML网页内容, 官方文档地址是:http://packages.python.org/pyquery/. 二.使用方法 ? 1 fro ...

  3. js获取单选框radio的值

    遇到一个js获取radio值的问题,原来根据frm.type.value取到的值在ie下是空值 解决办法:type为每个radio的值 var chkObjs=document.getElements ...

  4. 【海岛帝国系列赛】No.1 海岛帝国:诞辰之日

     50111117海岛帝国:诞辰之日 [试题描述] YSF自从上次“被盗投降”完(带着一大堆债)回去以后,YSF对“海盗”怀念至今,他想要建立一个“药师傅”海岛帝国. 今天,他要像“管理部”那样去探寻 ...

  5. ckeditor添加插入flv视频的插件

    首发:个人博客,更新&纠错&回复 昨天写在网页中播放flv的博文的时候,想在博文中插入视频,但是发现无法实现.因为用的编辑器是ckeditor,决定自己写个插件插入视频.官方的教程在这 ...

  6. Web前端开发工程师面试题

    Web前端开发工程师面试题1.说说css的优先级?2.在移动端中,常常使用tap作为点击事件,好处是?会带来什么问题?3.原生JS的window,onload与Jquery的$(document).r ...

  7. JS和CSS的多浏览器兼容(2)

    2.Css的浏览器兼容性 方法一,根据不同的浏览器加载不同的css file <!DOCTYPE html>  <html> <head> <title> ...

  8. NLog

    C# 使用NLog记录日志 C#第三方日志库Nlog NLog类库使用探索——详解配置 使用Nlog记录日志到数据库 NLog文章系列——系列文章目录以及简要介绍 NLog日志框架简写用法(write ...

  9. Docker CPU 资源限制——CPU固定核功能测试

    Docker使用Linux cgroup来实现资源的限制,对于CPU的限制有两种方法: 1.cpuset CPU Set限定容器使用某个固定的CPU核.使用默认的libcontainer引擎时,可以通 ...

  10. 第一个应用程序HelloWorld

    iOS7 Beta已经发布了,迫不及待地下载了iOS 7及Xcode 5并体验了一下.先做一个简单的Hello World看看都有哪些变化吧.1. 启动Xcode5-DP:2. 从菜单选择File-N ...