Dodaj „hak” do wszystkich żądań AJAX na stronie

Chciałbym wiedzieć, czy możliwe jest „podpięcie” się do każdego pojedynczego żądania AJAX (w momencie, gdy ma zostać wysłane lub w przypadku zdarzeń) i wykonać akcję. W tym momencie zakładam, że na stronie znajdują się inne skrypty innych firm. Niektóre z nich mogą używać jQuery, a inne nie. czy to możliwe?

Zainspirowany odpowiedzią Aviva , przeprowadziłem małe dochodzenie i oto, co wymyśliłem.
Nie jestem pewien, czy to wszystko jest tak przydatne, jak w komentarzach w skrypcie i oczywiście będzie działać tylko w przeglądarkach używających natywnego obiektu XMLHttpRequest .
Myślę, że zadziała, jeśli biblioteki javascript są używane, ponieważ będą używać obiektu natywnego, jeśli to możliwe.

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

UWAGA: Zaakceptowana odpowiedź nie daje rzeczywistej odpowiedzi, ponieważ jest wywoływana zbyt wcześnie.

Możesz to zrobić, co generalnie przechwyci wszystkie AJAX na całym świecie i nie zepsuje żadnych wywołań zwrotnych itp., Które mogą zostać przypisane przez biblioteki AJAX stron trzecich.

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

Więcej dokumentów na temat tego, co możesz tutaj zrobić za pomocą interfejsu API addEventListener:

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

(Uwaga: to nie działa <= IE8)

Skoro wspomniałeś jQuery, wiem jQuery oferuje .ajaxSetup()sposób, który wyznacza globalne opcje AJAX, które zawierają wyzwalacze zdarzeń takich jak success, errori beforeSend- co jest, co brzmi jak co szukasz.

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

oczywiście będziesz musiał zweryfikować dostępność jQuery na każdej stronie, na której próbujesz użyć tego rozwiązania.

Jest na to pewien podstęp.

Przed uruchomieniem wszystkich skryptów weź oryginalny obiekt XHMHttpReuqest i zapisz go w innym var. Następnie nadpisz oryginalny XMLHttpRequest i przekieruj wszystkie wywołania do niego za pośrednictwem własnego obiektu.

Kod pseudo:

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

Znalazłem dobrą bibliotekę na Githubie, która dobrze wykonuje swoją pracę, musisz ją dołączyć przed innymi plikami js

https://github.com/jpillora/xhook

oto przykład, który dodaje nagłówek http do każdej przychodzącej odpowiedzi

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

Korzystając z odpowiedzi „meouw” proponuję skorzystać z następującego rozwiązania, jeśli chcesz zobaczyć wyniki zapytania

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>

Oprócz odpowiedzi meouw musiałem wstrzyknąć kod do elementu iframe, który przechwytuje wywołania XHR i użyłem powyższej odpowiedzi. Jednak musiałem się zmienić

XMLHttpRequest.prototype.send = function(){

Do:

XMLHttpRequest.prototype.send = function(body)

I musiałem się zmienić

oldSend.apply(this, arguments);

Do:

oldSend.call(this, body);

Było to konieczne, aby działał w IE9 z trybem dokumentów IE8 . Jeśli ta modyfikacja nie została dokonana, niektóre wywołania zwrotne generowane przez strukturę komponentów (Visual WebGUI) nie działały. Więcej informacji pod tymi linkami:

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

Bez tych modyfikacji ogłaszanie zwrotne AJAX nie zakończyło się.