làm thế nào để ghi đè lên các chức năng thành công qua sự kiện JQuery ajaxSend

Question

Tôi cố gắng để ghi đè lên các chức năng thành công vào sự kiện ajaxsend nhưng nó không làm việc đây là mã:

$(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;}); 

khi AJAX Tôi thấy 'ajax' trong giao diện điều khiển, nhưng sau khi thành công, tôi không thể thấy bắt đầu và kết thúc gỡ lỗi msges ..

Tôi làm gì sai?

Answer 1

Bạn có thể sử dụng đóng cửa để thực hiện những gì bạn cần:

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

gì bạn đang cố gắng để hoàn thành không thể được thực hiện với ajaxSend. Vấn đề là ajaxSend dường như hoạt động với một bản sao của các đối tượng xhr và options ban đầu, do đó các sửa đổi sẽ không có hiệu lực. Bạn có thể dễ dàng kiểm tra điều này với đoạn mã sau:

$(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"); } 
}); 

Vì vậy, bạn không thể sử dụng ajaxSend ghi đè lên callbacks thành công. Thay vào đó, bạn sẽ phải "hack" chức năng AJAX của jQuery:

// 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); 
    }; 
})(); 

Bây giờ bạn chỉ có thể sử dụng $.ajax như thường lệ:

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

Theo như tôi biết, bất kỳ chức năng AJAX của jQuery (ví dụ như $.get() hoặc .load()) sử dụng nội bộ $.ajax, vì vậy điều này sẽ hoạt động với mọi yêu cầu AJAX được thực hiện thông qua jQuery (tôi chưa thử nghiệm điều này mặc dù ...).

---

Something như thế cũng sẽ làm việc với JavaScript "tinh khiết" bằng cách hack các XMLHttpRequest.prototype. Lưu ý rằng những điều sau đây sẽ không hoạt động trong IE, sử dụng ActiveXObject thay vì 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); 
    }; 
})(); 

sử dụng (giống như một XMLHttpRequest bình thường):

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();