今から始める MySQL入門

今から始める MySQL入門（10）

AjaxのバックエンドにPHP＋MySQL



鶴長 鎮一（book@tsurunaga.jp）
2007/08/24

今から始める MySQL入門 フロントエンド（frontend.html、frontend.js）の処理


　フロントエンドのfrontend.htmlの5行目で、外部のJavaScriptファイルfrontend.jsを読み込みます。JavaScriptを外部ファイル化することで、HTMLファイルのヘッダー部（<HEAD>〜</HEAD>）を簡素化できます。

　入力フォーム（16〜38行目）では、name属性でform1を指定しておきます（16行目）。同様に各テキストボックスやテキストエリアにもname属性で固有の識別子を割り当てておきます（21、27、32行目）。固有の識別子を割り当てることで、テキストエリアに入力された値の操作などを、容易にJavaScriptから行えるようになります。

　郵便番号テキストボックスではキー入力（具体的には、押下したキーが解放された瞬間）をトリガーに、JavaScriptで定義したsetZip_code()関数を実行するよう、イベント属性「onkeyup」にsetZip_code()関数を指定します。その際、「this.value」で得られるテキストボックスへの入力値をsetZip_code()の引数として渡します（21行目）。なおキー入力がトリガーになるため、setZip_code()の実行頻度は高くなっています。

　バックエンドのメッセージを表示するメッセージテキストエリアは、表示のみのため、readonly属性を付加します（32行目）。

5 <script type="text/javascript" src="frontend.js"></script>

16 <form name="form1">

20 <td>〒番号：</td>
21 <td><input type=text name="zip_code" size="7" maxlength="7" onkeyup="setZip_code(this.value)">

26 <td>住所　：</td>
27 <td><input type=text name="address" size="50" maxlength="100"></td>

31 <td>メッセージ：</td>
32 <td><textarea name="mess" cols="45" rows="4" readonly></textarea></td>

38 </form>
リスト2　frontend.html

　Ajaxのフロントエンド処理を担うfrontend.jsは、大まかに以下のような処理で構成されています。

JavaScriptでHTTP通信を行うためのXMLHttpRequestオブジェクトを生成する（2行目）（ブラウザ別に生成方法を用意（47〜74行目））
        ↓
バックエンドへのリクエストURL「backend.php?zip_code=郵便番号テキストボックスに入力された値」を作成（8行目）
        ↓
XMLHttpRequestオブジェクトのopen()メソッドで、HTTPメソッド（GET）／リクエストURL／非同期の使用（true）を設定する（9行目）。
        ↓
バックエンドからデータを受信する際にコールバック関数が実行されるよう、XMLHttpRequestオブジェクトのonreadystatechangeプロパティにコールバック関数を設定する。レスポンスデータの処理はコールバック関数で行う（12行目）
        ↓
XMLHttpRequestオブジェクトのsend()メソッドでサーバへリクエストを送信する（15行目）

 1 //XMLHttpRequestオブジェクト生成
 2 var xmlHttp = createXmlHttpRequest();
 4 //郵便番号テキストフィールドのonkeyupイベントで実行される処理。リクエストを生成し、レスポンスを取得
 5 function setZip_code(zip_code){
...
 8   var url = 'backend.php?zip_code='+zip_code;
 9   xmlHttp.open('GET', url, true);
...
12   xmlHttp.onreadystatechange = handleHttpEvent;
...
15   xmlHttp.send(null);
16 }

18 //HTTPレスポンスデータを処理し、XMLを解析しフォームに値をはめ込むコールバック関数
19 function handleHttpEvent(){
...
44 }
46 //ブラウザ別にXMLHttpRequestオブジェクトを生成
47 function createXmlHttpRequest(){
...
74 }
リスト3-1　frontend.js

　さらに、バックエンドからデータを受信したときに呼び出されるコールバック関数「handleHttpEvent」では、以下のような処理が行われます。

XMLHttpRequestオブジェクトのreadyStateプロパティを使って、受信データが読み込み済み（4）か確認し、同時にstatusプロパティでHTTPレスポンスコードが正常（200）であることを確認する。正常性を確認できたとき、この後の処理を行う（21行目）
        ↓
XMLHttpRequestオブジェクトのresponseXMLプロパティで、サーバからのレスポンスをXMLDocumentオブジェクトとして取得（24行目）
        ↓
取得したXMLDocumentオブジェクトからgetElementsByTagName("要素名")を使ってXMLの各要素を取り出す。まず「 <stat>〜</stat>」から値を取り出し、「ok」ならば住所データと該当件数を取り出し、各テキストボックス・エリアに当てはめる（29〜35行目）。「na」ならメッセージだけを取り出してメッセージテキストエリアに当てはめ、住所テキストボックスの内容はクリアする（36〜41行目）

19 function handleHttpEvent(){
...
21   if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
...
24     var xmlDoc = xmlHttp.responseXML;
25     if (xmlDoc.documentElement){
...
29       if (stat.data == "ok"){
...
36       }else if(stat.data == "na"){
...
41       }
42     }
43   }
44 }
リスト3-2　frontend.js


■サンプル利用時の注意

　以上がバックエンドとフロントエンドの処理内容になります。

　なお、作成過程でJavaScriptやバックエンドを修正したにもかかわらず、ブラウザの表示結果に反映されない場合があります。AjaxもHTTPリクエストを使用する以上、非同期で取得するデータにもブラウザのキャッシュが使用されます。特に、GETメソッドを使用し、しかもURLに変化がない場合は、キャッシュヒット率が高くなります。

　また、データベースのデータ、HTMLやPHPファイルのエンコード、バックエンドから送出されるXML、すべての文字コードをUTF-8に統一しています。文字化けが発生するようなら、php.iniに以下の2行を追加しておきます。php.iniのインストール先は第1回「MySQL＋Apache＋PHPをインストールしよう」を参考にしてください。

[mbstring]
mbstring.internal_encoding = UTF-8
mbstring.http_output = UTF-8
※使用はmbstringが有効な場合に限られます。mbstringについては第1回「MySQL＋Apache＋PHPをインストールしよう」を参照

▼コラム2　XMLパースエラーとその対策
　ブラウザからの動作確認で、バックエンドへ直接アクセスしXMLを表示しようとした際、画面4のように「XMLパースエラー」が表示され、正常な動作が確認できない場合があります。これは、エラー内容のとおり「<?xml...>」が先頭になく、スペースや改行などの不正文字が挿入している場合に発生します。
画面4　XMLパースエラー（Firefoxの場合）

　これを防ぐにはPHPファイルを確認し、特に、<?php ...?>前後に無駄な改行や空白がないようにします。また直接XMLを出力するPHPとは別に、require_onceなどで外部ファイルを読み込んでいる場合は、そのPHPファイルに無駄な改行や空白がないか確認します。

        ←ここにスペースや改行が挿入されていないか確認する
<?php
...
?>
        ←requireで読み込まれるファイルでは、ここにスペースや改行が挿入されていないかも確認する


今から始める MySQL入門 「簡易オンラインストア」にAjaxを組み込む


　sample6で作成したAjaxによる住所データ入力支援機能を、前回までに作成した「簡易オンラインストア」に組み込みます。

■PHPファイル改修のポイント

　前回作成したsample5に先ほどのsample6を統合しますが、その際、DTO・DAOパターンを踏襲するよう改修を加えます。

　Ajaxのバックエンドを担うbackend.phpでは、MySQL接続・切断・データ抽出といったDB操作を、新たに作成するZip_addressDao.phpに分離します。それに伴いZip_address.phpを作成し、DTOに利用します。frontend.jsはほぼそのまま使用しますが、メッセージテキストエリアがないため、関連する処理を削除します。frontend.jsを読み込む1行を、ユーザーに住所入力を促すconfirm.phpに追加します。

　PHPファイルの改修は以上です。最後に、sample6と同様に、郵便番号・住所データをMySQLに用意します。

■sample7のインストールと動作確認

　こちらからサンプルアーカイブ「sample7.tgz」をダウンロードし、Apache HTTPDのドキュメントルート（注）など、PHPが動作するディレクトリに展開し、作業ディレクトリを移動します。その後サンプルに含まれる「sample_db7.sql」を利用し、データベース「sample_db7」を準備します。

注：ソースからデフォルトインストールした場合は/usr/local/apache2/htdocs、FedoraやRed hatなどRPMインストールした場合は/var/www/htmlなど

サンプルダウンロード：
sample7のtarアーカイブ

サンプル「sample7」をドキュメントルートに展開し、作業ディレクトリを移動する。下のドキュメントルートはFedoraやRed hatなどRPMインストールした場合の例。適宜変更する
# cd /var/www/html
# tar xvfz /..pathto../sample7.tgz
# cd sample7

データベース「sample_db7」を作成する
# mysqladmin -u root -p create sample_db7

「sample_db7.sql」ファイルで各テーブルと初期データを準備する。権限設定（ユーザー名：php、パスワード：password）も同時に行われる。ただしApache HTTPDサーバとMySQLサーバが同一ホストでない場合は、新たな権限の追加が必要になる。その場合の作業は、第8回の「sample5のインストール手順と確認作業」を参考にする
# mysql -u root -p sample_db7 < sample_db7.sql

　インストール後の確認作業として、まずmenu.phpを表示させ、商品を購入します。その後表示されるconfirm.phpの「〒番号」に数字を入力し、住所欄に自動的にデータが挿入されることを確認します。なお、最初の入力では、MySQLサーバ接続処理のために多少反応が遅れる場合があります。その際は少し入力速度を抑え、反応を確かめるようにします。

◇

　以上、Ajaxを取り入れ、PHPをバックエンドに使用する方法を紹介しました。

　セッションステートレスなHTTPでは、画面の切り替わりに伴い入力データを引き継がせる処理が煩雑になるため、ネイティブアプリケーションのような入力支援機能を取り入れるには、大変な苦労が伴います。しかしこのようにAjaxを使用することで、画面遷移に関係なく、ユーザーインターフェイスを充実させることができます。

　ただし、その分バックエンドに掛かる負荷は高くなります。今回のサンプルのように、キー入力が発生するたびにデータベースへの問い合わせが発生するようなケースでは、別途データベースとの接続を最適化させる手段を検討するようにしてください。（次回に続く）

【参考】
KJ（著）、田中 ナルミ（著）
「PHPによるWebアプリケーションスーパーサンプル 活用編」
ソフトバンククリエイティブ

3/3

Index
今から始める MySQL入門（10）
　AjaxのバックエンドにPHP＋MySQL
　 Page 1
　サンプルファイルで理解するAjaxの動作（1）
　　　sample6のインストールと動作確認
　　　コラム1　郵便番号・住所データベースの作成方法
  Page 2
　サンプルファイルで理解するAjaxの動作（2）
　　　JavaScriptとXMLで連携
　バックエンド（backend.php）の処理
Page 3
　フロントエンド（frontend.html、frontend.js）の処理
　　　サンプル利用時の注意
　　　コラム2　XMLパースエラーとその対策
  「簡易オンラインストア」にAjaxを組み込む
　　　PHPファイル改修のポイント
　　　Sample7のインストールと動作確認

連載 今から始める MySQL入門

　Linux Squareフォーラム データベース関連記事
連載：快速MySQLでデータベースアプリ！（全11回）
軽快な動作で知られるRDBMS、MySQLでDBアプリの構築を行う。MySQLのインストールに始まり、PerlやRubyなどのスクリプトでデータベースを操作する方法までを完全解説
連載：今から始める MySQL入門（連載中）
定番のLAMP（Linux＋Apache＋MySQL＋PHP）構成でWebアプリケーション開発に挑戦！ サンプルアプリの構築を進めながら、基礎知識や操作方法について詳しく解説する
連載：Oracleマイスター養成講座（全6回）
本連載では、Oracleの管理・チューニング方法を紹介していく。これからOracleを始める人、そしてOracleをより深く理解したい人のための、一歩踏み込んだ実用講座
連載：DB2マイスター養成講座（全7回）
本連載では、DB2 UDBの実践的な運用・管理方法を紹介していく。DB2を利用するうえで必要な知識を、実運用を前提にDB2のプロが解説
特集：エンタープライズ市場に向かうMySQL 5.0［前編］
MySQL 5.0の新機能をアルファ版でチェック
1月に公開された5.0アルファ版は大幅に拡張されており、エンタープライズ市場への進出を予感させる
特集：Linuxで動くリレーショナルデータベース・カタログ
データベースサーバのOSとしてLinuxを採用するケースが増えている。Linuxで動作する7つの主なリレーショナルデータベースを紹介する。製品導入の際の参考にしてほしい

MONOist組み込み開発フォーラムの中から、Linux関連記事を紹介します

TechTargetジャパン

Linux Square フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ



- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH