`
zccst
  • 浏览: 3315593 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

终止jQuery的$.ajax方法abort

阅读更多
作者:zccst

最近遇到,如果用户频繁点击ajax请求,有两个问题:
1,如果连续点击了5个ajax请求,前4个其实是无效的,趁早结束节省资源。
2,更严重的问题是:最后一个发送的请求,响应未必是最后一个,有可能造成混乱。还需要一个队列来维护发送的请求和响应。

我其实已经设计好了该队列的实现方式,后来发现jQuery直接通过abort方法,这样就不需要那么复杂的实现了,毕竟还有其他事情等着完成。



用jquery发送ajax请求的确是太方便了,$.get、$.post、$.ajax等等,但我们有时候需要中途中止ajax请求。
举个例子,用comet做聊天时,发送一个请求后,服务端通常过几十秒后才会刷新链接、返回数据。假设服务端是30秒刷新一次链接,如果我们在10秒时想要停止这个ajax请求,怎么办呢?
先上代码,后面再解释
1var ajaxGet = $.get("comet_server.php",{id:1},function(data){
2....//一些操作
3});
4ajaxGet.abort();
上面这段代码其于两个知识点:
1. $.get返回的数据类型是XMLHttpRequest,请参考手册。($.post、$.ajax、$.getJSON、$.getScript也同样)
2. XMLHttpRequest对象有abort()方法
注意:abort()后,ajax请求立即停止,但还是会执行后面的function()。如果想避免执行其中的操作,可以在function()开始位置加判断
view sourceprint?
1var ajaxGet = $.get("comet_server.php",{id:1},function(data){
2if(data.length == 0) return true;
3....//一些操作
4});
5ajaxGet.abort();



终止ajax请求:
var request = $.get("ajax.aspx",{id:1},function(data){
    //do something
});

//终止请求动作.
request.abort();


防止重复请求:
var request;

if(request != null)
    request.abort();

request = $.get("ajax.aspx",{id:1},function(){
    //do something
});


ajax & setTimeout实现 secondTry 在等待一秒之后将firstTry的ajax终止:
var firstTry  = $.ajax(
  //do something
  );
var secondTry = setTimeout(function(){alert('ok');firstTry.abort()},1000);


如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    教你如何终止JQUERY的$.AJAX请求

    总结来说,jQuery的`$.get`等函数返回的`XMLHttpRequest`对象提供了`abort()`方法,使我们能够有效地管理和终止Ajax请求。这在处理用户频繁操作或需要控制请求顺序与执行的情况时非常有用。正确地使用`abort()`能...

    js与jQuery终止正在发送的ajax请求的方法.docx

    在jQuery中,`$.ajax`返回的是一个`jqXHR`对象,它是`XMLHttpRequest`对象的包装,因此也支持`abort()`方法: ```javascript var xhr = $.ajax({ type: 'POST', url: 'b.php', success: function() { alert('ok...

    jQuery AJAX 扩展 ----自动放弃及 队列实现

    jQuery提供了一个`$.active`属性,表示当前活跃的Ajax请求数量,以及`$.ajaxStop()`和`$.ajaxStart()`方法来监听Ajax请求的开始和结束。然而,这些并不能直接取消单个请求。要实现自动放弃,可以使用`jqXHR.abort()`...

    js与jQuery终止正在发送的ajax请求的方法

    本文实例讲述了js与jQuery终止正在发送的ajax请求的方法。分享给大家供大家参考,具体如下: 核心:调用XMLHttpRequest对象上的abort方法 jquery的ajax方法有自己的超时时间设置参数: $.ajax({type:'POST', url:'...

    jQuery Ajax使用心得详细整理及注意事项

    ——————————————————————————– 终止Ajax请求 终止请求需要调用XMLHttpRequest对象的abort()方法 而在jQuery中的$.get,$.post、$.ajax、$.getJSON、$.getScript…的返回值都是...

    jQuery取消ajax请求的方法

    首先,jQuery的$.ajax()函数是创建Ajax请求的主要方式。它接受一个包含各种选项的对象作为参数,如请求类型(GET、POST等)、URL、发送的数据以及成功的回调函数。例如: ```javascript var xhr = $.ajax({ type: ...

    jquery电子文档chm

    $.ajax() takes one argument, an object of key/value pairs, that are used to initialize and handle the request. See below for a full list of the key/values that can be used. As of jQuery 1.2, you can...

    jQuery实现ajax的叠加和停止(终止ajax请求)

    在jQuery中,可以通过`$.ajax`方法发送异步请求。当需要执行多个AJAX请求时,可以在同一个事件处理函数中连续调用`$.ajax`方法。为了跟踪这些并发的AJAX请求,可以创建一个数组来存储这些请求的返回对象。以下是实现...

    ajax 多年收集资料(15个教学文档和应用实例)

    - **jQuery/Ajax库**:jQuery简化了Ajax操作,提供了$.ajax()、$.get()、$.post()等函数。 - **Promise/Ajax**:现代浏览器中的Promise用于更优雅地处理异步操作,如`fetch` API。 - **Websocket**:实现双向通信,...

    如何在再次调用之前取消AJAX调用

    在上述代码中,`xhr`变量存储了`$.ajax()`返回的`jqXHR`对象,这个对象提供了`abort()`方法来终止请求。当调用`abort()`后,请求会立即停止,`success`和`error`回调都不会被触发。此时,你可以安全地重新发起相同或...

    jQuery中ajax错误调试分析

    3. "abort":AJAX请求被手动终止,例如使用了`abort()`方法。 4. "error":网络错误,如DNS查找失败、连接失败、服务器无响应等。 #### 调试步骤 1. 检查readyState和status:这两个属性可以告诉你AJAX请求的状态...

    AJAX原理[收集].pdf

    - `abort()`:终止当前请求。 - `open()`:初始化一个请求,指定请求类型、URL和是否异步。 - `send()`:发送请求,可以是空参数或请求体数据。 - `readyState`:表示请求的当前状态,从0到4,4代表完成。 - `status...

    关于ajax的多次请求问题

    例如,在使用jQuery的$.ajax()方法发起请求时,可以通过调用abort方法来取消该请求: ```javascript var request = $.ajax({ // 请求配置... }); // 取消请求 request.abort(); ``` 在前端开发中,正确地管理...

    React AJAX

    - 这个示例中使用了jQuery库的`$.get`方法来执行Ajax请求。`$.get`是一个简化的Ajax函数,它发送一个GET请求到指定的URL,并在成功时执行回调函数。回调函数中的`this`上下文需要通过`.bind(this)`来确保指向组件...

    ajax浏览器兼容的问题探讨

    2. 对于XMLHttpRequest对象,请求完成后需要调用abort()方法来终止请求,以避免内存泄漏。 3. 当处理跨域请求时,服务器需要支持CORS(跨源资源共享),并设置适当的响应头。 4. 为了减少对XML的依赖,可以使用JSON...

    无刷新上传文件和图片

    6. **取消上传**:在Ajax请求发送后,可以通过调用`XMLHttpRequest.abort()`方法来取消上传。这会终止请求,但不会清理服务器资源,所以服务器端可能需要额外处理取消的请求。 7. **安全性与兼容性**:考虑到浏览器...

Global site tag (gtag.js) - Google Analytics