JavaScriptの動かないコード　(中級編)　Ajax読み込み時に「システムエラー -1072896658」

以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分）

やりたい事：

Ajaxを使って，a.htmlに外部ページ(b.php)を読み込む。
下の例ではjQueryを使っているが，べつにprototype.jsでも，素のXMLHttpRequestでもよい。
似たような事をしていれば，べつにPHPでなくてもよい。

a.html

<body>

<input type="button" value="読み込み" onClick="f()">

<!-- ここに読み込まれます -->
<div id="my_div"></div>

<script src="jquery.js"></script>
<script language="JavaScript">

function f()
{
	$( "#my_div" ).load(
		"b.php?" + (new Date()).getTime()
	);
	// キャッシュ回避のためURLにタイムスタンプ付加
}

</script>

</body>

b.php

<?php

// エンコード指定
header("Content-Type: text/plain; charset=utf8");

echo "読み込まれました。";

?>

答え

上記のページにて，IEでボタン押下すると

Web ページに問題があるため、正しく表示または機能しなくなる可能性があります。今後、ステータスバーに表示された警告アイコンをダブルクリックすると、このメッセージを表示できます。

システムエラー -1072896658

というエラーメッセージが出る。b.phpは読み込まれない。

IEでは，Ajaxによる読み込み先ページのエンコードが，ヘッダ中で正しく指定されていないと，ブラウザがページの読み込みを拒否する。

「ヘッダ中で」というのがポイント。冒頭の例でいえば，

header("Content-Type: text/plain; charset=utf8");

は誤りであり，

header("Content-Type: text/plain; charset=utf-8");

が正しい。（b.php自体はUTF-8のBOM無し(utf8n)で保存しておく必要がある。）

「utf8」ではハイフンがないので，IEからajax読み込みした場合（もしくはresponseText取得時）には文字コード設定ミスになってしまうのだ。
「shift-jis」のようにファイルのエンコードと異なるものを指定しても駄目だし，あるいは「hoge」とか実在しない文字コード名を入れても同様のエラーになる。

なお，ハイフンなしの「utf8」であっても，Firefoxでは正常に読み込まれる。

これはPHPに特化した問題ではない。jspなど，特定のサーバ設定に基づいて動的にページを出力する場合にはいつでも発生しうる。

特に多いのは，Apacheの設定で

AddDefaultCharset none

となっているので冒頭のエラーが発生するケース。これは，このApacheの設定自体を変更する必要がある。

AddDefaultCharset none の謎　http://ya.maya.st/web/RTFM.html#adddefaultcharset

本件はエラーメッセージが意味不明のためとても時間を食う。

XMLHttp IE Error 1072896658
http://www.lovelysystems.com/schwendi...

The header of the requested html snipped was set to
charset=utf8
After I changed the header to:
charset=UTF-8
everything worked fine.
Thank you microsoft for my last 3 hours of work and for your very verbal error messages.

少し似たエラーとして，下記のようなものもある。

Ajax読み込み時に「80020101」のエラー
http://language-and-engineering.hatenablog.jp/entry/20080827/1219808640

IEのエラーメッセージ表示のわかりにくさは何とかならないか。

しかも，どうしてエラーコードがマイナスなんだろう。

連載目次へ