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

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

図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サービスを呼び出してデータを得て,それを加工してユーザーにフィードバックするもの」と考えると分かりやすい。

この先は会員の登録が必要です。有料会員(月額プラン)は登録月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら