『入門Ajax 増補改訂版』を読む その4
Posted by Junya HOSONO 2008年6月 1日 AM 8:57
今回は、CHAPTER05 Ajax ライブラリとCHAPTER06 Ajax 基本サンプルを見ていきます。
CHAPTER05では、前回説明しました XMLHttpRequest の実装に関して、いくつかの有名な Ajax ライブラリではどのように取り扱われているかを確認します。前回の記事で用いたものと同じ機能を、Ajax ライブラリを利用するとどれだけ楽になるかを見てみましょう。
続くCHAPTER06では、様々なサンプルが掲載されていますが、そのなかからサーバ側のデータベースからデータを取得するサンプルを試してみます。
CHAPTER05 Ajax ライブラリ
この CHAPTER では、5つの Ajax ライブラリをあげて、XMLHttpRequest 機能の実装部分に関して各メソッドをリファレンス的に提示しています。ここでは、prototype.js を用いて、前回のサンプルプログラムと同等の機能を実装してみます。prototype.jsは、いくつかのAjax ライブラリの基盤ともなっているライブラリですので、利用されている方も多いと思います。
この prototype.js を用いて前回と同じ機能を実装すると、以下のようになりました。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>prototype.js サンプル</title>
<script type="text/javascript" src="http://www.ngo-jvc.net/blogs/wfn/prototype.js"></script>
</head>
<body>
<script type="text/javascript">
// ボタンが押されたら
function sendReq( url )
{
var oj = new Ajax.Request (
url,
{
method :'get',
onComplete: callback
}
);
}
// データ受信完了時
function callback( request ) {
var xmlDoc = request.responseXML;
var msg = xmlDoc.getElementsByTagName( "msg" );
var data = msg[0].firstChild.nodeValue;
alert( data );
}
</script>
<form>
<input type=button
value="test1.xml を読み込み、メッセージボックスを表示します "
onclick="sendReq('./test1.xml')">
</form>
</body>
</html>
前回との違いは、createHttpRequest 関数はライブラリの中に組み込まれたことで不要となり、sendReq 関数も機能を wrap されてかなり簡素になった点ですね。自分のロジックの実装により集中できる感じになっている印象です。このあたりは、フレームワークとしての機能が現れているというところですね。
本のほうでは、他のイベントやステータスをハンドリングするメソッドのリファレンスがあります。また、個人的に注目している Ajax ライブラリである jQuery のサンプルもありますが、ここでは割愛します。
CHAPTER06 Ajax 基本サンプル
XMLやJSONの受信、Basic認証、SSL通信などの各種サンプルが示されています。いよいよ実用的な部分に踏み込んできたかな、というところですね。そしてここでは、サーバ側のデータベースのデータを取得するサンプルを見てみます。
このサンプルでは、Ajax （Javascript）側から直接データベースにアクセスするのではなく、いったんサーバ側のスクリプト（ここではPerl）を呼び出して、そのPerl スクリプトがデータベースをアクセスする、という段階を踏んでいます。以下のような順番になります。
- ページ上のボタンが押されると、Javascript で サーバ上のPerl スクリプト（ajax_p205.cgi）を呼び出す
- 呼び出された Perlスクリプトで、データベースに接続し、SQL文でデータを取得して、これを print する
- Perl スクリプトの実行が完了すると、Javascript （prototype.js）側にそれが通知されて、onComplete で指定している コールバック関数（callback）が起動される
- callback には、引数として Perlスクリプトの出力である print した内容がテキストで入ってくるので、これを画面に出力する
全体の機能としては、データベースに格納されている都道府県名を取得する、といったものです。
まずはAjax側のプログラムから。ここでは、本の中で使っている Ajax ライブラリとは異なり、prototype.js を利用しています。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>p205 prototype.jp版</title>
<script type="text/javascript" src="http://www.ngo-jvc.net/blogs/wfn/prototype.js"></script>
</head>
<body>
<script type="text/javascript">
// ボタンが押されたら
function sendReq( url )
{
var oj = new Ajax.Request (
url,
{
method :'get',
parameters: '&code=10',
onComplete: callback
}
);
}
// データ受信完了時
function callback( request ) {
var res = request.responseText;
alert( res );
}
</script>
<form>
<input type=button
value="MySQLから、都道府県NOから県名取得 "
onclick="sendReq('./ajax_p205.cgi')">
</form>
</body>
</html>
次に、サーバ側にある Perl スクリプトです。GET受信の部分や文字コード変換、データベース接続まわりの記述が多くなっていますが、それらはもう"お約束"と思って、実際の機能部分になるべく注目するようにしてみてください。具体的には、SQL発行とその結果取得のところですね。そこを青字にしてあります。
#!/usr/local/bin/perl
use DBI;
use Jcode;
#GETを受信しURLデコードして、SQLエスケープ
($dmy, $code) = split(/code=/, $ENV{'QUERY_STRING'});
$data =~ s/%([0-9a-fA-F][0-9a-fA-F])/chr(hex($1))/ego;
$code =~ s/'/''/g;
$code =~ s/\\/\\\\/g;
#mysqlに接続
$db = DBI->connect('DBI:mysql:database=（データベース名）;host=（ホスト名/IP）','（ユーザーID）','（パスワード）',{ RaiseError => 1, AutoCommit => 0 });
#sql文作成と実行
$sth = $db->prepare("select * from ajaxtest_todoufuken where todoufuken_code = '$code';");
$sth->execute;
#content-type出力 charsetはutf-8
print "Content-type: text/html; charset=utf-8\n\n";
#結果セットの都道府県カラムの値を順に出力
while(@data = $sth->fetchrow_array) {
#DBから取り出したデータをUTF8化
&Jcode::convert(\$data[1],'utf8');
#出力
print "code: $data[0]は、$data[1] です\n";
}
$sth->finish;
$db->disconnect;
最後に、データベースに格納されているデータ（テーブル名：ajaxtest_todoufuken）は、以下のようになっています。ここから、Ajax側で指定する todoufuken_code （このサンプルでは"10"）をもとに、SQL で対応する todoufuken_name （"群馬県"）を取得しています。
| todoufuken_code | todoufuken_name |
|---|---|
| 10 | 群馬県 |
| 11 | 埼玉県 |
いかがでしょうか。もちろんサーバ側は Perl 以外のスクリプトでもかまいません。データベースからデータが取得できるようになれば、アイデア次第でさまざまなことができることになるでしょう。実は私も構想段階ですがwebサービスのアイデアが2つほど（ひとつはNGO関連、ひとつはパレスチナ関連）あるので、今後その実現にむけてネタを仕込んでいきたいと思っています。
このブログ記事に対するトラックバックURL: http://www.ngo-jvc.net/~gt205119/mt/mt-tb-jvcweb.cgi/165/jvcwebtb/XXXXXXXX
※トラックバックスパム対策のため、お手数ですがトラックバックURL末尾のXXXXXXXX 部分を下記画像の数字列に書き換えてからご利用ください。
コメント(0)
コメントする