모든 AJAX 콜을 가로채시겠습니까?

모든 AJAX 콜을 가로채시겠습니까?

AJAX 응답에 PHP 스크립트(코드: ACCESS_DENIED, SYSTEM_ERROR, NOT_FOUND)에서 JSON으로 보내는 특정 에러 코드가 포함되어 있는지 확인하기 위해 모든 AJAX 호출을 대행 수신하려고 합니다.

이런 걸 할 수 있다는 걸 알아요

$('.log').ajaxSuccess(function(e, xhr, settings) {
});

그러나 - "ajaxSuccess" 이벤트가 .log div까지 버블이 발생한 경우에만 작동합니까?내가 맞나요?"ajaxSuccess" 이벤트를 문서에 바인딩하여 원하는 작업을 수행할 수 있습니까?

$(document).ajaxSuccess(function(e, xhr, settings) {
});

이를 jQuery 또는 raw JavaScript로 실행할 수 있습니다.

jQuery를 사용하는 경우$.ajaxSuccess좋은 옵션입니다만, 여기에서는 모든 프레임워크로부터의 XHR 콜을 대행 수신하는 일반적인 옵션이 있습니다(ExtJ 및 jQuery를 사용하여 테스트했습니다.여러 개의 프레임워크가 동시에 로드되어도 동작합니다).IE8, Chrome 및 Firefox와 함께 사용할 수 있도록 테스트되었습니다.

(function(XHR) {
    "use strict";
        
    var open = XHR.prototype.open;
    var send = XHR.prototype.send;

    XHR.prototype.open = function(method, url, async, user, pass) {
        this._url = url;
        open.call(this, method, url, async, user, pass);
    };

    XHR.prototype.send = function(data) {
        var self = this;
        var oldOnReadyStateChange;
        var url = this._url;
    
        function onReadyStateChange() {
            if(self.readyState == 4 /* complete */) {
                /* This is where you can put code that you want to execute post-complete*/
                /* URL is kept in this._url */
            }
        
            if(oldOnReadyStateChange) {
                oldOnReadyStateChange();
            }
        }
    
        /* Set xhr.noIntercept to true to disable the interceptor for a particular call */
        if(!this.noIntercept) {            
            if(this.addEventListener) {
                this.addEventListener("readystatechange", onReadyStateChange, false);
            } else {
                oldOnReadyStateChange = this.onreadystatechange; 
                this.onreadystatechange = onReadyStateChange;
            }
        }
    
        send.call(this, data);
    }
})(XMLHttpRequest);

AJAX 콜을 대행 수신하여 통계 분석을 위해 서버에 AJAX 콜 지속 시간을 다시 게시하는 보다 구체적인 예를 github에 게시했습니다.

http://api.jquery.com/ajaxSuccess/ 에서 :

Ajax 요청이 성공적으로 완료될 때마다 jQuery는 ajaxSuccess 이벤트를 트리거합니다.이 시점에서 .ajaxSuccess() 메서드로 등록된 모든 핸들러가 실행됩니다.

따라서 셀렉터는 이벤트를 "잡는" 위치를 정의하는 것이 아니라(솔직히 Ajax 이벤트는 본질적으로 DOM 요소에서 시작되지 않기 때문에), 처리가 기본화될 범위를 정의합니다(즉,this그/그 요소(들)를 포인트로 합니다.

요약 - 원하는 대로 해야 합니다.

가장 좋은 방법은 https://lowrey.me/intercept-2/에서 찾았습니다.

const intercept = (urlmatch, callback) => {
  let send = XMLHttpRequest.prototype.send;
  XMLHttpRequest.prototype.send = function() {
    this.addEventListener('readystatechange', function() {
      if (this.responseURL.includes(urlmatch) && this.readyState === 4) {
        callback(this);
      }
    }, false);
    send.apply(this, arguments);
  };
};

Mockjax.js http://code.appendto.com/plugins/jquery-mockjax 를 사용해 보십시오.

서버에 대한 AJAX 콜을 하이잭하여 위치를 모킹할 수 있습니다.

언급URL : https://stackoverflow.com/questions/6884616/intercept-all-ajax-calls