페이지의 모든 AJAX 요청에 "후크"추가

모든 단일 AJAX 요청 (전송 될 때 또는 이벤트에 대해)에 "연결"하여 작업을 수행 할 수 있는지 알고 싶습니다. 이 시점에서 페이지에 다른 타사 스크립트가 있다고 가정합니다. 이들 중 일부는 jQuery를 사용하고 다른 일부는 사용하지 않을 수 있습니다. 이게 가능해?

aviv의 대답에 영감을 받아 약간 조사를했는데 이것이 제가 생각 해낸 것입니다. 스크립트의 주석에 따라
유용하다고 는 할 수 없으며 물론 기본 XMLHttpRequest 객체를 사용하는 브라우저에서만 작동합니다 .
가능한 한 네이티브 개체를 사용하므로 자바 스크립트 라이브러리가 사용 중이면 작동한다고 생각합니다.

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 세계적하지 망치 어떤 콜백 등 어쩌면 제 3 자 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 개체를 가져 와서 다른 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의 답변 외에도 XHR 호출을 가로채는 iframe에 코드를 삽입하고 위의 답변을 사용했습니다. 그러나 나는 변해야했다

XMLHttpRequest.prototype.send = function(){

에:

XMLHttpRequest.prototype.send = function(body)

그리고 나는 변해야했다

oldSend.apply(this, arguments);

에:

oldSend.call(this, body);

이것은 IE8 문서 모드 로 IE9에서 작동하도록하기 위해 필요했습니다 . 이 수정이 이루어지지 않은 경우 구성 요소 프레임 워크 (Visual WebGUI)에서 생성 된 일부 콜백이 작동하지 않았습니다. 다음 링크에서 추가 정보 :

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

이러한 수정 없이는 AJAX 포스트 백이 종료되지 않았습니다.