はじめに
Web 2.0以前のWebアプリケーションでは、Webサイトのボタンを押下すると、すべての処理が終了して新たにページがリフレッシュされるまで操作ができないことが常識でした。しかし、AJAXの登場により、Web 2.0ではインタラクティブな（対話型の）アプリケーションが現れ、従来のWebアプリケーションより操作性の良いアプリケーションの構築が可能となりました。
前編である本記事では、リッチクライアント分野で世界トップのコンポーネントスイート「NetAdvantage」を開発し、同業界で20年近く世界的リーディングカンパニーであり続けるインフラジスティックスが、昨今のリッチクライアント市場において爆発的影響力を生み出し、Web 2.0やRIAの火付け役ともなった「AJAX」とその周辺技術「ASP.NET AJAX」を紹介します。「ASP.NET AJAX」についての詳細は後編で触れます。
対象読者
本記事は、次のような方を対象としております。
- HTTP、HTML、JavaScriptを使用した開発を行ったことがある方
- AJAXについて興味がある方
AJAXの概要
AJAXはWebアプリケーションのユーザーエクスペリエンスを向上させ、よりインタラクティブなアプリケーションを構築するために不可欠な技術です。既存の技術の組み合わせではありますが、使用方法を一つ間違うと、まったく使えないアプリケーションになる危険性があります。
AJAXとは
AJAX（Asynchronous JavaScript And XML）とは、2005年2月18日にJesse James Garrent氏によって名付けられた非同期通信を行うためのユーザーインターフェイス構築技術です。このAJAXとは新しいテクノロジーではなく、既存の技術を集めて名付けられたものに過ぎません。
その証拠に、1997年にGoogle社によって既に使用されていましたし、インフラジスティックスにおいてもAJAXという名前が生まれる以前から製品（NetAdvantageなど）にAJAX技術を組み込んでおりました。他社製品でも同様で、AJAXと名付けられた際に機能を変えず「AJAX対応」としただけで爆発的に売れた経緯があります。
AJAXの長所と短所
従来のWebアプリケーションと比較した、AJAXの長所と短所は次のとおりです。
- 長所
- 必要とするデータのみ送受信
- 更新が必要なページの一部分のみ更新
- 非同期通信のため、ページが更新される間もユーザーの作業を止めずにデータ取得が可能
- 短所
- クロスブラウザ（ブラウザ互換性）の問題
- 最新のブラウザ機能が必要（クライアント側XMLパーサー、DOMなど）
標準的なWebクライアント/サーバ処理モデル
今まで標準であったWebアプリケーションのモデルは、ボタン処理などでポストバックが発生すると、HTTPリクエストがサーバに発行され、サーバからはHTTPレスポンスとしてHTMLページ全体が返ってくる形でした（図1）。
このモデルには次のような問題点がありました。
- データの大小に関わらず、ページ全体のサーバへの往復が必要
- 内容が変更されていなくても、全UIが更新されるため、負荷が増大
- ページがポストバックから戻るまでの間、ユーザーの作業が停止
AJAXを使用したクライアント/サーバ処理モデル
同期通信によってページ全体の更新を行う標準的なモデルに対して、AJAXを使用したモデルでは、非同期に通信を行い、必要なデータのみを返す形になります（図2）。
AJAXを使用したモデルは、標準的なモデルの問題点を解消する手法として注目を浴びていますが、あらゆる場合に必ずしも有効なわけではないため、Webアプリケーションの一つのモデルとして、ケースバイケースで使い分けを行うことが最良の選択と言えるでしょう。そのため、ここでは敢えてこのモデルの問題点も挙げてみたいと思います。
- Webプログラム言語以外にJavaScriptの使用が必要
- Webサービスと直接連携は不可――JavaScriptにはWebサービス用の関数が用意されていない
- 非同期通信は定期的に通信を行うため、AJAXを使用する領域のデータ量とネットワーク回線領域を考慮しないと、パフォーマンスが大幅に低下
AJAXアプリケーションの作成
AJAXアプリケーションを作成するにはHTTPRequestではなく、XMLHTTPRequestを使用する必要があります。そのため、通信に必要なXMLパーサーのインスタンスの作成は次のようになります。
// Works in Mozilla (Firefox) and Safari var oXml = new XMLHttpRequest(); // Works in Internet Explorer var oXml = new ActiveXObject ("Microsoft.XMLHTTP");
インスタンス生成後、サーバに新しいHTTPリクエストを作成するためのXMLオブジェクトの使用方法は次のようになります。
oXml.Open ("GET", "Endpoint.aspx", true);
クライアント側にコールバックメソッドを割り当てるためには、XMLオブジェクトのonreadystatechangeプロパティを使用してください。
後は、これらにクライアント側/サーバ側の両方の処理を記載するだけでAJAXアプリケーションを作成することができます。
