Webアプリケーションは,クライアントからサーバーに要求を送信し,その結果をブラウザ内に表示するという流れが一般的だ。それに対してAjaxでは,ページの一部だけを差し替えたり,マウスの移動をきっかけにコンテンツを動かせたりする。そうしたメリットがある一方で,標準外の技術を利用するのでWebブラウザの種類に依存してしまう。

 Webアプリケーション開発の新手法として注目を集める「Ajax(エイジャックス)」。Part1とPart2の2回に分けて,Ajaxの基本的な仕組みや特徴,周辺技術などを解説する。Part1では,Ajaxの利点と利用する際の注意点,そして仕組みを理解するために肝となるソースコードの概要を説明する。

JavaScriptが主役

 Ajaxとは「Asynchronous JavaScript and XML」の略。特定の仕様やAPIではなく,仕組みの総称である。Ajaxを利用したアプリケーションの例として米Googleが提供する「Google Maps」(画面1)がある。Google Mapsは地図表示を提供するサービスで,マウスのドラッグによって地図の拡大や縮小,スクロールができる。また,スクロール操作が生じたときには,画像全体を返さずにスクロールされた部分だけを返す。従来の1枚の画像として地図を返すWebアプリケーションよりも動作が軽快である。

画面1●Google Mapsの画面<br>場所を検索したり航空写真を見たりできる地図サービス。Ajaxアプリケーションとして構成されており,地図はマウスでスクロールできる
画面1●Google Mapsの画面
場所を検索したり航空写真を見たりできる地図サービス。Ajaxアプリケーションとして構成されており,地図はマウスでスクロールできる
[画像のクリックで拡大表示]

 こうしたAjaxアプリケーションと従来のWebアプリケーションの大きな違いは,Ajaxでは通信を指示するのがユーザーではないという点だ(図1)。Webアプリケーションでは,ユーザーが入力フォームの送信ボタンをクリックした場合などに,WebブラウザからWebサーバーに要求を送信する。この要求に対して,Webサーバーから処理結果がHTMLページで返される。返されたHTMLページはWebブラウザによってレンダリングされ,それをユーザーが見るという流れになる。

図1●従来のWebアプリケーションとAjaxアプリケーションとの違い<br>Ajaxアプリケーションは,WebブラウザではなくJavaScriptがWebサーバーと通信する。送受信されるデータ形式はHTMLではなく,XMLまたはテキスト形式になる
図1●従来のWebアプリケーションとAjaxアプリケーションとの違い
Ajaxアプリケーションは,WebブラウザではなくJavaScriptがWebサーバーと通信する。送受信されるデータ形式はHTMLではなく,XMLまたはテキスト形式になる
[画像のクリックで拡大表示]

 それに対してAjaxアプリケーションでは,Webサーバーに要求を出すのはユーザーではなく,クライアント・サイドで実行されるJavaScriptである。Ajaxアプリケーションでは,ユーザーがマウスを動かすなど何らかの操作をしたときに,JavaScriptのプログラムが動くように実装する。

 JavaScriptのプログラムはWebサーバーに要求を送信し,Webサーバーは何らかの処理をしてその結果を返す。このとき返されるのは,HTML形式ではなくXML形式やテキスト形式のデータである。JavaScriptはその結果をWebブラウザにフィードバックする。具体的には,ページの一部を書き換えたりメッセージボックスを表示したりといった処理をする。

 Ajaxのサーバー側のアプリケーションは,HTMLページではなく断片的な任意のデータを返すので,これはWebサービスと言える。Ajaxアプリケーションとは,「JavaScriptが,Webサーバーに置かれたWebサービスを呼び出してデータを得て,それを加工してユーザーにフィードバックするもの」と考えると分かりやすい。