ラブ! Web開発

AjaxといってもjQueryのおかげでだいぶ難しいものではなくなりましたよね。デザイナでもサーバサイドが書けるプログラマと組めばわけはないでしょう。

しかし、ちょっとハマったのが上述した現象。

• HTMLからJavaScript(jQueryベース)でAjax通信で値をPOST
• 受け取ったPHPは$_POSTに入っている変数をそのまま返す
• 返すデータ値はプレーンテキスト
• 受け取ったデータ値をJavaScriptでアラート表示

こんな条件の場合、IEだけerrorHandleが返ってきました。はて。
コード例を示しましょうか。

Ajax通信部分：

$(function(){
	$("button").click(function(){
		$.ajax({
			type: 'POST',
			data: {
				"id" : $(this).parent().attr('name'),
				"answer" : $(this).attr('class')
			},
			datatype: "text", // 返ってくる値の形式をTEXTに指定
			url: 'return.php',
			success: handleSuccess, // 通信成功時の処理
			error: handleError, // 通信失敗時の処理
		});
	});
});
// 通信成功時の関数
var handleSuccess = function(data, datatype) {
	alert("通信に成功しました - " +data);
}
// 通信失敗時の関数
var handleError = function(XMLHttpRequest, textStatus, errorThrown) {
	alert('通信に失敗しました - ' + textStatus);
}

サーバ側PHP：

<?php
	// POSTされた値を取得
	$ID = $_POST['id'];
	$answer = $_POST['answer'];

	returnResults();

	// 結果を返す変数
	function returnResults() {
		global $ID;
		global $answer;
		// $resultsに結果を格納してプレーンテキスト形式で返す
		$results = 'posted: ' . $ID . ' - ' . $answer;
		header('Content-type: text/plain');
		print($results);
	}
?>

必要ない部分はかなり削ってシンプルにしましたが大体こんな感じ。
で、動かすと次のようにアラートの動作が分かれました。

Firefoxの場合：

通信に成功しました – posted: 00002 – yes

InternetExproler8の場合

通信に失敗しました – parseerror

まさかサーバサイドスクリプトがローカルのブラウザを左右するとも思えず、ずっとJavaScriptを疑っていたんですが、原因はPHPの14行目にありました。

誤：

header('Content-type: text/plain');

正：

header('Content-type: text/plain; charset=utf-8;');

HTTPヘッダはちゃんと書きましょう、って話ですね……
Apatcheの設定にもよりますが、文字コードまで指定しないとIEではパースエラーを返すらしいです。
たいへん勉強になりました。でもやっぱりIEは爆発しろ。

デザイナのくせにまともにデザイン関連のエントリできなくてすみません。今日はとうとうサーバサイドスクリプトまで範囲が広がりました。このブログはどこへ行くんだろう。