POSTメソッドでデータを送信する場合はGETメソッドとは違います。まず、open()メソッドの最初の引数に"POST"を指定します。２番目の引数にはデータを送信するCGIのURLを指定します。実際のデータを送信するのはGETと異なりsend()メソッドの引数として指定します。渡すデータ形式はGETと同じ
データ名=データとなります。日本語などを含む場合にはencodeURI()などでエンコードする必要があります。
実際のスクリプトは以下のようになります。GETの時とほとんど同じです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>POSTメソッドでデータを送信する(日本語対応)</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function dataSave()
{
textData = document.ajaxForm.request.value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("POST","save.rb",true);
httpObj.send("request="+encodeURI(textData));
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = httpObj.responseText;
}else{
$("result").innerHTML = "<b>Wait...</b>";
}
}
// --></script>
</head>
<body>
<h1>POSTメソッドでデータを送信する(日本語対応)</h1>
<form method="post" name="ajaxForm" onsubmit="dataSave();return false;">
<textarea name="request" cols="20" rows="4">何かコメントを書いて送りましょう</textarea><br>
<input type="submit" value="データを送信">
</form>
<div id="result"></div>
</body>
</html>
上記サンプルでは送信するデータが１つですが、複数ある場合はGETメソッドと同様に&で区切って列記します。実際のサンプルは以下のようになります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>POSTメソッドでデータを送信する(2)</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function dataSave()
{
textData1 = document.ajaxForm.request.value;
textData2 = document.ajaxForm.comment.value;
sendData ="request="+encodeURI(textData1);
sendData+= "&comment="+encodeURI(textData2);
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("POST","save.rb",true);
httpObj.send(sendData);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = httpObj.responseText;
}else{
$("result").innerHTML = "<b>Wait...</b>";
}
}
// --></script>
</head>
<body>
<h1>POSTメソッドでデータを送信する(2)</h1>
<form method="post" name="ajaxForm" onsubmit="dataSave();return false;">
<textarea name="request" cols="20" rows="4">要望を書いてください</textarea><br>
<textarea name="comment" cols="20" rows="4">コメントを書いてください</textarea><br>
<input type="submit" value="データを送信">
</form>
<div id="result"></div>
</body>
</html>
POSTメソッドでは画像データを送信したりすることができますが、その際、正しく送信できない場合にはopen()メソッドの後にsetRequestHeader()メソッドでMIME Typeを設定してみてください。
次項はフォームから送信したデータをサーバー側で保存してみます。
[
第四章 4:サーバー側でデータを保存するへ]
[
目次へ]
(2006.1.9)