เพิ่ม "hook" ให้กับคำขอ AJAX ทั้งหมดบนเพจ

ฉันต้องการทราบว่าเป็นไปได้หรือไม่ที่จะ "เชื่อมโยง" กับคำขอ AJAX ทุกรายการ (ไม่ว่าจะเป็นในขณะที่กำลังจะถูกส่งหรือในเหตุการณ์) และดำเนินการ ณ จุดนี้ฉันสมมติว่ามีสคริปต์ของบุคคลที่สามอื่น ๆ ในหน้านี้ บางส่วนอาจใช้ jQuery ในขณะที่บางส่วนไม่ใช้ เป็นไปได้หรือไม่

แรงบันดาลใจจากคำตอบของ avivฉันได้ตรวจสอบเล็กน้อยและนี่คือสิ่งที่ฉันคิดขึ้นมา
ฉันไม่แน่ใจว่ามันมีประโยชน์ทั้งหมดตามความคิดเห็นในสคริปต์และแน่นอนว่าจะใช้ได้กับเบราว์เซอร์ที่ใช้วัตถุ 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);
    };
})();

เอกสารเพิ่มเติมเกี่ยวกับสิ่งที่คุณสามารถทำได้ที่นี่ด้วย addEventListener API ที่นี่:

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

(โปรดทราบว่าสิ่งนี้ใช้ไม่ได้ <= IE8)

เมื่อคุณพูดถึง jQuery ฉันรู้ jQuery ข้อเสนอ.ajaxSetup()วิธีการที่ชุดตัวเลือกอาแจ็กซ์ทั่วโลกที่มีการเรียกเหตุการณ์เช่นsuccess, errorและbeforeSend- ซึ่งเป็นสิ่งที่ดูเหมือนจะเป็นสิ่งที่คุณกำลังมองหา

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

แน่นอนคุณจะต้องตรวจสอบความพร้อมใช้งานของ jQuery ในหน้าใด ๆ ที่คุณพยายามใช้โซลูชันนี้

มีเคล็ดลับในการทำ

ก่อนที่สคริปต์ทั้งหมดจะทำงานให้ใช้อ็อบเจ็กต์ XHMHttpReuqest ดั้งเดิมและบันทึกในตัวแปรอื่น จากนั้นแทนที่ XMLHttpRequest ดั้งเดิมและกำหนดเส้นทางการเรียกทั้งหมดไปยังวัตถุของคุณ

รหัส Psuedo:

 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) ไม่ทำงาน ข้อมูลเพิ่มเติมที่ลิงค์เหล่านี้:

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

หากไม่มีการแก้ไขการโพสต์แบ็ค AJAX เหล่านี้ไม่ได้ยุติลง