如何通过JQuery ajaxSend事件覆盖成功函数

Question

我试图覆盖在ajaxsend事件成功的功能，但它不工作 这里是代码：

$(document).ajaxSend(function(event,xhr,options){ 
     console.log('ajaxSend'); 
     var tempSuccess = options.success; 
     options.success = function(data, textStatus, jqXHR){ 
      console.log('start'); 
      tempSuccess(data, textStatus, jqXHR); 
      console.log('end'); 
     }; xhr.success = options.success;}); 

在AJAX我看到“AJAX”中控制台，但成功后，我看不到开始和结束调试msges ..

我该怎么做错了？

Answer 1

你可以使用闭包来完成你所需要的：

function closure(handler) { 
    return function(ev, xhr, options) { 
     console.log("start"); 
     handler(ev, xhr, options); 
     console.log("stop"); 
    } 
} 

$(document).ajaxSend(closure(function(ev, xhr, options) { 
    console.log("hello"); 
})); 

Answer 2

你要完成什么不能ajaxSend来完成。问题是，ajaxSend显然与原始的xhr和options对象的副本一起使用，所以这些修改不会产生任何影响。您可以轻松地用下面的代码测试：

$(document).ajaxSend(function(event, xhr, options){ 
    delete options.success; 
    console.log(options.success); // undefined 
}); 
$.ajax({ 
    url: "test.html", 
    success: function() { console.log("this will be printed nevertheless"); } 
}); 

所以你不能使用ajaxSend覆盖成功回调。相反，你将不得不“黑客” jQuery的AJAX功能：

// closure to prevent global access to this stuff 
(function(){ 
    // creates a new callback function that also executes the original callback 
    var SuccessCallback = function(origCallback){ 
     return function(data, textStatus, jqXHR) { 
      console.log("start"); 
      if (typeof origCallback === "function") { 
       origCallback(data, textStatus, jqXHR); 
      } 
      console.log("end"); 
     }; 
    }; 

    // store the original AJAX function in a variable before overwriting it 
    var jqAjax = $.ajax; 
    $.ajax = function(settings){ 
     // override the callback function, then execute the original AJAX function 
     settings.success = new SuccessCallback(settings.success); 
     jqAjax(settings); 
    }; 
})(); 

现在，你可以简单地使用$.ajax像往常一样：

$.ajax({ 
    url: "test.html", 
    success: function() { 
     console.log("will be printed between 'start' and 'end'"); 
    } 
}); 

据我所知，任何的jQuery的AJAX功能（如$.get()或​​）在内部使用$.ajax，所以这应该适用于通过jQuery完成的每个AJAX请求（我还没有测试过这个，尽管...）。

---

类似的东西也应该用“纯”的JavaScript由黑客 XMLHttpRequest.prototype工作。请注意，以下内容在IE中不起作用，IE使用 ActiveXObject而不是 XMLHttpRequest。

(function(){ 
    // overwrite the "send" method, but keep the original implementation in a variable 
    var origSend = XMLHttpRequest.prototype.send; 
    XMLHttpRequest.prototype.send = function(data){ 
     // check if onreadystatechange property is set (which is used for callbacks) 
     if (typeof this.onreadystatechange === "function") { 
      // overwrite callback function 
      var origOnreadystatechange = this.onreadystatechange; 
      this.onreadystatechange = function(){ 
       if (this.readyState === 4) { 
        console.log("start"); 
       } 
       origOnreadystatechange(); 
       if (this.readyState === 4) { 
        console.log("end"); 
       } 
      }; 
     } 
     // execute the original "send" method 
     origSend.call(this, data); 
    }; 
})(); 

使用（就像一个平常的XMLHttpRequest）：

var xhr = new XMLHttpRequest(); 
xhr.open("POST", "test.html", true); 
xhr.onreadystatechange = function(){ 
    if (xhr.readyState === 4) { 
     console.log("will be printed between 'start' and 'end'"); 
    } 
}; 
xhr.send();