Tambahkan "hook" ke semua permintaan AJAX di halaman

Saya ingin tahu apakah mungkin untuk "menghubungkan" ke setiap permintaan AJAX (baik saat akan dikirim, atau pada acara) dan melakukan tindakan. Pada titik ini saya berasumsi bahwa ada skrip pihak ketiga lainnya di halaman. Beberapa di antaranya mungkin menggunakan jQuery, sementara yang lain tidak. Apakah ini mungkin?

Terinspirasi oleh jawaban aviv , saya melakukan sedikit penyelidikan dan inilah yang saya temukan.
Saya tidak yakin bahwa itu semua berguna sesuai dengan komentar di skrip dan tentu saja hanya akan berfungsi untuk browser yang menggunakan objek XMLHttpRequest asli .
Saya pikir itu akan berfungsi jika perpustakaan javascript digunakan karena mereka akan menggunakan objek asli jika memungkinkan.

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

CATATAN: Jawaban yang diterima tidak menghasilkan respons yang sebenarnya karena dipanggil terlalu dini.

Anda dapat melakukan ini yang secara umum akan mencegat AJAX apa pun secara global dan tidak mengacaukan callback apa pun, dll. Yang mungkin telah ditetapkan oleh pustaka AJAX pihak ketiga.

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

Beberapa dokumen lagi tentang apa yang dapat Anda lakukan di sini dengan addEventListener API di sini:

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

(Perhatikan ini tidak berfungsi <= IE8)

Karena Anda menyebutkan jquery, saya tahu penawaran jquery sebuah .ajaxSetup()metode yang set global yang pilihan ajax yang mencakup pemicu peristiwa seperti success, error, dan beforeSend- yang adalah apa yang terdengar seperti apa yang Anda cari.

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

tentu saja Anda perlu memverifikasi ketersediaan jQuery di halaman mana pun tempat Anda mencoba menggunakan solusi ini.

Ada trik untuk melakukannya.

Sebelum semua skrip berjalan, ambil objek XHMHttpReuqest asli dan simpan di var yang berbeda. Kemudian timpa XMLHttpRequest asli dan arahkan semua panggilan ke sana melalui objek Anda sendiri.

Kode Psuedo:

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

Saya telah menemukan perpustakaan yang bagus di Github yang melakukan pekerjaan dengan baik, Anda harus memasukkannya sebelum file js lainnya

https://github.com/jpillora/xhook

berikut adalah contoh yang menambahkan tajuk http ke setiap respons yang masuk

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

Menggunakan jawaban "meouw" saya sarankan untuk menggunakan solusi berikut jika Anda ingin melihat hasil permintaan

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>

Selain jawaban meouw, saya harus menyuntikkan kode ke dalam iframe yang mencegat panggilan XHR, dan menggunakan jawaban di atas. Namun, saya harus berubah

XMLHttpRequest.prototype.send = function(){

Untuk:

XMLHttpRequest.prototype.send = function(body)

Dan saya harus berubah

oldSend.apply(this, arguments);

Untuk:

oldSend.call(this, body);

Ini diperlukan untuk membuatnya berfungsi di IE9 dengan mode dokumen IE8 . Jika modifikasi ini tidak dibuat, beberapa panggilan balik yang dibuat oleh kerangka komponen (Visual WebGUI) tidak bekerja. Info lebih lanjut di tautan ini:

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

Tanpa modifikasi ini postback AJAX tidak berhenti.