AjaxのXMLHttpRequestで、openメソッドでPOSTを指定し・sendメソッドでなぜかデータが送信できない時の解決方法

XHRでPOSTでデータが送信できない

POSTでデータが受け渡しできないスクリプトの例

「XMLHttpRequest(※以下XHRと略)オブジェクト生成 → openメソッドでHTTPメソッド(ここではPOST)・URLを指定 → sendメソッドでデータ送信 → 返り値出力」という簡単なスクリプトを書いてみたんですが、どうやらPOSTできなていようです。

<script language="JavaScript" type="text/javascript">// <![CDATA[
function getRes() {
    var obj = new XMLHttpRequest();
    obj.open('POST', './echo.php', true);
    obj.send('data=送信するデータ');
    obj.onreadystatechange = function() {
        if (obj.readyState == 4) {
            var res = obj.responseText;
            alert(res);
        }
    }
}
// ]]></script>
<form>
<input type="button" value="サーバにデータ送信&折り返し受信" onclick="getRes();" />
</form>

<?php
$data = htmlspecialchars($_POST['data']);
echo $data . 'をサーバ側で受信しました。';

上記のスクリプトでは、正常にPOSTでデータが送信されると「送信するデータをサーバ側で受信しました。」というアラートボックスが表示されます。
しかし、上記スクリプトでは正常にPOSTで受け渡しができまんでした。(「をサーバ側で受信しました。」と表示されるだけ)

解決方法

まず結論から言うと、openメソッドの直後にsetRequestHeaderメソッドでContent-Typeを下記のように指定すれば正常に送信できるようになりました。

obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

参考資料

• AJAXでXMLHttpRequestのopenをPOST、sendに内容を送っても送信できない時 - ウィリアムのいたずらの開発日記