web-dev-qa-db-ja.com

ユーザーが更新をクリックしたときのajaxエラーを処理する

これが私が調べることができるはずのものであるならば、私は謝罪します。私が欲しかった用語はすべて、かなり過負荷でした。

これが私の問題です。ページを開くと、一連のajax呼び出し全体が発生します。次にShift + Refreshを押すと、これらのajax呼び出しはすべてエラーと見なされ、ページ全体がリロードされる前にエラーメッセージダイアログが表示されます。

したがって、エラーはクライアントによってトリガーされています-とにかく、これが当てはまるかどうかを確認できるので、無視できますか?例:xmlhttprequest、またはajax関数(私はjquery btwを使用しています)

40
gcrain

[これは前の回答からの編集であり、それ以来私が解決した未解決の質問がありました]

jQueryは、ユーザーが更新、リンクのクリック、またはブラウザーのURLの変更のいずれかによってページから移動すると、エラーイベントをスローします。これらのタイプのエラーは、ajax呼び出しのエラーハンドラーを実装し、xmlHttpRequestオブジェクトを検査することで検出できます。

$.ajax({
    /* ajax options omitted */
    error: function (xmlHttpRequest, textStatus, errorThrown) {
         if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0) 
              return;  // it's not really an error
         else
              // Do normal error handling
});
19
curthipster

これを検出するためのいくつかの提案されたアプローチがあります:

  • beforeunloadハンドラーを使用してブールフラグを設定し、エラーハンドラーがページがアンロードされていることを認識できるようにすることを提案しているものもあります(以下の関連/重複投稿のリストを参照)。 iOS上のモバイルSafariはbeforeunloadイベントをサポートしていません を除いて、これは素晴らしいことです。

  • Sachindraが提案 エラー関数をすぐに起動する代わりに、setTimeout(..., 1000)で1秒遅延するアプローチ。そうすれば、エラーハンドラーが呼び出されるまでに、ページが実際に消えてしまう可能性が高くなります。つまり「良いチャンス」です。私は私が例えばで巨大なページを持っているかどうかに違いない。たくさんの <input>s、アンロードに1秒以上かかる可能性があり、その後、エラーハンドラーがとにかく起動する可能性があります。

したがって、 確実にbeforeunloadサポートを検出するbeforeunloadがサポートされていない場合(iPad/iPhone)の組み合わせをお勧めします)サチンドラの遅延トリックに戻ります。

beforeunload検出を使用した完全なソリューションと、このすべてを参照してください jsfiddle

状況は jQuery 2.xの方が1.xよりも少し良い のように見えますが、2.xも少し不安定に見えるので、この提案はまだ賢明だと思います。

追伸:XHR/jqXHRオブジェクトのいくつかのフィールドのテストに関する提案もありました。 ( ここ および ここ )。長時間実行されているAJAX呼び出し中に、ユーザーナビゲーションとWebサーバーの再起動を区別できる組み合わせに出くわしたことがないため、このアプローチが役に立たなかった。

これは、これらの関連する/重複するStackOverflowの質問に対する回答でもあります。

スタックオーバーフロー外のこれらの投稿:

37
Peter V. Mørch
var isPageBeingRefreshed = false;

window.onbeforeunload = function() {
    isPageBeingRefreshed = true;
};

$.ajax({
    error: function (xhr, type, errorThrown) {
        if (!xhr.getAllResponseHeaders()) {
            xhr.abort();
            if (isPageBeingRefreshed) {
                return; // not an error
            }
        }
    }
});
6
nisanth074

の組み合わせバージョン nisanth074 そして Peter V. Mørch 答え、それは私のために働いた。

例:

var isPageBeingRefreshed = false;

$(window).on('beforeunload', function(){

    isPageBeingRefreshed = true;
});

$.ajax({

    // Standart AJAX settings

}).error(function(){

    if (!isPageBeingRefreshed) {

        // Displaying error message
    }
});
2
Vaidas

上記の手法は、定期的に更新されるページ(たとえば、30分ごと)では機能しません。エラー処理プロセスを少し遅らせることで、ページの更新によって発生するエラーを回避できることがわかりました。

例:

$.ajax(...)
.success(...)
.error(function(jqXHR) {
setTimeout(function() {
  // error showing process
}, 1000);
});

それに加えて

window.onbeforeunload = function(){// ajax呼び出しを停止する}

イベントは、あまり頻繁に更新されないajax呼び出しに使用できます。

2
Sachindra