PHPプロ！TIPS+
PEAR::HTML_AJAXでAjax
Ajaxという言葉を聞いたことがありますか？非同期でサーバと通信を行い、画面遷移することなく情報を更新することができる、簡単に説明するとそのようなものになります。このAjaxを使うことにより従来のWEBアプリケーションとはひと味違ったものを作ることができるようになります。今回はこのAjaxをPHPから簡単に利用するためのライブラリ、PEAR::HTML_AJAXを紹介したいと思います。
このPEAR::HTML_AJAXはまだベータ版なので、インストールするときは
pear install html_ajax-beta
とbetaを付けてインストールします。
インストールができたら早速使ってみることにしましょう。サンプルとしてAjaxを使って簡単なバリデーションを行ってみます。用意するソースコードは、クライアント側とサーバ側の仲介を行う部分(my_ajax_server.php)、実際の処理を行う部分(validation.php)、HTMLやJavaScriptといったクライアント側の部分(validation.html)の計3つです。まずクライアント側とサーバ側の仲介を行うスクリプトです。
<?php
require_once 'HTML/AJAX/Server.php';
class MyAjaxServer extends HTML_AJAX_Server{
var $initMethods = true;
function initValidation(){
require_once('validation.php');
$hello = new Validation();
$this->registerClass($hello);
}
}
$server = new MyAjaxServer();
$server->ajax->php4CompatCase = true;
$server->handleRequest();
?>
ここでは各種設定やクラスの登録、JavaScriptの生成、リクエストの実行処理等を行います。まず、HTML_AJAX_Serverを継承してクラスを作成して実際の処理を行うクラスをregisterClass()メソッドを用いて登録します。次に、インスタンスを作成して、handleRequest()メソッドを実行します。このメソッドによりPHPとJavaScriptの橋渡し、リクエストの実行を行います。次に実際の処理を行う部 分です。
<?php
class Validation{
function Validation(){
}
function checkNum($num){
$escape_num = htmlspecialchars($num, ENT_QUOTES);
if (strlen($escape_num) == 0) {
exit;
}
if (preg_match("/^[0-9]+$/", $escape_num)) {
return '半角数字です';
} else {
return '半角数字ではありません';
}
}
}
?>
今回は簡単なバリデーションということで、入力された値が数字かどうか判断するという処理を行っています。最後にクライアント側の部分、HTMLとJavaScriptです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript"
src="my_ajax_server.php?client=all"></script>
<script type="text/javascript"
src="my_ajax_server.php?stub=validation"></script>
<title>sample</title>
<script type="text/javascript">
//<![CDATA[
function callback(){}
callback.prototype = {
checknum: function(result){
document.getElementById('result').innerHTML = result;
}
}
var validation = new validation(new callback());
Behavior.register(
'#num',
function(element) {
element.onkeyup = function(){
validation.checknum(document.getElementById('num').value);
}
}
);
//]]>
</script>
</head>
<body>
<label for="num">入力してください：</label>
<input type="text" name="num" id="num" value="" />
<div id="result"></div>
</body>
</html>
script要素で先に述べたmy_ajax_server.phpを読み込みます。パラメータclient=allでHTML_AJAXの機能を読み込み、パラメータstub=validationで登録されたクラスを読み込みます。次にAjaxの通信で使われるコールバック関数callback()を作成します。最後に、PEAR::HTML_AJAXの機能の一つであるBehaviorを使ってテキストボックスにイベントを登録します。これで完成です。実行してみてください。
テキストボックスに値を入力すると非同期でサーバに問い合わせを行い、入力された値が数字か否か検証しその結果をクライアントに返します。
今回は数字か否かの簡単なチェックですが、これを応用してデータベースと絡めることによりより実用的なものを作成することができます。例えばログインフォームやユーザ登録フォームなどで、ユーザの入力完了を待たずに有効なIDかパスワードか検証することが可能になります。
PHPとの親和性が高くいろんな可能性を秘めたPEAR::HTML_AJAX、興味のある方は使ってみてはどうでしょうか？
PEAR::HTML_AJAX http://pear.php.net/package/HTML_AJAX
バックナンバーについて
TIPS-MLは、毎週金曜日に更新され、新しい記事が掲載されます。
ページのトップへ
一つの目安として、ECサイトの購入情報など絶対に消えてはいけないものはDBに、カートなどの一時的に使用する情報や、ユーザに任意のタイミングで消去されても構わないものはセッションにと使い分けるといいでしょう。