Ajaxで変わる“新”ユーザー体験：Web2.0で変わるWebプログラミングの常識（3/3 ページ）

[大澤文孝，ITmedia]

　もちろん、受信したデータをどのように扱うのかは、アプリケーション次第となる。DOMを使って差し込むのではなく、alertメソッドを使ってメッセージを出力しても構わない。

　また受信したデータをJavaScriptで処理し、コンテンツの色を変える、またはコンテンツを部分的に動かすといった処理も考えられる。

　例えば、Ajaxを用いた「Googleサジェスト」では、キーが押された時イベントをフックし、JavaScriptを使って「その文字から始まる検索語句候補」を、XMLHttpRequestオブジェクトでサーバへと問い合わせている。そして、その結果をリストボックスに埋め込むことで、ユーザーに候補が表示されるという仕組みを実現しているのだ。

Ajaxのメリットとデメリット

　Ajaxの主なメリットは2つある。

1. 入力フォーム以外のユーザーインタフェースの提供

　JavaScriptは、キーの押下、マウス操作、タイマーなどのイベントを使って駆動できる。

　従来、ユーザーがWebアプリケーションで何か操作するときには、HTMLの入力フォーム（formタグ要素）が必須であったが、Ajaxの場合には、入力フォーム以外のユーザーインタフェースが提供できるようになる。

2. データの差分を送信できる

　図1に示したように、Ajaxアプリケーションではページ全体を転送するのではなく、部分的に差し替えるという動作になる。

　つまりXMLHttpRequestオブジェクトで送受信するデータは、必要に応じた差分だけでよい。必要なデータだけを転送するようにすれば、データの送受信量を減らすことができ、パフォーマンスの向上が期待できる。

　例えば、マウスでスクロールして地図を動かせるAjaxアプリケーションである「Googleマップ」では、スクロールで見えるようになった部分的なデータだけを送受信しており、ページ全体を書き換えていない。

　一方でAjaxのデメリットもある。それはJavaScriptが駆使されるために、ソースコードが複雑になるという点だ。コードが複雑になれば、当然、デバッグの作業も複雑になることを意味する。特に、JavaScriptはクライアントサイドのWebブラウザ上で動くため、さまざまなWebブラウザで正しく動作するかといった検証作業も必要なことを忘れてはならない。

　またクライアントサイドでプログラムが実行されるということは、ソースコードをユーザーから自由に見ることができることも意味する。

　これはソースコードにパスワードなど重要な要素を含ませてはならないということであるが、それ以外にも、改悪されるという可能性も考え、サーバ側に置くCGIは、不正なデータが要求されたときにはエラーとして排除する実装が不可欠なことを意味する。

Ajaxプログラミングの基本

　論理的なことはこの程度にして、次回は実際にAjaxプログラムに踏み込んでいこう。どうすれば組み込めるのか？　をポイントとして、実際にサンプルアプリケーションを作り上げて説明していく。