Ajax活用の5つのポイント解説します

谷口允（エイチツーオー・スペース）

2007/12/14 16:13

本連載では「Ajax活用の5つのポイント」として、4回にわたってポイントを紹介していこう。

　「Ajax」がWebサイトに新しい表現と機能を提供した、画期的な技術であることは誰もが認めるだろう。2007年も、Ajaxは進化を続け、GoogleドキュメントやYouOSなどに代表されるように、アプリーションソフトやOSをWebブラウザ上で動作するプロダクトまで登場した。

　しかし、Web制作者にとって、Ajaxは実際の現場でどのように使ったらよいのか、どこが使いどころなのかといったことが掴めないでいるかもしれない。そこで、本連載では「Ajax活用の5つのポイント」として、4回にわたって各ポイントを紹介していこう。

　なお、本連載では実際の Ajax活用事例として、ベネッセコーポレーション進研ゼミ高校講座の「クチコミ満載！　先輩の大学合格体験記」というコンテンツのご協力をいただいた。ここにお礼を申し上げたい。

クチコミ満載！　先輩の大学合格体験記
提供：ベネッセコーポレーション進研ゼミ高校講座

POINT1：無駄なリロードするべからず

　Ajaxはご存じの通り「非同期通信（Asyncronous）」というのが最大の特徴である。非同期とはつまり、一方がなにかを操作しているときに、裏で動作させることができるということだ。トランシーバー（同期）と電話（非同期）を想像していただければ分かりやすい。同時に作業ができるので、非常にスピーディーに動作することができるということだ。

　Ajaxを使うとき、最もターゲットとなるのは「同じようなページを再度表示する」という場面だ。例えば、検索のためにキーワードを入れて、ボタンをクリックすると候補が表示されるという場面。画面が一度真っ白になると、利用者はそれだけでストレスを感じてしまうだろう。そこで、Ajaxを利用して、その場で結果を表示するのである。

　次のWebサイトをご覧いただきたい。 http://www.zemi.ne.jp/gokaku/

　画面右側の「大学名で探す」という欄に適当なキーワードを記入して［検索］ボタンをクリックすると、候補がその場で表示される（下図）。検索時のストレスが少なく、再検索も容易であることが分かるだろう。

　実現の仕方も、1から手で作る方法から、各種ライブラリを使う方法まである。例えば、最も利用されているライブラリ「Prototype.js」で実現するとしたらこうなる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Prototype.jsを利用した画面更新</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
window.onload = function() {
    $('btnUpdate').onclick = function() {
        var ajax = new Ajax.Updater(
            'areaDisplay',
            'update.html',
            { method: 'get'}
            );
    }
}
</script>
</head>

<body>
<div><input id="btnUpdate" type="button" value="ページを更新する" /></div>
<p id="areaDisplay"></p>
</body>
</html>

　これで、別途準備した「update.html」というファイルを、ボタンをクリックするタイミングで読み込んで、画面上に表示することができるようになる。もちろん、呼び出されるファイルはCGIなどでも構わない。DBなどと連携して制作した結果を取得することもできるため、これによって検索結果などを表示することができるというわけだ。

　また、あらかじめ作られたページを読み込むのではなく、必要なデータだけを取得してJavaScriptで処理を行う方法もある。この場合、よくデータの受け渡しに使われているのが「XML」というデータ形式だ。例えば、次のようなものがある。