【jQuery】IE + Ajax関連でいくつかの条件が重なった場合に表示されるエラーとその解決策
【最終更新日:2010年10月23日】
基本事項〜IEについて〜
Internet Explorerでは、NULLもしくは未定義の変数に対して、存在しないメンバ変数を呼び出そうとするとエラーが表示されます。
var hoge;
//または var hoge = null; var hoge = undefined;
alert(hoge.fuga); //←存在しないメンバ変数
『'hoge.fuga' は Null またはオブジェクトではありません。』
他のブラウザでも、画面に表示はされないものの、エラーとして
判断されています。
Firebugでは『hoge is undefined』または『hoge is null』と
表示されます。
jQueryのAjax処理中に上のエラーが発生する条件
【実例】
下記をIE7で開いてみてください。前節と同じエラーメッセージが表示されます。
http://www.usamimi.info/~sutara/sample/jqAjaxErrorTest/test1.html
【ソース】
【test1.html】
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script>
jQuery(document).ready(function($){
ajaxTest('hoge');
ajaxTest('fuga'); //立て続けにAjax通信を行う
});
var $xhr;
function ajaxTest(txt){
if($xhr) $xhr.abort(); //まだ以前のAjax通信が実行中なら、中断する
$xhr = $.getJSON('ajax.php', {'txt':txt}, function(data){
alert(data[txt]); //いきなりdataのメンバ変数を呼び出す
});
}
</script>
</head>
</html>
【ajax.php】
<?php
$data;
$data[$_GET['txt']] = $_GET['txt'];
echo json_encode($data);
?>
【条件】
下記の条件がすべて満たされた場合、エラーが発生します。- jQuery 1.4.2以下の1.4系である。
新たにAjax通信を行う前に、まだ以前のAjax通信が実行中なら
前の通信のほうを中断させる処理を記述している。
Ajax通信後のコールバック関数で、帰ってきたデータに対して
いきなりそのメンバ変数を呼び出す。
立て続けにAjax通信が実行され、条件2の通信の中断が実際に行われる。
条件の検証
【1. 通信を中断する処理を削除】
エラーは発生せず、1番目と2番目のAjax通信は、どちらも成功します。中断処理を省いたんですから当然ですが…。
http://www.usamimi.info/~sutara/sample/jqAjaxErrorTest/test2.html
【test2.html(抜粋)】
function ajaxTest(txt){
//if($xhr) $xhr.abort();
$xhr = $.getJSON('ajax.php', {'txt':txt}, function(data){
alert(data[txt]);
});
}
【2. jQueryを1.3系にする】
1番目のAjax通信は失敗するものの、エラーは表示されません。http://www.usamimi.info/~sutara/sample/jqAjaxErrorTest/test3.html
【test3.html(抜粋)】
<script src="jquery-1.3.2.min.js"></script>
以上で、前節の条件が証明されました。
解決策
では、どうやってエラー表示を回避するのか?IE7だけ、abortしないように分岐を設けます。
function ajaxTest(txt){
if(!$.browser.msie || $.browser.version != '7.0'){
if($xhr) $xhr.abort();
}
$xhr = $.getJSON('ajax.php', {'txt':txt}, function(data){
alert(data[txt]);
});
}
または、jQuery1.4.3以降の1.4系を使うことですね。