Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

今回は、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を使うときには必然と回避策のコードを書いたほうが安全かもしれませんね。

flexfirm
アプリのテスト関連サービスを行っています。 「実機レンタルweb申し込み」 https://order.flexfirm.jp/?qi_p
http://www.flexfirm.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした