デモンストレーション

サーバーサイドで足し算をするAJAXサンプルです。回答は1秒後に帰ってきます

+=

スクリプトの説明

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を出力
?>