Ajaxを理解する4つのポイント：Web2.0で変わるWebプログラミングの常識（4/6 ページ）

[大澤文孝，ITmedia]

5. パラメータを作成する

　POSTメソッドの場合には、送信するパラメータ（ボディ部）を作成する。

var parameter =

"value1=" +

encodeURIComponent(

document.getElementById('value1').value) + "&" +

"value2=" +

encodeURIComponent(

document.getElementById('value2').value);

　これはDOMを用いてフォームに入力された「value1」と「value2」の値を取得して文字列を作成するというものだ。この「value1」と「value2」とは、HTMLフォームにある次のテキストボックスだ。

<input type="text" id="value1"/>

<input type="text" id="value2"/>

　この処理により、図2のようにテキストボックスに「300」「100」という値が入っている場合には、

value1=300&value2=100

という文字列が得られる。

6. 送信する

　リクエストを送信するには、sendメソッドを呼び出せばよい。

req.send(parameter);

GETメソッドを使って送信する

　GETメソッドで送信する場合のコードは、次のようにURLの後ろにパラメータをクエリ文字列として付けて送信する。

req.open('GET', 'http://example.jp/calc.php?'

+ parameter, true);

req.send("");

　この時サーバ側では、「$_POST」の代わりに「$_GET」を使ってデータを取得することになる。

　GETメソッドの場合には、標準で「キャッシュが働く」という点に注意してほしい。つまり、sendメソッドを呼び出しても、実際にはサーバへ要求が送られず、ブラウザ内のキャッシュデータが取得されてしまい、最新の情報が取得できない可能性があるのだ。

　この問題を解決するには、1. サーバからデータを返す時に「Pragma:no-cache」や「Cache-Control:no-cache」などのキャッシュを無効にするヘッダを付ける、2. URLの後ろに「hoge=タイムスタンプ値やランダム値」といったパラメータクエリを付け、URLが前回と同じにならないようにする、といった工夫をする必要がある。

　筆者の経験では、「1. 」ではブラウザによって効力がないという事例を見たため、「2.」の方法を用いるのがよいだろう。