如何通過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();