XMLHttpRequestによるPOSTリクエスト

var data = { foo:'abc', bar:100 }; // POSTリクエストで送信するデータ


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

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

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

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

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

GETリクエストとの相違点は、

  1. openメソッドで「POST」を指定する。
  2. setRequestHeaderメソッドでContent-Typeを指定する。
  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 ).replace( /%20/g, '+' )
            + '=' + encodeURIComponent( value ).replace( /%20/g, '+' );

        params.push( param );
    }

    return params.join( '&' );
}

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

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

参照