是否可以使用jQuery取消/中止尚未收到响应的Ajax请求?
当前回答
我正在进行实时搜索解决方案,需要取消可能比最新/最新请求花费更长时间的未决请求。
在我的案例中,我使用了这样的方法:
//On document ready
var ajax_inprocess = false;
$(document).ajaxStart(function() {
ajax_inprocess = true;
});
$(document).ajaxStop(function() {
ajax_inprocess = false;
});
//Snippet from live search function
if (ajax_inprocess == true)
{
request.abort();
}
//Call for new request
其他回答
我们只需要解决这个问题,并测试了三种不同的方法。
按照@meouw的建议取消请求执行所有请求,但只处理最后一次提交的结果在另一个请求仍处于挂起状态时阻止新请求
变量Ajax1={调用:函数(){if(typeof this.xhr!==“undefined”)this.xhr.abourt();this.xhr=$.ajax({url:'您的/long/running/request/path',类型:'GET',成功:函数(数据){//过程响应}});}};变量Ajax2={计数器:0,调用:函数(){var self=此,seq=++此计数器;$.ajax美元({url:'您的/long/running/request/path',类型:'GET',成功:函数(数据){如果(seq==self.counter){//过程响应}}});}};变量Ajax3={活动:假,调用:函数(){如果(this.active==false){this.active=真;var self=this;$.ajax美元({url:'您的/long/running/request/path',类型:'GET',成功:函数(数据){//过程响应},完成:函数(){self.active=假;}});}}};$(函数){$(“#按钮”).click(函数(e){Ajax3.call();});})<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><input id=“button”type=“button“value=“click”/>
在我们的案例中,我们决定使用方法#3,因为它会减少服务器的负载。但我不能100%确定jQuery是否保证调用.complete()方法,这可能会导致死锁。在我们的测试中,我们无法再现这种情况。
将所做的调用保存在数组中,然后对每个调用调用xhr.art()。
巨大的漏洞:你可以中止请求,但这只是客户端。服务器端可能仍在处理请求。如果您对会话数据使用PHP或ASP之类的东西,那么会话数据将被锁定,直到ajax完成。因此,为了允许用户继续浏览网站,必须调用session_write_close()。这将保存会话并将其解锁,以便等待继续的其他页面将继续。如果没有这一点,可能会有多个页面等待解除锁定。
大多数jQueryAjax方法都返回XMLHttpRequest(或等效的)对象,因此您可以只使用abort()。
请参阅文档:
中止方法(MSDN)。取消当前HTTP请求。abort()(MDN)。如果请求已经发送,则此方法将中止请求。
var xhr = $.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
//kill the request
xhr.abort()
更新:从jQuery1.5开始,返回的对象是本地XMLHttpRequest对象jqXHR的包装器。此对象似乎公开了所有本机财产和方法,因此上述示例仍然有效。请参阅jqXHR对象(jQuery API文档)。
更新2:从jQuery3开始,ajax方法现在使用额外的方法(如abort)返回一个promise,所以上面的代码仍然有效,尽管返回的对象不再是xhr。请在此处查看3.0博客。
UPDATE3:xhr.abourt()仍然适用于jQuery3.x。不要假设更新2是正确的。有关jQuery Github存储库的更多信息。
没有可靠的方法可以做到这一点,一旦请求得到满足,我甚至不会尝试;唯一合理反应的方法就是忽略反应。
在大多数情况下,这可能会发生在这样的情况下:用户太频繁地点击一个按钮,触发许多连续的XHR,这里有很多选项,要么在XHR返回之前阻止该按钮,要么在另一个正在运行时甚至不触发新的XHR(提示用户向后倾斜),要么丢弃除最近的XHR响应之外的任何未决XHR响应。
以下代码显示了启动和中止Ajax请求:
function libAjax(){
var req;
function start(){
req = $.ajax({
url: '1.php',
success: function(data){
console.log(data)
}
});
}
function stop(){
req.abort();
}
return {start:start,stop:stop}
}
var obj = libAjax();
$(".go").click(function(){
obj.start();
})
$(".stop").click(function(){
obj.stop();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="go" value="GO!" >
<input type="button" class="stop" value="STOP!" >
推荐文章
- 什么时候JavaScript是同步的?
- 在jQuery中取消<select>的最佳方法?
- 如何在Typescript中解析JSON字符串
- jQuery的“输入”事件
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中,'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?