JavaScriptでXMLHttpRequestを利用してPOSTでデータを送信する - JavaScript

JavaScriptでXMLHttpRequestを利用してデータをPOSTで送信するコードを紹介します。

プログラム

コード

PostForm.html

HTMLのフォームは以下のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

  <script language="javascript" type="text/javascript">
  function OnButtonClick() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () {
      var READYSTATE_COMPLETED = 4;
      var HTTP_STATUS_OK = 200;

      if (this.readyState == READYSTATE_COMPLETED && this.status == HTTP_STATUS_OK) {
        // レスポンスの表示
        var outFrame = document.getElementById('output');
        outFrame.innerHTML = this.responseText;

      }
    }

    var textBox1 = document.getElementById('Text1');
    var textBox2 = document.getElementById('Text2');
    var PostData = encodeURIComponent('data1') + '=' + encodeURIComponent(textBox1.value)
      + '&' + encodeURIComponent('data2') + '=' + encodeURIComponent(textBox2.value);

    PostData = PostData.replace(/%20/g, '+');

    xmlhttp.open('POST', 'UploadHandler.ashx');
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send(PostData);

  }
  </script>
</head>
<body>
  <input id="Text1" type="text" /><br/>
  <input id="Text2" type="text" /><br />
  <input id="Button1" type="button" value="送信" onclick="OnButtonClick();"/>
  <div id="output"></div>
</body>
</html>

解説

"Button1"をクリックするとOnButtonClick()関数を実行する実装になっています。ボタンクリック時のコード実行についてはこちらを参照してください。

OnButtonClick()関数

var xmlhttp = new XMLHttpRequest();

XMLHttpRequestのインスタンスを作成します。

xmlhttp.onreadystatechange = function () {
  var READYSTATE_COMPLETED = 4;
  var HTTP_STATUS_OK = 200;

  if (this.readyState == READYSTATE_COMPLETED && this.status == HTTP_STATUS_OK) {
    // レスポンスの表示
    var outFrame = document.getElementById('output');
    outFrame.innerHTML = this.responseText;
  }
}

onreadystatechange イベントを実装し、完了時の処理を実装します。今回の実装では、ポスト後サーバーからのレスポンス情報をid=outputのタグの場所にHTML形式で表示します。

var textBox1 = document.getElementById('Text1');
var textBox2 = document.getElementById('Text2');
var PostData = encodeURIComponent('data1') + '=' + encodeURIComponent(textBox1.value)
  + '&' + encodeURIComponent('data2') + '=' + encodeURIComponent(textBox2.value);

PostData = PostData.replace(/%20/g, '+');

テキストボックスの値を取得し、POSTするデータを作成します。POSTデータの形式は
値が一つの場合は

(値名)=(値)

となり、値が複数の場合は、

(値名1)=(値1)&(値名2)=(値2)&(値名3)=(値3)...

となります。
値名、値はURLエンコードするため、値をencodeURIComponent()関数の引数に与え戻り値をPOSTするデータに利用します。
作成したデータの"%20"は"+"に置換します。空白は"%20"のままでも問題はないため、この処理は無くても動作します。

xmlhttp.open('POST', 'UploadHandler.ashx');
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(PostData);

XMLHttpRequestの接続を開き、指定したURLに情報をポストします。

UploadHandler.aspx

POSTされた情報を受け取る側は、今回はASP.NETのジェネリックハンドラーを利用します。
ジェネリックハンドラーのコードは以下になります。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace XMLHttpRequestPost
{
  /// <summary>
  /// UploadHandler の概要の説明です
  /// </summary>
  public class UploadHandler : IHttpHandler
  {

    public void ProcessRequest(HttpContext context)
    {
      if (context.Request.HttpMethod == "GET") {
        context.Response.ContentType = "text/plain";
        context.Response.Write("OK");
      }
      else if (context.Request.HttpMethod == "POST") {
        string value1 = context.Request.Form["data1"];
        string value2 = context.Request.Form["data2"];

        context.Response.ContentType = "text/html";
        context.Response.Write("<html>");
        context.Response.Write("<head></head>");
        context.Response.Write("<body>");
        context.Response.Write(string.Format("<p>data1 = {0:s}</p>", value1));
        context.Response.Write(string.Format("<p>data2 = {0:s}</p>", value2));
        context.Response.Write("</body>");
        context.Response.Write("</html>");
      }
    }

    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}