Ajax中にページ更新する際の注意点

Ajaxで通信中にF5などを押してページをリロードすると通信エラーが帰ってきます。

詳しくは調べていませんが、どうもFirefoxでの挙動のようです。

参考：FirefoxでAjax中にF5押したとき « pocketo.net blog

このサイトのようにAjaxのXMLHttpRequestをabort()で中断すれば、この問題は解決できます。

var xhr = $.ajax( {....})
$( document ).bind( 'beforeunload', function() {
	xhr.abort();
} );

ただ、通信の数が多い場合は、毎回設定するのは少し面倒。

そういう場合は、以下のように設定しておくとjQueryでajaxを使うと自動でabort()を設定してくれます。

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

関連エントリー

[ASCII.jp]jQueryでAjaxを利用する基本チュートリアル
jQuery.suggestをIEの日本語に対応
AjaxやJavaScriptのライブラリー
8のjQueryのすごいTIPS
Re:マークアップ・エンジニアのJavaScript入門 - 配列を理解する

スポンサードリンク

«[ASCII.jp]jQueryで作る画像ギャラリーのチュートリアル | メイン | [ASCII.jp]jQueryでアコーディオンパネルUIを自作する»