是否可以使用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()方法,但是,虽然它会导致客户端停止侦听事件,但它可能不会阻止服务器处理它。
例如,只需使用ajax.abourt(),就可以在发送类似这样的另一个请求之前中止任何挂起的ajax请求
//check for existing ajax request
if(ajax){
ajax.abort();
}
//then you make another ajax request
$.ajax(
//your code here
);
您可以使用以下命令中止任何连续的ajax调用
<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 $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);
});
但如果您检查if语句来检查ajax请求是否为空,则效果会更好。
这是一个异步请求,意味着一旦它被发送,它就在那里。
如果您的服务器由于AJAX请求而启动了一个非常昂贵的操作,那么您所能做的最好就是打开服务器以侦听取消请求,然后发送一个单独的AJAX请求,通知服务器停止它正在做的任何事情。
否则,只需忽略AJAX响应。
推荐文章
- 如何为Firebase构建云函数,以便从多个文件部署多个函数?
- 如何发送推送通知到web浏览器?
- AngularJS:工厂和服务?
- js:将一个组件包装成另一个组件
- 父ng-repeat从子ng-repeat的访问索引
- JSHint和jQuery: '$'没有定义
- 模仿JavaScript中的集合?
- 用JavaScript验证电话号码
- 如何在HTML5中改变视频的播放速度?
- 谷歌地图API v3:我可以setZoom后fitBounds?
- 用jQuery检查Internet连接是否存在?
- 如何使用滑动(或显示)函数在一个表行?
- ES6/2015中的null安全属性访问(和条件赋值)
- 与push()相反;
- JS字符串“+”vs concat方法