気を付けよう!! Ajax通信中の画面再描画

今回は、jQuery（v1.10）を使ったAjaxについて、先日ちょっとはまったので共有です。

はまったこと

先日、jQueryのAjaxを使って以下のような感じで、サーバから情報を適時取得するようなコードを書いていたのですが、

$.ajax({
    url : '/get_data.json',
    type : 'POST',
    dataType : 'json',

    data : {
        'hoge' : hoge_id,
    },

    success : function(data) {
        //data表示処理
    },

    error : function(request, status, err) {
        alert('ERROR!!' + ' [' + request.status +']');
    }
});

なぜか、とあるタイミングでF5をすると

ERROR!![0]

というエラーダイアログが表示されることに気付いてしまいました。。

エラーステータスが0なので、ちょっと戸惑いましたが
色々とググったところ、Ajax通信中にF5で画面再描画をすると通信が切断されて、このような現象が発生するようです。
error : functionでalertを表示しなければいいのですが、通常（再描画時以外）のエラー時にはエラーダイアログを表示したいです。
でも、再描画時には表示したくない、という訳で悩んでしまいました。

解決策

以下を追加してあげると、ページの再描画時にAjaxの通信がアボートするようになり、
エラーダイアログが表示されなくなります。

$(document).bind("ajaxSend", function(c, xhr) {
    $(window).bind( 'beforeunload', function() {
        xhr.abort();
    })
});

コメント

ググったらすぐに分かったのですが、ググらないと中々気づきずらい現象ですね。
しかもメッセージが不親切で、テストでもカバーするのは難しいです。
Ajaxを使うときには必然と回避策のコードを書いたほうが安全かもしれませんね。