スクリプトの説明
index.html(クライアントプログラム)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" ></script>
<script type="text/javascript" src="/js/jquery.json.js" ></script>
<script type="text/javascript">
/**
* PHPにPOSTを送る 要jQuery、jquery.json
*/
$(document).ready(function() {
// 初期処理
$("#send").click(function(){
var form = $("#inputForm");// パラメータを取り込むFormのID
var param = {}; // 配列を初期化
// フォーム内の情報を配列にまとめる
rel = form.serializeArray();
$(form.serializeArray()).each(function(i, v) {
param[v.name] = v.value;
});
$.post("ajax.php", param, function(returnValue){
//PHPからレスポンスが帰ってくると実行される、引数はレスポンスの値
var response = $.evalJSON(returnValue); //戻り値はJSONで送られてくるのでオブジェクトに変換
alert(response.answer); // 結果はプロパティで取得出来る
});
});
});
</script>
<section>
<h1>デモンストレーション</h1>
<p>サーバーサイドで足し算をするAJAXサンプルです。回答は1秒後に帰ってきます</p>
<form id='inputForm' method='post' action=''>
<input type="text" name="x" />+<input type="text" name="y" />=<input type="button" id="send" value="計算する" />
</form>
</section>
</body>
</html>
ajax.php(サーバープログラム)
<?php
if($_SERVER["REQUEST_METHOD"] != "POST"){
//POST以外ははじく
header("HTTP/1.0 404 Not Found");
return;
}
header("Content-Type: text/html; charset=UTF-8");
//Proposal for "Services_JSON"を使ってJSONを処理する、以下からダウンロード可能
//http://pear.php.net/pepr/pepr-proposal-show.php?id=198
require_once "json.php";
// データはUTF-8で取得される。
// 他のエンコードに変える場合は変換が必要
$x = $_POST['x'];
$x = mb_convert_encoding($x,"EUC-JP","UTF-8");
$y = $_POST['y'];
$y = mb_convert_encoding($y,"EUC-JP","UTF-8");
$r = $x+$y;
$answer = "答えは{$r}";
// 非同期で動いていることを強調するために1秒停止
sleep(1);
// 結果は必ずUTF-8で返すこと
$answer = mb_convert_encoding($answer,"UTF-8","auto");
//JSON形式にすることで複数の値を返すことも可能
$arr = array(
"answer" => $answer
);
$json = new Services_JSON;
$encode = $json->encode($arr); //JSONに変換
echo $encode; //JSONを出力
?>