JQueryとPHPで作るシンプルなAJAX Firespeed

Ajaxを使うことで、Webのユーザーインターフェイスを
劇的に改善することが出来るんだけれど、
イマイチ良いサンプルが見つからなかったのでJQueryとPHPで実装するサンプルを作ってみたよ

サンプルが見つからない理由

Ajaxはサーバーとクライアントの連携で動いているけれど、
サーバーは多種多様な技術があるので網羅できない。
クライアント側だけ説明すると、サーバー側が抜けるのでそのままではサンプルを動かすことが出来ない。

ということで、ターゲットをPHPとJQueryに限定してサーバーからクライアントまで一貫したサンプルにしてみました。
ソースコードを極力シンプルにして全コード掲載しています。

作る物

クライアントからサーバーに数値を二つ送信し、
二つの値を足した結果をサーバーから取得して画面を更新する。

用意する物

PEARが動くサーバー

今回はJSONを処理するのにPEARのJSONライブラリを使用している
JSONは必須の技術ではないし、PEARを使わなくてもJSONを処理することも出来るけれど、今回は説明を省く

JQuery

jQueryを使うことで複数のブラウザへの対応が簡単になる上に、ソースコードがシンプルになる。
※ただしGoogleのホスティングサービスを使う場合は不要。
JQueryダウンロードDownload(jQuery)よりソースコードがダウンロード可能。
とくにZip化などはされていないのでjQueryのソースコードが直接ブラウザに表示される。
名前を付けて保存で保存する。

フォルダ構成

今回はサーバー上に以下の構成でファイルを作成する。
/
|ajax.html （ユーザーが呼び出すページ、数値を二つ入力するフィールドを持つ）
+js
||ajax.js （ajax.htmlのページに特化したJavaScript）
||jquery.js（ダウンロードしたjQueryをリネームして配置）
+php
|ajax.php(受信した値を加算した内容を戻す)
|json.php(ダウンロードしたpear::jsonライブラリ)

index.html

データの入力とJavaScriptの呼び出しを行うコードを記載する。

ソースコード

 
<!DOCTYPE html> 
<html> 
  <head> 
    <script type="text/javascript" src="js/jquery.js" ></script> 
   <script type="text/javascript" src="js/ajax.js"></script> 
  </head> 
  <body> 
    <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> 
  </body> 
</html>

説明

<script type="text/javascript" src="js/jquery.js" ></script>

jQueryを呼び出す。
jQueryはダウンロードしなくても
http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.jsを指定してGoogleのホスティングを使用することも出来る。

<script type="text/javascript" src="js/ajax.js"></script>

ページ特有の処理を行うajax.js（以下で作成）を指定する。

ajax.js

サーバーへPostを投げ、帰ってきた値を表示するJavaScriptを作成し、HTMLで指定した場所へajax.jsの名前で保存する。

ソースコード

$(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("php/ajax.php", param, function(returnValue){
			/**
			* PHPからレスポンスが帰ってくると実行される、引数はレスポンスの値
			*/
			alert(returnValue.answer); // 結果はプロパティで取得出来る
		},"json");
	});
});

説明

$(document).ready(function() {

ドキュメントの準備が完了した時の処理を記載する。

$("#send").click(function(){

計算するボタンが押された場合の処理を記載する。
ドキュメントの準備が完了したときの処理の中にあるのに注意。
ドキュメントの準備が完了したときに、計算するボタンがクリックされた時の処理を設定しているのであり、実際に処理が動くのは計算するボタンが押されてからになる。

var form = $("#inputForm");// パラメータを取り込むFormのID

変数formにid inputFormを代入している。

rel = form.serializeArray();
$(form.serializeArray()).each(function(i, v) {
  param[v.name] = v.value;
});

formの中身を配列にセットする。
今回の場合、フォーム内にはxとyがあるため
param["x"]にxに入力した値
param["y"]にyに入力した値が代入される

$.post("php/ajax.php", param, function(returnValue){
  /**
  * PHPからレスポンスが帰ってくると実行される、引数はレスポンスの値
  */
  alert(returnValue.answer); // 結果はプロパティで取得出来る
 },"json");

今回最大の山場、
非同期でサーバーに送信を行い、戻ってきた値を処理する部分。
サーバーに非同期で送信を行うにはjQueryの$.postを使用する
第1引数にpostの送信先、
第2引数にpostで送信するパラメータ
第3引数に完了時に行う処理（引数はサーバーより返された値）
第4引数に受信するデータの種類を指定する。

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

説明

<?php
	if($_SERVER["REQUEST_METHOD"] != "POST"){
	  //POST以外ははじく
	  header("HTTP/1.0 404 Not Found");
	  return;
	}

POST以外のメソッドが呼ばれた場合、処理する項目はないので404エラーを出力する。
必要に応じてエラーメッセージを出力してもいい

	header("Content-Type: text/html; charset=UTF-8");

Ajaxの戻り値は必ずUTF-8にすること、
元のページやPHPがUTF-8以外であってもUTF-8で返す必要がある。

require_once "json.php";

pearのjson.phpを呼び出す。

$x = $_POST['x'];
$x = mb_convert_encoding($x,"EUC-JP","UTF-8");
$y = $_POST['y'];
$y = mb_convert_encoding($y,"EUC-JP","UTF-8");

今回サーバー側のエンコードがEUC-JPだったため文字コードを変換している。
送信元のHTMLがEUC-JPでもUTF-8で飛んでくるので注意

$r = $x+$y;
$answer = "答えは{$r}";
sleep(1);

サーバーで処理するロジック、
今回は足し算を行うだけのシンプルな処理、
これだけなら普通はJavaScript単独で十分だけれど、ソースコードをシンプルにするために足し算だけにしている。
実際にはDBに登録するなどサーバーでしか行えない処理を行う。

	// 結果は必ずUTF-8で返すこと
	$answer = mb_convert_encoding($answer,"UTF-8","auto");

サーバーがUTF-8以外で動いている場合、出力内容をUTF-8に変換してやる必要がある

	//JSON形式にすることで複数の値を返すことも可能
	$arr = array(
		"answer" => $answer
	);
	$json = new Services_JSON;
	$encode = $json->encode($arr); //JSONに変換

戻り値の配列を作成し、Service_JSONのencodeを使用してJSON形式に変換する。

	echo $encode;	//JSONを出力
?>

ajaxの戻り値といっても特殊なことは必要なく、単にechoないしPrintで出力してやればいい

動作サンプル

JQueryとPHPで作るシンプルなAJAX