本連載第1回ではAjax技術の概要と具体的なAjaxアプリケーションについて紹介したわけですが，やはり概論だけではなかなかイメージもわきにくいものです。そこで今回から，具体的なサンプルアプリケーションを通じて，実際のAjax開発を体感してみることにしましょう。

　今回紹介するのは，ごくシンプルな検索アプリケーションです。テキストボックスにISBNコード（書籍を一意に特定するコード）を入力すると，対応する書籍名を表示します。なお，本連載ではサーバーサイドの技術としてPHP（PHP：Hypertext Preprocessor）を使用しますが，Ajaxはサーバーサイドで使用する技術を制限するものではありません。例えば，ASP .NET，JSP＆サーブレット，Perl/CGIのようなサーバーサイド技術を利用しても問題ありません＊1。

従来の方法で作成してみよう

　従来のWebアプリケーションとAjaxアプリケーションとの違いを理解するために，まずPHPだけで検索アプリケーションを実装してみることにしましょう（リスト1）。もっとも，本連載のテーマはあくまでAjaxですから，PHPそのものについては，最低限動作を理解する程度の説明に留めます。コードの流れはプログラム内のコメントを参照いただくとして，構文などの詳細については，拙著「独習PHP」「10日でおぼえるPHP5入門教室」（翔泳社）などの専門書を参考にしてください。

リスト1●従来型Webアプリケーションのコードの例（search.php） 
<html>
<head>
<title>書籍検索</title>
</head>
<body>

<form method="GET" action="search.php">
ISBNコード：
<input type="text" name="isbn" size="20" />
<input type="submit" value="送信" />
</form>
<?php
 /* 入力されたISBNコードをキーに対応する書名（$result）を取得。
    通常のアプリケーションでは、ここでデータベースへの検索処理などを行う */
switch($_GET['isbn']){
  case '4-7981-1070-1' :
    $result='XMLデータベース入門 NeoCore/XprioriでXMLDBを極める！';
    break;
  case '4-88337-491-2' :
    $result='書き込み式 SQLのドリル?ドンドン身に付く、スラスラ書ける';
    break;
  case '4-7980-1270-X' :
    $result='Pocket詳解PHP辞典';
    break;
  default :
    $result='不明';
}
sleep(3);  // 3秒休止（待ち時間を体感するためのダミー）
print($result);  // 取得した結果を出力
?>
</body>
</html>

　リスト1のPHPプログラム（search.php）をWebサーバーに配置したら，ブラウザからアクセスして，表示されたテキストボックスに適当なISBNコードを入力してみましょう（例えば「4-7981-1070-1」）。[送信]ボタンをクリックすると，数秒をおいた後，フォーム下部に対応する書名が表示されれば成功です（図1[拡大表示]）。


[クリックで拡大]

　動作に際しては，以下の点に注目してください。

・結果を表示する際に，ページ「全体」が書き換えられる
・結果を表示する際に，もともとの入力値がクリアされている
・サーバー通信の間は，クライアント側ではほかの処理を行えない

　これらはいずれも，従来型Webアプリケーションの特徴であり，問題点でもあります。従来型Webアプリケーションでは，ページのごく一部を書き換える場合にも常にページ全体をリフレッシュする必要があります。そのため，クライアント/サーバー間におのずと無駄なトラフィックが発生し，通信前のデータも保持できません（正確には，保持することは可能ですが，そのためにはアプリケーション側でなにかしらの仕組みを実装する必要があります）。また，従来型のWebアプリケーションは「同期」処理が基本ですから，クライアントはサーバーに処理を渡した後，サーバーから応答を得るまで次の動作を行えません。つまり，通信のたびにエンドユーザーは処理を中断されてしまいます。

Ajax技術で作り直してみよう

　以上の問題点を理解したうえで，同様のアプリケーションをAjax技術で実装してみましょう。Ajaxアプリケーションを実装する場合，大きくクライアント側で動作するファイル（HTMLファイル，リスト2）とサーバー側で動作するファイル（この場合はPHPスクリプト，リスト3）が必要になります。

リスト2●AjaxアプリケーションのHTMLファイル（searchAjax.html） 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>書籍検索</title>
<script language="JavaScript">
<!--
 // ［送信］ボタンをクリック時の処理を定義
function send() {
   // 非同期通信を行うためのXMLHttpRequestオブジェクトを生成
  try {
    xmlReq = new ActiveXObject("Microsoft.XMLHTTP");
  } catch(e) {
    xmlReq = new XMLHttpRequest();
  }
   // サーバーからの応答時の処理を定義（結果のページへの反映）
  xmlReq.onreadystatechange = function() {
    var msg = document.getElementById("result");
    if (xmlReq.readyState == 4) {
      if (xmlReq.status == 200) {
        msg.innerHTML = xmlReq.responseText;
      } else {
        msg.innerHTML = "通信に失敗しました。";
      }
    } else {
      msg.innerHTML = "通信中…";
    }
  }
  
   // サーバーとの通信を開始
  xmlReq.open("GET","searchAjax.php?isbn="
                    + encodeURI(document.fm.isbn.value),true);
  xmlReq.send(null);
}
//-->
</script>
</head>
<body>
<form name="fm">
ISBNコード：
<input type="text" name="isbn" size="30" />
<input type="button" value="送信" onclick="send()" />
<div id="result" />
</form>
</body>
</html>


リスト3●Ajaxアプリケーションのサーバーサイド・プログラム（searchAjax.php） 


<?php
 // 出力／内部文字コードをUTF-8に設定
mb_http_output('UTF-8');
mb_internal_encoding('UTF-8');
 /* 入力されたISBNコードをキーに対応する書名（$result）を取得。
    通常のアプリケーションでは、ここでデータベースへの検索処理などを行う */
switch($_GET['isbn']){
  case '4-7981-1070-1' :
    $result='XMLデータベース入門 NeoCore/XprioriでXMLDBを極める！';
    break;
  case '4-88337-491-2' :
    $result='書き込み式 SQLのドリル?ドンドン身に付く、スラスラ書ける';
    break;
  case '4-7980-1270-X' :
    $result='Pocket詳解PHP辞典';
    break;
  default :
    $result='不明';
}
sleep(3);  // 3秒休止（待ち時間を体感するためのダミー）
print($result);  // 取得した結果を出力
?>

　処理の流れは図2[拡大表示]のようになります。


[クリックで拡大]

　コードの詳細は次回以降に改めて紹介するとして，まずはsearchAjax.htmlからアプリケーションに実際にアクセスしてみましょう（図3[拡大表示]）。


[クリックで拡大]

　図の見かけは図1とほとんど変わりませんが，動作に際して以下の点が異なっています。

・結果を表示する際に，ページの「必要な個所だけ」が書き換えられる
・結果を表示する際に，もともとの入力値も保持される
・サーバー通信の間も，クライアント側では並行して別の処理を行える

　Ajaxでは，サーバーからの処理結果を反映する際に，ページ全体を書き換えるのではなく，必要な個所だけを書き換えます。そのため，通信に伴うページのチラツキが発生することもありません。もちろん，常にページ全体の情報を送信する従来型のWebアプリケーションに比べて通信量が減少しますので，ページの内容によってはパフォーマンスを改善できます。

　また，連載第1回に紹介したように，Ajaxアプリケーションでは「非同期」処理が基本です。つまり，サーバーがなにかしらの処理を行っている間にもクライアントはその終了を待つ必要はなく，継続して自分の作業を行うことができます。

今回のまとめ

　いかがですか。従来型のWebアプリケーションと比べて，Ajax技術がどのような点を改善しているのかをイメージできたでしょうか。表1に，連載の第1～2回を通じてわかったAjaxの利点をまとめておきます。


表1●Ajax技術における従来型アプリケーションからの主な改善点
ユーザビリティの向上 Webアプリケーションにありがちな通信ごとの画面のチラツキがない
サーバー処理の間もクライアント側の操作が中断されない（非同期処理）
パフォーマンスの改善 必要なコンテンツのみを更新するので，クライアント/サーバー間のトラフィック量を軽減できる;
サーバーサイドで行っていた処理をクライアント側に分散できる
開発生産性の改善 特別なプラグインを導入せずにリッチコンテンツを実現できる
標準的なJavaScriptやXMLの知識のみで開発が可能
アプリケーション開発者が新しい知識を習得する必要がない

　Ajaxは従来型のWebアプリケーションの問題点を解消するだけではありません。Ajaxを利用することで，従来型のWebアプリケーションでは実現しにくかった機能を実装することも可能になります。例えば，メモ帳アプリケーションにおいて，現在編集中のメモを定期的な間隔で自動保存するような機能を想定してみると良いでしょう。このような機能は，「同期処理」が前提となる従来型アプリケーションでは実現しにくいものでした。しかし，Ajaxを利用することで，エンドユーザーにストレスをかけることなく（処理そのものを意識させることなく），容易に実装することが可能になります。

　次回は，今回紹介したAjax対応アプリケーションについて，コードをより詳細に眺めていく予定です。


山田祥寛（やまだ よしひろ）

Microsoft MVP for ASP/ASP .NET。執筆コミュニティ「WINGSプロジェクト」の代表でもある。主な近著に「XMLデータベース入門」「PEAR入門」「Smarty入門」「10日でおぼえる入門教室シリーズ（Jakarta・JSP/サーブレット・PHP・XML）」（以上，翔泳社），「今日からつかえるサンプル集シリーズ（JSP＆サーブレット・PHP5・ASP・XML）」（以上，秀和システム），「書き込み式 SQLのドリル」（ソシム），「JSP/PHP/ASPサーバーサイドプログラミング徹底比較」（技術評論社）など。最近では，IT関連技術の取材，講演，監修まで広く手がける毎日。