Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/04/09 13:55

皆さんの開発現場で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上に構築します。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 我妻 隆志(ワガツマ タカシ)

    宮城県仙台市在住 トライポッドワークス株式会社(本社:仙台市)に所属。 JavaやPHP、データベースを利用したアプリケーション開発技術を生かし、製品開発・サポート業務に従事。

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5