Webアプリケーションは，クライアントからサーバーに要求を送信し，その結果をブラウザ内に表示するという流れが一般的だ。それに対してAjaxでは，ページの一部だけを差し替えたり，マウスの移動をきっかけにコンテンツを動かせたりする。そうしたメリットがある一方で，標準外の技術を利用するのでWebブラウザの種類に依存してしまう。
Webアプリケーション開発の新手法として注目を集める「Ajax（エイジャックス）」。前編と後編の2回に分けて，Ajaxの基本的な仕組みや特徴，周辺技術などを解説する。前編となる今回は，Ajaxの利点と利用する際の注意点，そして仕組みを理解するために肝となるソースコードの概要を説明する。
JavaScriptが主役
 画面1●Google Mapsの画面 場所を検索したり航空写真を見たりできる地図サービス。Ajaxアプリケーションとして構成されており,地図はマウスでスクロールできる [画像のクリックで拡大表示] |
 図1●従来のWebアプリケーションとAjaxアプリケーションとの違い Ajaxアプリケーションは，WebブラウザではなくJavaScriptがWebサーバーと通信する。送受信されるデータ形式はHTMLではなく，XMLまたはテキスト形式になる [画像のクリックで拡大表示] |
 図2●Ajaxアプリケーションの利点 クライアント・サイドのJavaScriptでページを制御するので，従来のWebブラウザの制限である「ボタンのクリックでしか動作しない」という問題を解決でき，柔軟なユーザー・インタフェースを可能とする [画像のクリックで拡大表示] |
Ajaxとは「Asynchronous JavaScript and XML」の略。特定の仕様やAPIではなく，仕組みの総称である＊1。Ajaxを利用したアプリケーションの例として米Googleが提供する「Google Maps」（画面1[拡大表示]）がある。Google Mapsは地図表示を提供するサービスで，マウスのドラッグによって地図の拡大や縮小，スクロールができる。また，スクロール操作が生じたときには，画像全体を返さずにスクロールされた部分だけを返す。従来の1枚の画像として地図を返すWebアプリケーションよりも動作が軽快である。
こうしたAjaxアプリケーションと従来のWebアプリケーションの大きな違いは，Ajaxでは通信を指示するのがユーザーではないという点だ（図1[拡大表示]）。Webアプリケーションでは，ユーザーが入力フォームの送信ボタンをクリックした場合などに，WebブラウザからWebサーバーに要求を送信する。この要求に対して，Webサーバーから処理結果がHTMLページで返される。返されたHTMLページはWebブラウザによってレンダリングされ，それをユーザーが見るという流れになる。
それに対してAjaxアプリケーションでは，Webサーバーに要求を出すのはユーザーではなく，クライアント・サイドで実行されるJavaScriptである。Ajaxアプリケーションでは，ユーザーがマウスを動かすなど何らかの操作をしたときに，JavaScriptのプログラムが動くように実装する。
JavaScriptのプログラムはWebサーバーに要求を送信し，Webサーバーは何らかの処理をしてその結果を返す。このとき返されるのは，HTML形式ではなくXML形式やテキスト形式のデータである。JavaScriptはその結果をWebブラウザにフィードバックする。具体的には，ページの一部を書き換えたりメッセージボックスを表示したりといった処理をする。
Ajaxのサーバー側のアプリケーションは，HTMLページではなく断片的な任意のデータを返すので，これはWebサービスと言える。Ajaxアプリケーションとは，「JavaScriptが，Webサーバーに置かれたWebサービスを呼び出してデータを得て，それを加工してユーザーにフィードバックするもの」と考えると分かりやすい。
●利点 ユーザーを待たせない
Ajaxアプリケーションが注目される理由は，Webユーザー・インタフェースの操作性を大きく向上できるからだ。主に四つのポイントがあるので，順に見ていこう（図2[拡大表示]）。
(1)マウスの移動でイベント発生
Webアプリケーションでは送信ボタンなどをクリックしないとプログラムは動作しないが，Ajaxではボタンのクリックだけでなく，マウスの移動やキーボード操作，タイマーなどをきっかけにイベントが発生してプログラムが動作する。これにより，工夫次第で操作性を向上させられる。
(2)ページの一部要素を書き換えられる
Ajaxではページの部分的な変更が可能である。Webサーバーからの結果をページ内の任意の場所に挿入したり，要素の位置を動かしたりできる。その際，「DOM（Document Object Model）」という技術を用いる。
例えば
(3)非同期通信でユーザーを待たせない
AjaxではWebサーバーに要求を送信すると，直ちに制御を戻して後続のコマンドを実行する。要求に対する応答があると，あらかじめ指定しておいたイベントが発生し，そのイベントに対する処理を実行する。すなわち非同期に通信する。そのためユーザーは，Webサーバーの要求が終わるまで待たされない。重い処理をサーバーで実行している場合は，処理中のメッセージを表示したり進捗状況を出力したりすることもできる。
また同時に複数のWebサーバー側のプログラムを呼び出すこともできるので，Webサーバー側での並列的な処理も可能だ。
(4)クライアントとサーバーで処理を分散できる
Ajaxアプリケーションは，クライアントとサーバーの両方にプログラムがあるので処理の分担ができる。従来のWebアプリケーションではサーバー・サイドでHTMLページを作成するので，例えば巨大な表を作る場合などには，サーバーから戻ってくるHTMLページのサイズが大きくなり，送受信にかかる時間が長くなったり，帯域を圧迫したりするという問題があった。
それに対してAjaxでは，クライアント・サイドでHTMLページを作成できる。JavaScriptがサーバーに要求する際にデータ範囲を指定し，サーバー側ではその範囲の数値データだけを返すことが可能である。表形式へのレンダリングはクライアントのJavaScriptで実行する。これにより，ページ全体を書き換える従来のWebアプリケーションよりもパフォーマンスの向上が期待できる。●注意点 制限多く作成の難易度は高い
ここまで見てきたようにAjaxには多くのメリットがあるが，AjaxアプリケーションはWebブラウザの種類に依存し，どのWebブラウザでも動作できるようにするのはほぼ不可能と考えられている。また，Webブラウザを限定したとしても，アプリケーションを作成する際には注意すべき点がある。
Webブラウザの実装に依存する機能を使う
Ajaxアプリケーションはクライアント・サイドで実行されるJavaScriptを用いるので，WebブラウザがJavaScriptをサポートしていなかったり，ユーザーが明示的にJavaScriptの設定をオフにしていたりする環境では動作しない。動かないのはやむを得ないとしても，それ以上に厄介な問題がある。それはWebブラウザによってJavaScriptの仕様が微妙に異なるという点だ。
Webブラウザに実装されている最近のJavaScriptは，標準化されたECMAScriptに準拠するものがほとんどで，言語仕様自体の差は小さい。しかし，JavaScriptのプログラムから利用可能なオブジェクトの機能は，Webブラウザに大きく依存する。それゆえAjaxアプリケーションを構築する際は，Webブラウザを判定して処理を分岐するコードが必須となる。デバッグ時にも，Internet Explorer（IE），Firefox，Opera，Safariなどの各種Webブラウザでの動作チェックが必要となる。だが，この作業は困難を極める。
どのWebブラウザでも動作するような汎用的なコードを記述するのが望ましいが，現実には不可能と考えた方がよい。そこで代表的なWebブラウザで動作チェックし，それ以外は動くか動かないか分からないというスタンスで構築するしかない。逆に言えば，どんなWebブラウザでも動くようにしたいという要求がある場合，Ajaxアプリケーションは不適切である。
文字化けを回避するためUTF-8を使う
Ajaxアプリケーションを作るときにはいくつかの注意点がある。一つは文字コード。Ajaxでサーバーからデータを送信する場合には，UTF-8で記述する。そうしないと一部のWebブラウザで文字化けが発生する。またテキスト形式で結果を返す場合＊3には，アスキー文字以外が文字化けするWebブラウザもあるため，URLエンコードしてやり取りするのが安心だ＊4。
ちなみにAjaxでは，WebページをHTML準拠ではなく，XHTML準拠で記述することが多い。これは，JavaScriptでページを操作するときに，タグの開始と終了がきちんとしているXHTMLのほうが操作しやすいという理由からである。
もう一つ注意したいのは，クライアント・サイドのキャッシュだ。JavaScriptでページ内の要素を部分的に制御するので，キャッシュが使われると表示内容が切り替わらないなどのトラブルが生じる。サーバーからデータを返信する際，キャッシュが効かないようにするのが望ましい＊5。
