web-dev-qa-db-ja.com

すべてのajax呼び出しをインターセプトしますか？

すべてのAJAX呼び出しをインターセプトして、そのAJAX応答に特定のエラーコードが含まれるかどうかを確認するために、PHPスクリプト（コード：ACCESS_DENIED、SYSTEM_ERROR、NOT_FOUND）。

私はこのようなことができることを知っています：

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

しかし、これは「ajaxSuccess」イベントが.log divにバブルアップした場合にのみ機能しますか？私は正しいですか？ 「ajaxSuccess」イベントをドキュメントにバインドすることで、必要なことを実現できますか？

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

これは、jQueryまたはraw JavaScriptのいずれかで実行できます。

javascriptjqueryajaxdom-events
24
Stann

From http://api.jquery.com/ajaxSuccess/ から：

Ajaxリクエストが正常に完了すると、jQueryはajaxSuccessイベントをトリガーします。 .ajaxSuccess（）メソッドで登録されたすべてのハンドラーがこの時点で実行されます。

そのため、セレクターは、イベントを「キャッチ」する位置を定義しません（正直なところ、本来のAjaxイベントはDOM要素から開始されないため）ではなく、デフォルトで処理されるスコープを定義します（つまり、thisは、その/これらの要素にポイントされます）。

要約すると、それはまさにあなたが望むものでなければなりません

8
mkilmanas

JQueryを使用している場合は、$.ajaxSuccessは適切なオプションですが、すべてのフレームワークからのXHR呼び出しをインターセプトする少し一般的なオプションを次に示します（ExtJSと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);

私は githubのより具体的な例 を投稿しましたAJAX呼び出しをインターセプトし、AJAX呼び出し期間をサーバーに返します統計分析。

62
Andrew Newdigate

Ajax呼び出しをインターセプトする未加工のJavaScriptコード：

(function(send) {
    XMLHttpRequest.prototype.send = function(body) {
        var info="send data\r\n"+body;
        alert(info);
        send.call(this, body);
    };
})(XMLHttpRequest.prototype.send);

AjaxをインターセプトするjQueryコード：

$.ajaxSetup({
    beforeSend: function (xhr,settings) {
        alert(settings.data);
        alert(settings.url);
    }
});

リファレンス： http://myprogrammingnotes.com/intercept-ajax-calls-jquery.html

8
peter