FirefoxでAjax中にF5押したとき

posted by cheesepie on 2009.08.07, under javascript
30th

Ajaxでのコンテンツ取得に時間がかかっている時に、画面をreloadすると、Firefoxだけreload後にエラー処理が実行された。

例えば、ブラウザ側では

$.ajax( {
  type: "get",
  url: "test.php",
  data: queryString,
  success: function(msg){
    alert( "Success! " + msg );
  },
  error: function( msg ) {
    alert( "Error! " + msg );
  }
} );

で、サーバ側では時間がかかるようにsleep(10)とかしといて、待ってる間にブラウザをreloadしてみます。
すると、XHRがabortされずにエラーハンドラが実行されちゃう。

エラーハンドラが実行されてしまうのは、リロードされるタイミングでreadyStateは4なのに、statusが0（ってか空っぽ）が返ってきて、エラー処理まで到達してしまうからなんだけど、XHRってreload関係なく引き継がれるのか。。。
IEとSafariはよしなにabortしてくれてるみたい。

Firefoxで”readyState”が4なのに”status”が0ってのは仕様らしくて、その場合”responseText”があるかどうかでabortするか判定できる。
ちなみにjQueryの$.ajax関数は対応してないorz
そもそも、まだレスポンスが返ってきていないので、readyStateは1を返すべきですが。

でもreloadのケースの場合、reloadされるタイミングでabortしないといけないので、上の対応をしてもどうしようもない。

ということで、MDCを見たら”onBeforeUnload”というドンピシャなイベントを発見。

$( document ).bind( 'beforeUnload', function() {
  xhr.abort();
} );

これでエラーが出なくなりましたー。ヒャッハー！
勉強になりました。

2 comments | Tags:

comment

TrackBack URL :

pagetop