文档章节

如何终止正在发送的ajax请求

 清天君
发布于 2017/02/15 11:39
字数 563
阅读 306
收藏 0

目前在用redis的订阅功能,做一个web版的及时聊天程序,因为是ajax长连接实现的及时消息,所以肯定会遇到timeout的问题,不管是socket还是php的最大执行时间都是会遇到的。

最简单的解决办法就是将系统的时间参数都是设置为不限制。但是一个老程序员了,不想用这么原始的方法解决问题,也不愿意去修改服务器的配置。所以想到了每隔30秒自动断开再重新请求的原理。虽然有些轮询的味道,但是依然是长连接的及时没有30秒的延迟。

自动断开请求,首先就想到了ajax有没有能够取消请求的方法,百度了,确实有,jquery的ajax封装也可以取消请求。而且有两种方式,一个是$.ajax的timeout,另一个就是XMLHttpRequest对象的abort()方法。

我自己的递归代码:

	function sub(){
		$.ajax({
		  type:'POST',
		  url:'sub.php',
		  data:'',
		  timeout:30000,
		  success:function(data){
			if(data!=""){//如果有数据发布,就会插入到div层当中
				$("#show").append(data+"<br />");
			}
			$("textarea").val("");//清空textarea里面的值
			sub();//重新调用自己,重新去订阅redis服务器(无限循环的)
		  },
		  error:function(){
			sub();//重新调用自己,重新去订阅redis服务器(无限循环的)  
		  }
		});
	}	
	sub();//第一次调用订阅函数

输入图片说明

引用代码说明:

jquery的ajax方法有自己的超时时间设置参数:

$.ajax({type:'POST',
    url:'b.php',
    data:'',
    timeout:5000,
    success:function(){
        
    }
})

同时

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

也可以自己手动去调用abort方法:

<script src = "jquery-1.4.4.js"></script>
<script>
var xhr = $.ajax({type:'POST',
    url:'b.php',
    data:'',
    success:function(){
        alert('ok');
    }
})
alert(xhr);

console.log(xhr);
</script>
<button id="song">abort</button>
<script>
$(function(){
    $("#song").click(function(){
        alert('click');
        xhr.abort();
    })
})
</script>

对于原生的xhr:

xmlHttp.open("POST","theUrl",true);
xmlHttp.onreadystatechange=function(){
    ...//得到响应之后的操作
}
xmlHttp.send();
//设置8秒钟后检查xmlHttp对象所发送的数据是否得到响应.
setTimeout("CheckRequest()","8000");

function CheckRequest(){
   //为4时代表请求完成了    
    if(xmlHttp.readyState!=4){
        alert('响应超时');
        //关闭请求
        xmlHttp.close();
    }
}

© 著作权归作者所有

粉丝 0
博文 24
码字总数 5469
作品 0
成都
私信 提问
jQuery使用abort方法中止ajax请求

有一个很实用的插件:Autocomplete,即可以实现像搜索引擎一样的关键字提示,提示的内容是用ajax请求后台的内容,这个插件有一个功能,是当用户在输入框按键比较快时,会自动终止之前发出的a...

WolfX
2016/02/20
250
0
再也不学AJAX了!(二)使用AJAX

在上一篇文章中我们知道,AJAX是一系列技术的统称。在本篇中我们将更进一步,详细解释如何使用Ajax技术在项目中获取数据。而为了解释清楚,我们首先要搞清楚我们是从哪里获取数据的,其次我们...

LiBin
2017/12/01
0
0
JQuery.Ajax之错误调试帮助信息

下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址。 type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 ......

Reborn-D
2015/12/29
183
0
JQuery.Ajax之错误调试帮助信息

下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址。 type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 ......

赵小宾
2015/06/04
93
0
JS 中的网络请求 AJAX, Fetch, WebSocket

AJAX 是 Asynchronous JavaScript And XML 的简称,它可以让页面在不刷新的情况下从服务器获取数据。 XMLHttpRequest 浏览器使用对象于服务器通信,它可以使用JSON,XML,HTML和text等格式发...

wopen
03/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JS基础-该如何理解原型、原型链?

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个...

OBKoro1
今天
7
0
高防CDN的出现是为了解决网站的哪些问题?

高防CDN是为了更好的服务网络而出现的,是通过高防DNS来实现的。高防CDN是通过智能化的系统判断来路,再反馈给用户,可以减轻用户使用过程的复杂程度。通过智能DNS解析,能让网站访问者连接到...

云漫网络Ruan
今天
14
0
OSChina 周一乱弹 —— 熟悉的味道,难道这就是恋爱的感觉

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :好久没分享歌了分享张碧晨的单曲《今后我与自己流浪》 《今后我与自己流浪》- 张碧晨 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
3K
24
SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
46
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部