GETメソッドでデータを送信する

　それではフォームに入力された文字列をGETメソッドで送信してみましょう。GETメソッドでの送信は、今まで何度も登場しました。送信前に注意する点があります。Ajaxでデータを送受信できるのは同一ドメインのサーバーに限定されます。つまりGoogleやYahooのURLを指定してGETメソッドで検索文字列を送って結果を得る事はできないということです。これはGETメソッドだけでなくPOSTメソッドでも同様でAjaxを利用している場合には、この制限にひっかかります。GoogleやYahooなどの検索結果を表示しているサイトでは一旦サーバー側で検索文字を受け取り、サーバー側で問い合わせて、その結果をブラウザに返すことで実現しています。それでは、GETメソッドの説明に入りましょう。
　GETメソッドを使って送信する場合にはopen()メソッドの最初の引数（パラメータ）を"GET"と指定します。これでGETメソッドでデータが送信されます。GETメソッドでデータを送信する場合、URLに送信するデータを付加する必要があります。例えばsave.rbというCGIプログラムにデータ名requestで送信する場合には以下のように記述します。

save.rb?request=送信するデータ本体

　CGIプログラム名の後に?を付けて、その直後にデータ名=を記述します。=の後に送信するデータ本体を指定します。送信したいデータが複数ある場合には以下のように&で区切って一行で記述します。

CGIプログラム名?データ1名=データ&データ2名=データ&データ3名=データ

　open()メソッドの２番目の引数に、この送信するデータを指定します。ただし、これだけでは、うまく送信されません。send()メソッドでsend(null)として始めて期待通りデータが送信されます。もし、UNIXなどでsend(null)でうまくいかない場合にはsend("")としてみてください。（実際のサンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>GETメソッドでデータを送信する(日本語を含まない)</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("GET","save.rb?request="+textData,true);
httpObj.send(null);
 }
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = httpObj.responseText;
}else{
$("result").innerHTML = "<b>Wait...</b>";
}
}
// --></script>
</head>
<body>
<h1>GETメソッドでデータを送信する(日本語を含まない)</h1>
<form method="get" name="ajaxForm" onSubmit="dataSave();return false;">
<input type="text" value="test" name="request">
<input type="submit" value="データを送信"><br>
</form>
<div id="result"></div>
</body>
</html>

　上記のスクリプトは送信する文字列に#@%!"など特殊文字や日本語を含まないことを前提にしています。しかし、実際のデータは特殊記号もありますし、日本語も送信されます。そのような場合には、送信する文字列をエンコードする必要があります。JavaScriptでは文字列をエンコードする命令が3つ用意されています。１つはどのブラウザでも利用できるescape()メソッド、次がencodeURI()、そして最後がencodeURIComponent()です。encodeURI()とencodeURIComponent()はInternet Explorer 5.5以降で利用できます。escape()を使うとSafariではうまく日本語が処理できないことがあります。encodeURI()とencodeURIComponent()の違いは文字列に「;/?:@&=+$,」が含まれる場合にエンコードするかどうかです。encodeURI()はエンコードしませんが、encodeURIComponent()はエンコードするため「;/?:@&=+$,」は「%3B%2F%3F%3A%40%26%3D%2B%24%2C」に変換されます。（encodeURI()のサンプルを実行。encodeURIComponent()のサンプルを実行。いずれもCGI側ではエンコードして送信していないため&の文字が含まれると期待通り動作しません。文字が切れます。）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>GETメソッドでデータを送信する(日本語対応)</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("GET","save.rb?request="+encodeURI(textData),true);
httpObj.send(null);
 }
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = httpObj.responseText;
}else{
$("result").innerHTML = "<b>Wait...</b>";
}
}
// --></script>
</head>
<body>
<h1>GETメソッドでデータを送信する(日本語対応)</h1>
<form method="get" name="ajaxForm" onsubmit="dataSave();return false;">
<input type="text" name="request" value="test"> <input type="submit" value="データを送信"><br>
</form>
<div id="result"></div>
</body>

</html>


　これで日本語も問題なく送受信できそうですが、UTF-8でもSafariはBOM (byte Order Mark) がないと、やはり文字化けしてしまいます。そこでUTF-8であることを示すBOMをサーバー側で付加してブラウザ側（クライアント側）に送信します。UTF-8のBOMは次の3バイトです。

EF, BB, BF

　この3バイトを付加して送信するとSafariでも正しく日本語が表示されます。ただし、Opera 8.01だけは駄目で設定されているエンコードによっては文字化けを起こします（解決するにはユーザーにUTF-8エンコードなどページに合わせたエンコードをメニューから選択してもらう必要があります）。Opera 8.5, 9.0では修正されています。また、PHPなどではBOM付きのUTF-8を扱うと問題が発生することがあるようです。通常、UTF-8NというBOMなしのものが前提となっているためBOMを考慮していないプログラムの場合は不具合が発生する可能性が増えます。
　もう１つ別の方法も試してみましょう。サーバー側では一切デコードせずにブラウザ側（クライアント側）でエンコード、デコード処理を行います。今回はescape()とunescape()を使ってみましした。一応、この方法でも使えなくはないようです。（実際のサンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>GETメソッドでデータを送信する(日本語を含まない)</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("GET","save.rb?request="+escape(textData,true));
httpObj.send(null);
 }
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = unescape(httpObj.responseText);
 }else{
$("result").innerHTML = "<b>Wait...</b>";
}
}
// --></script>
</head>
<body>
<h1>GETメソッドでデータを送信する(日本語を含む)</h1>
<form method="get" name="ajaxForm" onsubmit="dataSave();return false;">
<input type="text" name="request" value="日本語表示どうか!?#@"> <input type="submit" value="データを送信"><br>
</form>
<div id="result"></div>
</body>
</html>

　GETメソッドでの送信はURLに送信するデータ名とデータを列記すればよいので、特に入力フォームを用意する必要がありません。これはゲームなどでリアルタイムに座標値などを送信するのに向いています。しかし、URLの文字列の長さには限度があり、画像やアンケートデータなど大量のデータを送信できるわけではありません。そのような場合にはGETではなくPOSTを使う必要があります。
　次項ではPOSTを使ってデータを送信してみます。

[第四章　3:POSTメソッドでデータを送信するへ]
[目次へ]

(2006.1.8、2006.8.23追加)