Додайте "гачок" до всіх запитів AJAX на сторінці

Мені хотілося б знати, чи можна "підключити" кожен запит AJAX (або як він збирається відправити, або на події) та виконати дію. На даний момент я припускаю, що на сторінці є й інші сторонні сценарії. Деякі з них можуть використовувати jQuery, а інші -. Чи можливо це?

Надихнувшись відповіді Авіва , я трохи розслідував, і ось що я придумав.
Я не впевнений, що це все так корисно, як за коментарями до сценарію, і, звичайно, буде працювати лише для браузерів, що використовують нативний об’єкт XMLHttpRequest .
Я думаю, що це спрацює, якщо використовуються бібліотеки javascript, оскільки вони, можливо, використовуватимуть нативний об’єкт.

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

ПРИМІТКА. Прийнята відповідь не дає фактичної відповіді, оскільки її називають занадто рано.

Ви можете зробити це, що загалом перехопить будь-який AJAX у всьому світі і не викрутить будь-які зворотні дзвінки тощо, які, можливо, були призначені будь-якими сторонніми бібліотеками AJAX.

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

Ще кілька документів про те, що ви можете зробити тут з API addEventListener тут:

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

(Зверніть увагу, це не працює <= IE8)

Так як ви говорите JQuery, я знаю , що Jquery пропонує великий .ajaxSetup()метод , який встановлює глобальні параметри Ajax , які включають тригери подій , як success, errorі beforeSend- що то , що звучить як то , що ви шукаєте.

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

звичайно, вам потрібно буде перевірити наявність jQuery на будь-якій сторінці, на якій ви намагаєтесь використовувати це рішення.

Для цього є хитрість.

Перш ніж всі сценарії запущені, візьміть оригінальний об’єкт XHMHttpReuqest і збережіть його в іншому var. Потім замініть оригінальний XMLHttpRequest і направляйте всі дзвінки на нього через власний об’єкт.

Код Псуедо:

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

Я знайшов хорошу бібліотеку в Github, яка добре виконує цю роботу, ви повинні включити її до будь-яких інших js-файлів

https://github.com/jpillora/xhook

ось приклад, який додає заголовка http до будь-якої вхідної відповіді

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

Використовуючи відповідь "meouw", я пропоную скористатися наступним рішенням, якщо ви хочете побачити результати запиту

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>

На додаток до відповіді meouw, мені довелося ввести код у iframe, який перехоплює виклики XHR, і використав вищевказану відповідь. Однак мені довелося змінити

XMLHttpRequest.prototype.send = function(){

До:

XMLHttpRequest.prototype.send = function(body)

І мені довелося змінити

oldSend.apply(this, arguments);

До:

oldSend.call(this, body);

Це було необхідно, щоб він працював в IE9 в режимі документа IE8 . Якщо ця модифікація не була здійснена, деякі зворотні дзвінки, створені компонентною рамкою (Visual WebGUI), не працювали. Більше інформації за цими посиланнями:

• Функція.прототип.виклик
• Функція.прототип.застосувати

Без цих модифікацій передплати AJAX не припинялися.