Javascript 使用jQuery中止Ajax请求
是否可以使用jQuery取消/中止尚未收到响应的Ajax请求?您无法调用该请求,但可以设置一个超时值,之后响应将被忽略。有关jqueryajax选项,请参见本文。我相信,如果超过超时时间,将调用您的错误回调。每个AJAX请求都已经有一个默认超时Javascript 使用jQuery中止Ajax请求,javascript,jquery,ajax,Javascript,Jquery,Ajax,是否可以使用jQuery取消/中止尚未收到响应的Ajax请求?您无法调用该请求,但可以设置一个超时值,之后响应将被忽略。有关jqueryajax选项,请参见本文。我相信,如果超过超时时间,将调用您的错误回调。每个AJAX请求都已经有一个默认超时 您也可以在请求对象上使用该方法,但是,虽然它会导致客户端停止侦听事件,但它可能不会停止服务器对其进行处理。这是一个异步请求,意味着一旦发送,它就在那里 如果您的服务器由于AJAX请求而启动了一个非常昂贵的操作,那么您最好打开服务器以侦听取消请求,然后发送
您也可以在请求对象上使用该方法,但是,虽然它会导致客户端停止侦听事件,但它可能不会停止服务器对其进行处理。这是一个
异步
请求,意味着一旦发送,它就在那里
如果您的服务器由于AJAX
请求而启动了一个非常昂贵的操作,那么您最好打开服务器以侦听取消请求,然后发送一个单独的AJAX
请求,通知服务器停止正在做的任何事情
否则,只需忽略
AJAX
响应。大多数jQuery AJAX方法返回一个XMLHttpRequest(或等效的)对象,因此您可以使用abort()
请参阅文档:
- ()。取消当前HTTP请求
- ()。如果请求已经发送,此方法将中止请求
xhr
。看
更新3:
xhr.abort()
仍然适用于jquery3.x。不要假设更新2是正确的 将调用保存在一个数组中,然后对每个数组调用xhr.abort()
巨大的警告:您可以中止请求,但这只是客户端。服务器端可能仍在处理该请求。如果在会话数据中使用PHP或ASP之类的东西,会话数据将被锁定,直到ajax完成。因此,要允许用户继续浏览网站,您必须调用session\u write\u close()。这将保存会话并将其解锁,以便等待继续的其他页面将继续。如果不这样做,可能会有几个页面等待锁被移除。我们只需解决这个问题,并测试了三种不同的方法
var Ajax1={
调用:函数(){
if(typeof this.xhr!=“未定义”)
this.xhr.abort();
this.xhr=$.ajax({
url:'your/long/running/request/path',
键入:“GET”,
成功:功能(数据){
//过程响应
}
});
}
};
var Ajax2={
柜台:0,,
调用:函数(){
var self=这个,
seq=++this.counter;
$.ajax({
url:'your/long/running/request/path',
键入:“GET”,
成功:功能(数据){
if(seq==自计数器){
//过程响应
}
}
});
}
};
var Ajax3={
活动:错误,
调用:函数(){
如果(this.active==false){
this.active=true;
var self=这个;
$.ajax({
url:'your/long/running/request/path',
键入:“GET”,
成功:功能(数据){
//过程响应
},
完成:函数(){
self.active=false;
}
});
}
}
};
$(函数(){
$(“#按钮”)。单击(函数(e){
Ajax3.call();
});
})
我遇到了轮询问题,一旦页面关闭,轮询将继续进行,因此在我的原因中,用户将错过更新,因为mysql值在页面关闭后的50秒内被设置,即使我终止了ajax请求,我还是想方设法,使用$\u SESSION设置变量在轮询结束且新的变量启动之前不会在轮询中更新其自身,因此我在数据库中设置了一个值0=offpage,当我轮询时,我查询该行并返回false;当它为0时,在轮询中查询将获得当前值,显然 我希望这对您有所帮助,只需使用ajax.abort()即可。例如,您可以在发送另一个类似的ajax请求之前中止任何挂起的ajax请求
//check for existing ajax request
if(ajax){
ajax.abort();
}
//then you make another ajax request
$.ajax(
//your code here
);
我正在做一个实时搜索解决方案,需要取消可能比最新/最新请求花费更长时间的未决请求 在我的例子中,我使用了如下内容:
//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
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
正如线程中的许多人所注意到的,仅仅因为请求在客户端被中止,服务器仍将处理该请求。这会在服务器上产生不必要的负载,因为它正在做我们已经停止在前端监听的工作 我试图解决的问题(其他人可能也会遇到)是,当用户在输入字段中输入信息时,我想发出一个请求,请求谷歌即时的感觉 为了避免触发不必要的请求并保持前端的快速性,我执行了以下操作:
var xhrQueue = [];
var xhrCount = 0;
$('#search_q').keyup(function(){
xhrQueue.push(xhrCount);
setTimeout(function(){
xhrCount = ++xhrCount;
if (xhrCount === xhrQueue.length) {
// Fire Your XHR //
}
}, 150);
});
这将基本上每150毫秒发送一个请求
var xhrQueue = [];
var xhrCount = 0;
$('#search_q').keyup(function(){
xhrQueue.push(xhrCount);
setTimeout(function(){
xhrCount = ++xhrCount;
if (xhrCount === xhrQueue.length) {
// Fire Your XHR //
}
}, 150);
});
var $request;
if ($request != null){
$request.abort();
$request = null;
}
$request = $.ajax({
type : "POST", //TODO: Must be changed to POST
url : "yourfile.php",
data : "data"
}).done(function(msg) {
alert(msg);
});
//jQuery ajax
$(document).ready(function(){
var xhr = $.get('/server');
setTimeout(function(){xhr.abort();}, 2000);
});
//native XMLHTTPRequest
var xhr = new XMLHttpRequest();
xhr.open('GET','/server',true);
xhr.send();
setTimeout(function(){xhr.abort();}, 2000);
<div id="info"></div>
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);
});
// ↓ prevent page reload by abort()
xhr.onreadystatechange = null;
// ↓ may cause page reload
xhr.abort();
<input id="searchbox" name="searchbox" type="text" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var request = null;
$('#searchbox').keyup(function () {
var id = $(this).val();
request = $.ajax({
type: "POST", //TODO: Must be changed to POST
url: "index.php",
data: {'id':id},
success: function () {
},
beforeSend: function () {
if (request !== null) {
request.abort();
}
}
});
});
</script>
var activeRequest = false; //global var
var filters = {...};
apply_filters(filters);
//function triggering the ajax request
function apply_filters(filters){
//prepare data and other functionalities
var data = {};
//limit the ajax calls
if (activeRequest === false){
activeRequest = true;
}else{
//abort if another ajax call is pending
$request.abort();
//just to be sure the ajax didn't complete before and activeRequest it's already false
activeRequest = true;
}
$request = $.ajax({
url : window.location.origin + '/your-url.php',
data: data,
type:'POST',
beforeSend: function(){
$('#ajax-loader-custom').show();
$('#blur-on-loading').addClass('blur');
},
success:function(data_filters){
data_filters = $.parseJSON(data_filters);
if( data_filters.posts ) {
$(document).find('#multiple-products ul.products li:last-child').after(data_filters.posts).fadeIn();
}
else{
return;
}
$('#ajax-loader-custom').fadeOut();
},
complete: function() {
activeRequest = false;
}
});
}