連載
» 2009年05月28日 00時00分 公開

jQueryクライアントとPHPサーバ間をJSONで結ぶにはjQueryで学ぶ簡単で効果的なAjaxの使い方(3)(2/3 ページ)

[安田隆次, 関川晶子,ヤスダネットワーク]

[サルで図解]JSON通信サンプルの概要

 まず、どのようなプログラムを作るのか、全体を見ていきましょう。

図2 jQueryクライアントとPHPサーバ間の通信 図2 jQueryクライアントとPHPサーバ間の通信

 自動入力の機能を持った「index.html」は、ユーザーに分からないように裏でサーバ(「autocomplete.php」)と通信を行います。サーバは、ユーザーが入力したキーワードに従って候補の文字列を返します。

 最終的に入力された文字は、学習のためにサーバに送られてデータベースに保存されます。

図3 キーワードに従って、候補の文字列を返す 図3 キーワードに従って、候補の文字列を返す

 候補の順番を学習するために、テーブル構造は以下のようにしました。

フィールド名 説明
id INT PRIMARY KEY インデックスキー
word STRING 候補文字
weight INT 使用頻度
表 サンプルプログラムのテーブル構造

 PHPプログラムからのデータベースの操作の詳細は、以下の記事などを参考にしてください。

データを作成するPHPプログラムの作成

 まず、データベースのテーブルとデータを作成するPHPのプログラムを作ります。プロジェクトに、ファイル名「createdb.php」を作成し、以下のコードを入力します。

<?php
    #データベースに接続する
    print "connecting db.<br>";
    $db = new PDO('sqlite:./autocomplete.db',null,null);
    print_r($db->errorInfo());print "<br>";
 
    #データベースのテーブルを作る
    $db->exec("CREATE TABLE words (id INT PRIMARY KEY, word STRING, weight INT)");
    print_r($db->errorInfo());print "<br>"; 
 
    #データベースの内容を作る
    $db->beginTransaction(); 
    $db->exec("INSERT INTO words (word, weight) VALUES('yasuda',1)");
    $db->exec("INSERT INTO words (word, weight) VALUES('安田',1)");
    $db->exec("INSERT INTO words (word, weight) VALUES('やすだ',1)");
    $db->exec("INSERT INTO words (word, weight) VALUES('yamada',1)");
    $db->exec("INSERT INTO words (word, weight) VALUES('yoshida',1)");
    $db->commit();
    print_r($db->errorInfo());print "<br>"; 
 
    print "db created.<br>"
?>
createdb.php

 プロジェクトのファイル一覧から、createdb.phpを右クリックして表示されるポップアップから、[Run As]→[1 PHP Script]を選択して実行します。

図4 PHPプログラムの実行 図4 PHPプログラムの実行

 コンソールに、以下のように表示されれば成功です。

X-Powered-By: PHP/5.2.5
Content-type: text/html
 
connecting db.<br>Array
(
    [0] => 
)
<br>Array
(
    [0] => 00000
)
<br>Array
(
    [0] => 00000
)
<br>db created.<br>

 次に、作成したデータベースから、リクエストに応じて候補の文字列を返すサーバ側のPHPプログラムを書いていきます。候補の文字を、カンマ区切りで出力するプログラムを作っていきましょう。プロジェクトに、新しく「autocomplete.php」を作成します。

<?php
    header("Content-Type: text/html; charset=UTF-8");
    header("Expires: Thu, 01 Dec 1994 16:00:00 GMT");
    header("Last-Modified: ". gmdate("D, d M Y H:i:s"). " GMT");
    header("Cache-Control: no-cache, must-revalidate");
    header("Cache-Control: post-check=0, pre-check=0", false);
    header("Pragma: no-cache");
 
    #データベースに接続する
    $db = new PDO('sqlite:./autocomplete.db',null,null);
 
    #先頭文字が一致する候補を、weight順に取得
    $state = $db->prepare("SELECT * FROM words WHERE word LIKE :keyword ORDER BY weight DESC");
    $state->bindValue("keyword", $_GET["q"].'%');
    $state->execute();
 
    #カンマ区切りで出力
    while($result = $state->fetch(PDO::FETCH_ASSOC)){
        print $result['word'].',';  
    }
?>
autocomplete.php

 プレビューで確認すると、以下のような文字が出力されます。

yasuda,安田,やすだ,yamada,yoshida,

 次ページでは、jQueryクライアント側でJSONを受けとる部分を解説します。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。