JavaScriptとPHPでつくるAjaxインクリメンタル検索

Ajaxとデータベースアプリケーション作成の基本

皆さんの開発現場でAjaxは活用されているでしょうか？ 最近はいろいろなJavaScriptフレームワークが出てきているため、Ajaxのサンプルもウェブ上に多く掲載されています。この記事では、「特定のフレームワークを利用せずにAjaxによるインクリメンタル検索を実装してみる」ことで、Webアプリケーションの基礎を振り返ってみたいと思います。

はじめに

　Ajax（エイジャックス：Asynchronous JavaScript＋XMLの略称）はウェブ上のサービスを中心に普及してきました。

　皆さんの開発現場でAjaxは活用されているでしょうか？　最近はいろいろなJavaScriptフレームワークが出てきているため、Ajaxのサンプルもウェブ上に多く掲載されています。しかし、特定のJavaScriptフレームワークやWebアプリケーションフレームワークに依存したサンプルは制約も多いため、活用を躊躇しているITエンジニアも多いのではないでしょうか？

　この記事では、特定のフレームワークを利用せずにAjaxによるインクリメンタル検索を実装してみることで、Webアプリケーションの基礎を振り返ってみたいと思います。

　今回作成するインクリメンタル検索アプリは、蔵書の検索です。完成イメージを以下に示します。

検索前の状態（全件表示）

インクリメンタル検索を実行したところ

　本記事は、以下の順序で進みます。

1. 全体の構成を設計する
2. MySQLとデータの準備
3. PHPで検索処理を実装する
4. JavaScriptでインクリメンタル検索を実装する

　なお、記事中で利用しているサンプルファイル一式（books-ddl.sql、books-dml.sql、search.css、search.php、search-ajax.php）は記事上部からダウンロードできる形で別添しています。併せて参照してください。

対象読者

　JavaScript、PHP、MySQLに関して基本的な知識があるのが望ましいですが、プログラミング初心者でもLinux上でサンプルを動かせる方であれば参考になると思います。

必要な環境

　MySQLサーバの環境と、PHPによるWebアプリケーションを実行できる環境が必要です。

　本プログラムの実行環境は以下の通りです。

• CentOS 5.1
• Apache 2.0.63
• MySQL 5.0.51
• PHP 5.2.5

　またブラウザは、

• IE7（WindowsXP）
• Firefox2（WindowsXP）
• Opera9（WindowsXP）
• Safari3（MacOSX）

　で動作確認をしています。

全体の構成を設計する

　今回作成するアプリケーションのテーマは蔵書検索です。Ajaxによるインクリメンタル検索を実装するための構成は以下のようになります。

アプリケーション構成（クリックすると大きな画像が表示されます）

それぞれの機能について

検索指示画面 (search.php)

　検索キーワードを入力して、検索を指示するための画面です。イベントを処理するJavaScriptも併せて記述します。

検索処理 (search-ajax.php)

　サーバサイドの検索処理をPHPで処理します。PHPとMySQLを連携して実装します。

蔵書テーブル (books)

　蔵書情報が格納されたテーブルをMySQL上に構築します。