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

Web2.0で変わるWebプログラミングの常識:Ajaxを理解する4つのポイント (5/6)

[大澤文孝,ITmedia]

7. サーバ側の処理

 前の「6.」の時点では、リスト2に示したサーバ側に置いたcalc.phpが呼び出される。

 サーバ側の処理をPHPで行う場合、通常のWebアプリケーションと同様に、$_POST変数を使ってポストされたデータを取得できる。

$value1 = $_POST['value1'];

$value2 = $_POST['value2'];


 この処理の理由は、XMLHttpRequestオブジェクトから、POSTメソッドで、かつ、Content-Typeをapplication/x-www-form-urlencodedとして送信したからである。

 ここでは数字が送受信されるだけのため、特にエンコード処理をしていない。しかし、XMLHttpRequestオブジェクトを通じて送信されるデータは「UTF-8」となるため、日本語を用いる場合には注意してほしい。

 リスト2では、このようにして取得した値の「和」「差」を次のように計算している。

$addvalue = $value1 + $value2;

$diffvalue = $value1 - $value2;


 そして次のように、戻すべきXML文字列を作成している。

$result = "<result>" .

"<add>$addvalue</add>" .

"<diff>$diffvalue</diff>" .

"</result>";


 これにより、たとえば、

<result><add>400</add><diff>200</diff></result>


という文字列が出力される。

 これをContent-Typeを「text/xml」にして送信する。

header("Content-Type: text/xml");

print $result;


 なお送信に関しても、XMLHttpRequestオブジェクトが理解できるのは、UTF-8に限られる。そのため日本語が含まれているのであれば、UTF-8に変換する必要がある。

 Content-Typeをtext/xmlに設定し忘れると、クライアント側のスクリプトでは、responseXMLプロパティの戻り値としてDocumentオブジェクトを取得できないことも覚えておこう。

8. 受信処理

 このようにして、サーバ側からは、

<result><add>400</add><diff>200</diff></result>


というXMLデータが戻ってくることになる。次にこのデータを受信するクライアント側のスクリプト部分を見てみよう。

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

ピックアップコンテンツ

- PR -

注目のテーマ