特集
» 2006年08月10日 08時00分 UPDATE

Web2.0で変わるWebプログラミングの常識:Ajaxを理解する4つのポイント (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.」の方法を用いるのがよいだろう。

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

ピックアップコンテンツ

- PR -

注目のテーマ

マーケット解説

- PR -