Bir sayfadaki tüm AJAX isteklerine bir "kanca" ekleyin

Her bir AJAX isteğine (gönderilmek üzere veya olaylarda) "bağlanmanın" ve bir eylem gerçekleştirmenin mümkün olup olmadığını bilmek istiyorum. Bu noktada, sayfada başka üçüncü taraf komut dosyalarının da olduğunu varsayıyorum. Bunlardan bazıları jQuery kullanabilirken diğerleri kullanmaz. Mümkün mü?

Aviv'in cevabından esinlenerek biraz araştırma yaptım ve bulduğum şey buydu. Komut dosyasındaki açıklamalara göre
bu kadar yararlı olduğundan emin değilim ve elbette yalnızca yerel bir XMLHttpRequest nesnesi kullanan tarayıcılar için çalışacaktır .
Mümkünse yerel nesneyi kullanacaklarından javascript kitaplıkları kullanılıyorsa işe yarayacağını düşünüyorum.

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

NOT: Kabul edilen yanıt, çok erken çağrıldığı için gerçek yanıtı vermez.

Bunu genel olarak herhangi bir AJAX'ı genel ve herhangi bir üçüncü taraf AJAX kitaplığı tarafından atanmış olabilecek geri aramaları vb. Bozmayacak şekilde yapabilirsiniz.

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

AddEventListener API ile burada neler yapabileceğinize dair daha fazla belge burada:

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

(Bunun işe yaramadığını unutmayın <= IE8)

Eğer jquery söz beri, jquery sunuyor bir biliyorum .ajaxSetup()yöntemi böyle olay tetikleyicileri şunlardır setleri küresel ajax seçenekleri success, errorve beforeSend- Aradığınız ne gibi sesler budur.

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

Elbette bu çözümü kullanmaya çalıştığınız herhangi bir sayfada jQuery'nin kullanılabilirliğini doğrulamanız gerekir.

Yapmanın bir numarası var.

Tüm komut dosyaları çalışmadan önce, orijinal XHMHttpReuqest nesnesini alın ve farklı bir var. Ardından orijinal XMLHttpRequest öğesini geçersiz kılın ve tüm çağrıları kendi nesneniz aracılığıyla ona yönlendirin.

Psuedo kodu:

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

Github'da işi iyi yapan iyi bir kitaplık buldum, diğer js dosyalarının önüne eklemelisiniz

https://github.com/jpillora/xhook

İşte gelen herhangi bir yanıta bir http başlığı ekleyen bir örnek

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

"Meouw" cevabını kullanarak, istek sonuçlarını görmek istiyorsanız aşağıdaki çözümü kullanmanızı öneririm.

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'un cevabına ek olarak, XHR çağrılarını kesen bir iframe'e kod enjekte etmek zorunda kaldım ve yukarıdaki cevabı kullandım. Ancak değiştirmek zorunda kaldım

XMLHttpRequest.prototype.send = function(){

Kime:

XMLHttpRequest.prototype.send = function(body)

Ve değişmek zorundaydım

oldSend.apply(this, arguments);

Kime:

oldSend.call(this, body);

IE9 belge moduyla IE9'da çalışmasını sağlamak için bu gerekliydi . Bu değişiklik yapılmadıysa, bileşen çerçevesi (Visual WebGUI) tarafından oluşturulan bazı geri aramalar çalışmadı. Bu bağlantılarda daha fazla bilgi:

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

Bu değişiklikler olmadan AJAX geri gönderimleri sona ermedi.