Thêm một "hook" vào tất cả các yêu cầu AJAX trên một trang

Tôi muốn biết liệu có thể "móc" vào mọi yêu cầu AJAX (khi nó sắp được gửi hoặc trong các sự kiện) và thực hiện một hành động hay không. Tại thời điểm này, tôi giả định rằng có các tập lệnh của bên thứ ba khác trên trang. Một số trong số này có thể sử dụng jQuery, trong khi những người khác thì không. Điều này có khả thi không?

Lấy cảm hứng từ câu trả lời của aviv , tôi đã điều tra một chút và đây là những gì tôi đã nghĩ ra.
Tôi không chắc rằng tất cả những thứ đó hữu ích theo các nhận xét trong tập lệnh và tất nhiên sẽ chỉ hoạt động đối với các trình duyệt sử dụng đối tượng XMLHttpRequest nguyên bản .
Tôi nghĩ rằng nó sẽ hoạt động nếu các thư viện javascript được sử dụng vì chúng sẽ sử dụng đối tượng gốc nếu có thể.

function addXMLRequestCallback(callback){
    var oldSend, i;
    if( XMLHttpRequest.callbacks ) {
        // we've already overridden send() so just add the callback
        XMLHttpRequest.callbacks.push( callback );
    } else {
        // create a callback queue
        XMLHttpRequest.callbacks = [callback];
        // store the native send()
        oldSend = XMLHttpRequest.prototype.send;
        // override the native send()
        XMLHttpRequest.prototype.send = function(){
            // process the callback queue
            // the xhr instance is passed into each callback but seems pretty useless
            // you can't tell what its destination is or call abort() without an error
            // so only really good for logging that a request has happened
            // I could be wrong, I hope so...
            // EDIT: I suppose you could override the onreadystatechange handler though
            for( i = 0; i < XMLHttpRequest.callbacks.length; i++ ) {
                XMLHttpRequest.callbacks[i]( this );
            }
            // call the native send()
            oldSend.apply(this, arguments);
        }
    }
}

// e.g.
addXMLRequestCallback( function( xhr ) {
    console.log( xhr.responseText ); // (an empty string)
});
addXMLRequestCallback( function( xhr ) {
    console.dir( xhr ); // have a look if there is anything useful here
});

LƯU Ý: Câu trả lời được chấp nhận không mang lại phản hồi thực tế vì nó được gọi quá sớm.

Bạn có thể làm điều này nói chung sẽ chặn bất kỳ AJAX nào trên toàn cầu và không làm hỏng bất kỳ lệnh gọi lại nào, v.v. có thể đã được chỉ định bởi bất kỳ thư viện AJAX nào của bên thứ ba.

(function() {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        console.log('request started!');
        this.addEventListener('load', function() {
            console.log('request completed!');
            console.log(this.readyState); //will always be 4 (ajax is completed successfully)
            console.log(this.responseText); //whatever the response was
        });
        origOpen.apply(this, arguments);
    };
})();

Một số tài liệu khác về những gì bạn có thể làm ở đây với API addEventListener tại đây:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Moosystem_progress

(Lưu ý điều này không hoạt động <= IE8)

Kể từ khi bạn đề cập đến jquery, tôi biết Mời jquery một .ajaxSetup()phương pháp mà sẽ đặt tùy chọn ajax toàn cầu bao gồm các kích hoạt sự kiện như success, errorvà beforeSend- đó là những gì có vẻ như những gì bạn đang tìm kiếm.

$.ajaxSetup({
    beforeSend: function() {
        //do stuff before request fires
    }
});

tất nhiên, bạn sẽ cần xác minh tính khả dụng của jQuery trên bất kỳ trang nào mà bạn cố gắng sử dụng giải pháp này.

Có một mẹo để làm điều đó.

Trước khi tất cả các tập lệnh chạy, hãy lấy đối tượng XHMHttpReuqest gốc và lưu nó trong một var khác. Sau đó ghi đè XMLHttpRequest gốc và hướng tất cả các lệnh gọi tới nó thông qua đối tượng của riêng bạn.

Mã psuedo:

 var savd = XMLHttpRequest;
 XMLHttpRequest.prototype = function() {
         this.init = function() {
         }; // your code
         etc' etc'
 };

Tôi đã tìm thấy một thư viện tốt trên Github hoạt động tốt, bạn phải đưa nó vào trước bất kỳ tệp js nào khác

https://github.com/jpillora/xhook

đây là một ví dụ thêm tiêu đề http vào bất kỳ phản hồi nào

xhook.after(function(request, response) {
  response.headers['Foo'] = 'Bar';
});

Sử dụng câu trả lời là "meouw", tôi khuyên bạn nên sử dụng giải pháp sau nếu bạn muốn xem kết quả của yêu cầu

function addXMLRequestCallback(callback) {
    var oldSend, i;
    if( XMLHttpRequest.callbacks ) {
        // we've already overridden send() so just add the callback
        XMLHttpRequest.callbacks.push( callback );
    } else {
        // create a callback queue
        XMLHttpRequest.callbacks = [callback];
        // store the native send()
        oldSend = XMLHttpRequest.prototype.send;
        // override the native send()
        XMLHttpRequest.prototype.send = function() {
            // call the native send()
            oldSend.apply(this, arguments);

            this.onreadystatechange = function ( progress ) {
               for( i = 0; i < XMLHttpRequest.callbacks.length; i++ ) {
                    XMLHttpRequest.callbacks[i]( progress );
                }
            };       
        }
    }
}

addXMLRequestCallback( function( progress ) {
    if (typeof progress.srcElement.responseText != 'undefined' &&                        progress.srcElement.responseText != '') {
        console.log( progress.srcElement.responseText.length );
    }
});

jquery ...

<script>
   $(document).ajaxSuccess(
        function(event, xhr, settings){ 
          alert(xhr.responseText);
        }
   );
</script>

Ngoài câu trả lời của meouw, tôi phải đưa mã vào iframe chặn các cuộc gọi XHR và sử dụng câu trả lời ở trên. Tuy nhiên, tôi đã phải thay đổi

XMLHttpRequest.prototype.send = function(){

Đến:

XMLHttpRequest.prototype.send = function(body)

Và tôi đã phải thay đổi

oldSend.apply(this, arguments);

Đến:

oldSend.call(this, body);

Điều này là cần thiết để làm cho nó hoạt động trong IE9 với chế độ tài liệu IE8 . Nếu sửa đổi này không được thực hiện, một số lệnh gọi lại được tạo bởi khung thành phần (Visual WebGUI) không hoạt động. Thông tin thêm tại các liên kết này:

• Function.prototype.call
• Function.prototype.apply

Nếu không có những sửa đổi này, AJAX postbacks không chấm dứt.