XMLHttpRequestによるPOSTメソッド

var data = { param1: 'abc', param2: 100 }; // POSTメソッドで送信するデータ


var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function()
{
    var READYSTATE_COMPLETED = 4;
    var HTTP_STATUS_OK = 200;

    if( this.readyState == READYSTATE_COMPLETED
     && this.status == HTTP_STATUS_OK )
    {
        // レスポンスの表示
        alert( this.responseText );
    }
}

xmlHttpRequest.open( 'POST', 'index.php' );

// サーバに対して解析方法を指定する
xmlHttpRequest.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );

// データをリクエスト ボディに含めて送信する
xmlHttpRequest.send( EncodeHTMLForm( data ) );

POSTとGETメソッドとの相違点は、

  1. open()メソッドで「POST」と指定する。
  2. setRequestHeader()メソッドでContent-Typeを指定する。
    (このsetRequestHeader()は、必ずopen()の後で呼ぶ必要があります)
  3. send()メソッドの引数に送信するデータを含める。

の3点です。

このときContent-TypeにはHTMLフォームの送信に使用されるapplication/x-www-form-urlencodedを指定し、それに伴い送信するデータもその形式に合わせてエンコードする必要があります。その処理が次の関数になります。

// HTMLフォームの形式にデータを変換する
function EncodeHTMLForm( data )
{
    var params = [];

    for( var name in data )
    {
        var value = data[ name ];
        var param = encodeURIComponent( name ) + '=' + encodeURIComponent( value );

        params.push( param );
    }

    return params.join( '&' ).replace( /%20/g, '+' );
}

処理としてはパラメータの名前と値をURLエンコードして「=」で連結し、さらにパラメータを「&」で連結しています。

このときURLエンコードに注意しなくてはなりません。「application/x-www-form-urlencoded」では半角スペースが「+」でなければならないため、上記コードではencodeURIComponent()のエンコード結果の「%20」を「+」に修正しています。

参考

  • JavaScript 第5版 [オライリー・ジャパン] David Flanagan
    20章「HTTPの制御」 20.2.3 「HTTP POST」
JavaScriptのドキュメントから検索