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


（アシアル　熊谷裕志）

この記事は、アシアルが運営するＰＨＰ開発者のためのポータル＆コミュニティサイト「ＰＨＰプロ！」で毎週配信しているＰＨＰ・ＴＩＰＳメーリングリストを再録したものです。
同サイトでは、他にもＰＨＰ最新ニュースや、困ったときのＱ＆Ａ掲示板、初心者向けのＰＨＰ講座など、ＰＨＰ開発者をサポートする情報を掲載しています。