是否可以使用jQuery取消/中止尚未收到响应的Ajax请求?
当前回答
大多数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存储库的更多信息。
其他回答
您不能撤回请求,但可以设置超时值,超过该值后将忽略响应。有关jquery AJAX选项,请参阅本页。我相信如果超过超时时间,将调用错误回调。每个AJAX请求都有一个默认超时。
您也可以对请求对象使用abort()方法,但是,虽然它会导致客户端停止侦听事件,但它可能不会阻止服务器处理它。
将所做的调用保存在数组中,然后对每个调用调用xhr.art()。
巨大的漏洞:你可以中止请求,但这只是客户端。服务器端可能仍在处理请求。如果您对会话数据使用PHP或ASP之类的东西,那么会话数据将被锁定,直到ajax完成。因此,为了允许用户继续浏览网站,必须调用session_write_close()。这将保存会话并将其解锁,以便等待继续的其他页面将继续。如果没有这一点,可能会有多个页面等待解除锁定。
我已经分享了一个演示,演示了如何取消AJAX请求——如果在预定义的等待时间内没有从服务器返回数据。
HTML格式:
<div id="info"></div>
JS代码:
var isDataReceived= false, waitTime= 1000;
$(function() {
// Ajax request sent.
var xhr= $.ajax({
url: 'http://api.joind.in/v2.1/talks/10889',
data: {
format: 'json'
},
dataType: 'jsonp',
success: function(data) {
isDataReceived= true;
$('#info').text(data.talks[0].talk_title);
},
type: 'GET'
});
// Cancel ajax request if data is not loaded within 1sec.
setTimeout(function(){
if(!isDataReceived)
xhr.abort();
},waitTime);
});
大多数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存储库的更多信息。
AJAX请求可能无法按启动顺序完成。您可以选择忽略除最新的AJAX响应之外的所有AJAX响应,而不是放弃:
创建计数器启动AJAX请求时增加计数器使用计数器的当前值“标记”请求在成功回调中,将标记与计数器进行比较,以检查它是否是最近的请求
代码大纲:
var xhrCount = 0;
function sendXHR() {
// sequence number for the current invocation of function
var seqNumber = ++xhrCount;
$.post("/echo/json/", { delay: Math.floor(Math.random() * 5) }, function() {
// this works because of the way closures work
if (seqNumber === xhrCount) {
console.log("Process the response");
} else {
console.log("Ignore the response");
}
});
}
sendXHR();
sendXHR();
sendXHR();
// AJAX requests complete in any order but only the last
// one will trigger "Process the response" message
jsFiddle演示