5 年前、開発者が XML を知らなかったとしたら、それは誰も話しかけてくれない醜いアヒルの子でした。Ruby に注目が集まった 18 ヶ月前、Ruby で何が起こっているかを知らない開発者は、井戸端会議の除け者となっていました。目下、最新技術の流行に加わりたかったら、目指す目標は Ajax にあります。

しかし、Ajax は単なる流行ではありません。Ajax は Web サイトの構築に威力を発揮する手法でありながらも、新しい言語を学ぶような難しさはまったくありません。

Ajax が何であるかを探る前に、Ajax が果たす役割について簡単に説明しておきます。現在、アプリケーションを作成するときの基本的な選択肢には以下の 2 つがあります。

• デスクトップ・アプリケーション
• Web アプリケーション

いずれもお馴染みのアプリケーションです。デスクトップ・アプリケーションは通常 CD で提供されて (または、Web サイトからダウンロードする場合もあります)、まるごとコンピューターにインストールされます。インターネットを使用して更新をダウンロードすることもありますが、デスクトップ・アプリケーションを実行するコードはデスクトップ上に常駐します。その一方、Web アプリケーションは (当然のことですが) どこか別の場所にある Web サーバー上で実行され、ユーザーは Web ブラウザーを使用してアプリケーションにアクセスします。

しかしアプリケーションのコードがどこで実行されるかよりも重要なことは、アプリケーションの振る舞い、そしてアプリケーションと対話する手段です。一般に、デスクトップ・アプリケーションはかなり高速な動作をし (目の前のコンピューター上で動作することから、インターネット接続で待たされることがありません)、優れたユーザー・インターフェースを持ち (通常、ユーザー・インターフェースはオペレーティング・システムとやりとりを行います)、そして驚くほど動的です。マウスのクリックやポイント、入力、メニューとサブメニューの表示、巡回などの操作をほとんど即時に実行することができます。

一方、Web アプリケーションは一般に常に最新状態を維持し、デスクトップでは得られないようなサービスを提供します (Amazon.com や eBay を考えてみてください)。しかし Web が威力を発揮するには待ち時間が伴います。例えば、サーバーが応答するまでの待ち時間、画面が更新されるまでの待ち時間、要求に対する応答が返ってきて新しいページを生成するまでの待ち時間です。

この説明がかなり単純化し過ぎたものであることは確かですが、基本的な概念は伝わるはずです。すでにお察しのとおり、Ajax はデスクトップ・アプリケーションと、常時更新された状態の Web アプリケーションとの機能および対話性の溝を埋めることを目的とした手法です。この手法によって、デスクトップ・アプリケーションに備わっているような動的なユーザー・インターフェースや趣向を凝らしたコントロールを Web アプリケーションで使用できるようになります。

その役割がわかったところで、ここからは早速、Ajax で魅力のない Web インターフェースを応答性に優れた Ajax アプリケーションに変える方法について見て行きましょう。

昔ながらの技術、そして新しい工夫

Ajax について調べるとなると、実は Ajax には多数の技術が関わっているため、その詳細を理解するには何種類かの技術を掘り下げなければなりません (このことから、連載の初めの数回では、それぞれの技術ごとに分けて説明することにします)。幸い皆さんは、Ajax で使用されている技術の多くについてはそこそこの知識を持っているはずです。さらに嬉しいことに、これらの技術のほとんどは簡単に習得することができます。少なくとも、Java や Ruby などのプログラミング言語全体を学ぶほど難しくはありません。

Ajax アプリケーションでは、以下の基礎技術が使用されます。

• HTML。Web フォームを作成するために使用され、アプリケーションの残りの部分で使用するフィールドを識別するためにも使用されます。
• JavaScript。JavaScript コードが Ajax アプリケーションの中核となるコードであるため、サーバー・アプリケーションとの通信が容易になります。
• DHTML (Dynamic HTML)。フォームを動的に更新できるようにします。div、span やその他の動的な HTML 要素を使用して、HTML のマークアップを行います。
• DOM (Document Object Model)。サーバーから返された HTML および (場合によっては) XML の構造を処理するために (JavaScript コードで) 使用します。

以上の 4 つそれぞれがどのようなことをする技術なのかをよく理解できるように、今後の記事では技術ごとにその詳細を探っていきますが、今回はこれらのコンポーネントと技術を全体的に理解することに重点を置きます。Ajax コードについての理解が深まれば深まるほど、これらの技術に関して漠然と理解している段階から、それぞれの技術を使いこなせる段階に進みやすくなります (そしてまさに、Web アプリケーション開発の扉を開け放つことになります)。

XMLHttpRequest オブジェクト

最初に理解しなければならないオブジェクトは、皆さんにとっておそらく最も目新しいものだと思いますが、それは XMLHttpRequest です。これは JavaScript オブジェクトの 1 つであり、リスト 1 に示すように簡単に作成することができます。

<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>

このオブジェクトについては次回の記事で詳しく説明することにして、とりあえず認識しておかなければならないことは、これがサーバーとの通信すべてを処理するオブジェクトであるということです。先に進む前に、ちょっと考えてみてください。XMLHttpRequest オブジェクトを介してサーバーとやりとりする際に使われるのは、JavaScript 技術です。これは標準的なアプリケーション・フローではありませんが、これこそが、Ajax がその魔法のほとんどの拠り所とする点です。

標準的な Web アプリケーションでは、ユーザーがフォームのフィールドに入力して送信ボタンをクリックすると、フォームがまるごとサーバーに送信されます。サーバーは処理をスクリプト (通常は PHP または Java、あるいは CGI プロセスなどの場合もあります) に回し、スクリプトが処理を完了すると、サーバーはまったく新しいページを返します。返されるページは、新しいフォームにデータが入力された HTML であることもあれば、確認のページであったり、元のフォームに入力されたデータに基づいて特定のオプションが選択されたページであったりすることもあります。当然のことながら、サーバー上のスクリプトまたはプログラムが処理を行って新しいフォームを返すまで、ユーザーは待機しなければなりません。ユーザーの画面はいったん真っ白になり、サーバーからデータが返されるにつれて再描画されます。ここが、対話性の低さによる影響が出てくるところです。すぐにフィードバックが返ってこないことから、ユーザーにはデスクトップ・アプリケーションを操作しているような感覚がまったくありません。

Ajax の場合は基本的に、Web フォームとサーバーとの間に JavaScript 技術と XMLHttpRequest オブジェクトを関与させます。ユーザーがフォームに入力すると、そのデータは直接サーバーに送信されるのではなく、何らかの JavaScript コードに渡されます。そして、フォームのデータを取得した JavaScript コードがサーバーに要求を送信します。その間、ユーザーの画面上のフォームは点滅することもなければ、消えることも、動作が遅くなることもありません。要するに、JavaScript コードは裏で要求を送信するため、ユーザーは要求の送信が行われていることさえ気付かないというわけです。それに加え、要求は非同期で送信されます。つまり、JavaScript コード (そしてユーザー) はサーバーからの応答を待ちません。そのためユーザーはそのままデータの入力やスクロール操作を行って、アプリケーションを使用し続けることができます。

サーバーからデータが返されると、(引き続き Web フォームの代役を務める) JavaScript コードはそのデータを使って実行する内容を決定します。JavaScript コードはフィールドを即座に更新できるため、ユーザーはフォームを送信したり、表示を更新したりすることなく新しいデータを取得するなかで、アプリケーションを直接操作している感覚を味わいます。さらに、JavaScript コードがデータを取得して何らかの計算を行い、別の要求を送信する場合でも、ユーザーの介入は必要ありません。これが、XMLHttpRequest の威力です。このオブジェクトは必要に応じてすべてのやりとりをサーバーと行えるため、ユーザーは実際に何が行われているか気付きもしません。このように、デスクトップ・アプリケーションのように動的で応答性に優れた極めてインタラクティブなユーザー・エクスペリエンスが、背後にあるインターネットの力だけで実現します。

JavaScript についての補足

XMLHttpRequest を理解すれば、JavaScript コードの残りの部分はごくありふれた内容であることがわかります。実際、JavaScript コードは以下のほんの少数の基本的な処理にしか使用しません。

• フォームからのデータの取得: JavaScript コードを使用すれば簡単に HTML フォームからデータを抽出してサーバーに送信することができます。
• フォーム上の値の変更: フィールド値の設定から、その場での画像の置き換えに至るまで、フォームを更新するのも簡単です。
• HTML および XML の構文解析: DOM を操作する場合や (次のセクションを参照)、サーバーから返された HTML フォームや XML データの構造を扱う場合に JavaScript コードを使用します。

上記の最初の 2 つの項目については、getElementById() メソッドの使い方に十分慣れる必要があります (リスト 2 を参照)。

// Get the value of the "phone" field and stuff it in a variable called phone
var phone = document.getElementById("phone").value;

// Set some values on a form using an array called response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];

上記には特に注目すべき点がありません。そして、それがまさに利点です。そろそろ実感が湧いてきたと思いますが、ものすごく複雑なことは何もありません。XMLHttpRequest をマスターしてしまえば、Ajax アプリケーションの残りのほとんどは、リスト 2 のような単純な JavaScript コードを多少気の利いた HTML と組み合わせて使うだけです。そして時折は多少の DOM 作業を行うことになるので、続いて DOM に目を向けてみましょう。

締めくくりは DOM

最後に取り上げる DOM (Document Object Model) も重要な技術です。読者のなかには、DOM と聞くと気後れする方もいるでしょう。高度なプログラミング・タスクに興味を持っているのでない限り、HTML 設計者が DOM を使用することは珍しく、JavaScript コードの作成者にとってはある意味特異な技術でもあります。DOM が盛んに使用されているのは、極めて重要な Java プログラムや C/C++ プログラムです。おそらくこのことから、DOM は難解である、あるいは習得するのが難しいという評判につながっているのだと思います。

幸いなことに、JavaScript 技術で DOM を使用するのは簡単で、ほとんど直観的に使用することができます。ここで通常ならば DOM を使用する方法を説明するか、そうでなくてもサンプル・コードくらいは記載するところですが、それによって誤解を招くおそれがあります。ここまで DOM を持ち出すことなく、Ajax についてかなり詳しく説明してきましたが、それが、私が示そうとしている道筋です。DOM の話題は今後の記事で取り上げることにして、しばらくは DOM が存在することだけを知っておいてください。JavaScript コードとサーバーとの間で XML をやりとりするために HTML フォームを変更する段階になった時点で、DOM について詳しく探ることになります。現時点では DOM を使用しなくても効果的な Ajax を始められるので、DOM については後回しにしておきます。

上に戻る

Request オブジェクトの取得

基本的な概要がわかったところで、次は具体的な例をいくつか取り上げて検討します。XMLHttpRequest は Ajax アプリケーションの中心であり、おそらく読者の多くにとっては目新しいものだと思うので、まずはこのオブジェクトから始めます。リスト 1 からわかるように、このオブジェクトは作成するのも使用するのも至って簡単です。とは言うものの、それで話が終わるわけではありません。

数年前のあの煩わしいブラウザー戦争を覚えていますか？異なるブラウザーで同じように機能するものは何もなかったあの頃のことです。信じようが信じまいが、規模は遙かに小さくなったものの、あの戦争は今でも続いています。そして驚くべきことに、XMLHttpRequest はこの戦争の犠牲になっているものの 1 つです。そのため XMLHttpRequest オブジェクトを機能させるには、ブラウザーに応じて異なる処理をいくつか行わなければなりません。これから、その手順をステップバイステップで説明します。

Microsoft 製のブラウザーを使用する場合

Microsoft 製のブラウザー、Internet Explorer は、XML の処理に MSXML パーサーを使用しています (MSXML についての詳細は、「参考文献」を参照)。このことから、Internet Explorer で実行する Ajax アプリケーションを作成するときには、特有の方法でオブジェクトを作成しなければなりません。

特有の方法でオブジェクトを作成すると言っても、そうは簡単にいきません。実は、Internet Explorer にインストールされている JavaScript 技術のバージョンによって、2 種類の MSXML バージョンが出回っているからです。このため、そのどちらにも対応するコードを作成しなければなりません。Microsoft 製ブラウザーで XMLHttpRequest を作成するために必要なコードをリスト 3 に記載します。

var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}

上記が一体何を意味しているのか理解できないかもしれませんが、今のところはそれで構いません。JavaScript プログラミング、エラー処理、条件コンパイルなどについては連載が終わるまでに詳しく説明するとして、現段階で理解する必要があるのは、中心となる以下の 2 つの行です。

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

および

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");.

簡単に言うと、このコードは MSXML の一方のバージョンを使用してオブジェクトの作成を試み、それが失敗すると、もう一方のバージョンでオブジェクトを作成します。賢いと思いませんか？どちらのバージョンでも上手くいかなければ、xmlHttp 変数が false に設定されて、何らかの問題があることがコードに通知されます。その場合、使用しているブラウザーはおそらく Microsoft 製のものではないため、別のコードを使ってオブジェクトを作成する必要があります。

Mozilla をはじめとする Microsoft 製でないブラウザーを扱う場合

Internet Explorer を使用していない場合、または Microsoft 製でないブラウザーを対象としたコードを作成する場合には、上記とは異なるコードが必要になります。実のところ、これはリスト 1 にも記載されている非常に単純な 1 行のコードです。

var xmlHttp = new XMLHttpRequest object;.

この遥かに単純な行は、Mozilla、Firefox、Safari、Opera だけでなく、何らかの形で Ajax をサポートする他の Microsoft 製でないブラウザーのほとんどで XMLHttpRequest オブジェクトを作成します。

仕上げ

ここで鍵となるのは、すべてのブラウザーをサポートすることです。Internet Explorer でしか機能しないアプリケーション、あるいは Microsoft 製でないブラウザーでしか機能しないアプリケーションを作成したいと思う開発者がいるでしょうか。さらには同じアプリケーションを 2 回作成したいと思いますか？もちろん、ご免です！したがって、コードは Internet Explorer と Microsoft 製でないブラウザー両方のサポートを兼ね備えていなければなりません。そのためのコードをリスト 4 に記載します。

/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

とりあえず、コメントと @cc_on のような奇妙なタグは無視してください。これらは特殊な JavaScript コンパイラーのコマンドなので、XMLHttpRequest に焦点を当てる次回の記事で詳しく説明します。このコードの核心部は、次の 3 つのステップに分かれます。

1. 作成する XMLHttpRequest オブジェクトを参照するための変数、xmlHttp を作成します。
2. Microsoft 製ブラウザーのオブジェクトの作成を試みます。
   • Msxml2.XMLHTTP オブジェクトを使ってオブジェクトの作成を試みます。
   • それが失敗した場合は、Microsoft.XMLHTTP オブジェクトを使ってオブジェクトの作成を試みます。
3. それでも xmlHttp がセットアップされない場合は、Microsoft 製でないブラウザーに対応したオブジェクトを作成します。

このプロセスが終わると、xmlHttp はユーザーがどのブラウザーを使用しているかに関わらず、有効な XMLHttpRequest オブジェクトを参照することになります。

セキュリティーについて

セキュリティーについてはどうなっているのでしょうか。現在のブラウザーでは、ユーザーがブラウザーのセキュリティー・レベルを上げることも、JavaScript 技術を無効にすることも、ブラウザーに用意されているオプションを好きなだけ無効にすることもできるようになっています。ユーザーがこれらの設定を行ったとしたら、作成したコードはいかなる環境でも機能しなくなるでしょう。このような状況では、グレースフルに問題に対処しなければなりません。この話題だけでも少なくとも 1 回分の記事に相当するため、今後の記事で改めて取り上げます (この連載はまだ先が長いので心配しないでください。連載を読み終えるまでに、すべてをマスターできるようになるはずです)。現時点では完璧とは言えないまでも、Ajax を理解するにはもってこいの堅牢なコードを作成しています。セキュリティーに関する詳細については、今後の話題とします。

上に戻る

Ajax の世界での要求/応答

ここまでのところで、Ajax の概要、そして XMLHttpRequest オブジェクトの基本概念とその作成方法については理解できたことと思います。注意深く読んでいた方は、サーバー上のあらゆる Web アプリケーションとやりとりするのは、そのアプリケーションに直接送信される HTML フォームではなく、JavaScript 技術であることも理解していることと思います。

これまでの説明に欠けていたのは、実際に XMLHttpRequest を使用する方法です。このコードは、これから作成するすべての Ajax アプリケーションで何らかの形で使用することになる重要なコードなので、これから Ajax での基本的な要求/応答モデルがどのようなものなのかを簡単に説明しておきます。

要求を行う方法

作成したばかりの新しい XMLHttpRequest オブジェクトを、今度は実際に試してみます。まず必要なのは、(ユーザーがテキストを入力したとき、またはメニューから選択したときなどに) Web ページから呼び出すことのできる JavaScript のメソッドです。その後は、ほとんどすべての Ajax アプリケーションで同じ基本方針に従うことになります。

1. Web フォームから必要なデータを取得します。
2. 接続先の URL を構成します。
3. サーバーへの接続を開きます。
4. サーバーが処理の完了時に実行する関数をセットアップします。
5. 要求を送信します。

リスト 5 は、まさに上記の内容をこの順番で実行する Ajax メソッドの例です。

function callServer() {
  // Get the city and state from the web form
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // Only go on if there are values for both fields
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;

  // Build the URL to connect to
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

  // Open a connection to the server
  xmlHttp.open("GET", url, true);

  // Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = updatePage;

  // Send the request
  xmlHttp.send(null);
}

上記の大部分は読んでわかるとおりの内容です。コードの最初の部分では、基本的な JavaScript コードを使用していくつかのフォーム・フィールドの値を取得します。このコードは続いて PHP スクリプトを接続先としてセットアップします。スクリプトの URL を指定してから、単純な GET パラメーターを使用して (フォームから取得した) 市 (city) と州 (state) を URL に追加する方法に注目してください。

次に、接続を開きます。XMLHttpRequest が再び活躍を開始するのはここからです。このオブジェクトによって接続の方法 (GET) と接続先の URL が指定され、最後の true に設定されたパラメーターが非同期接続を要求します (これによって、Ajax 要求となります)。false が設定されている場合には、コードは要求を行うとサーバーでの処理が完了するのを待つため、応答が受信されるまで後続の処理を続けることはありません。このパラメーターを true に設定することによって、サーバーがバックグラウンドで要求を処理している間、ユーザーはフォームをそのまま使用し続けられるようになります (さらに、他の JavaScript メソッドを呼び出すことも可能です)。

xmlHttp (前に作成した XMLHttpRequest オブジェクトのインスタンスです) の onreadystatechange プロパティーを利用すると、サーバーに対して、要求の処理 (5 分かかることもあれば、5 時間かかる場合もあります) を完了した時点でサーバーが実行する内容を指定することができます。リスト 5 のコードはサーバーでの処理が完了するのを待たないので、サーバーでの処理が完了した時点でそれに応答できるように、サーバーには処理完了時に実行すべき内容を指示しなければなりません。この例では、サーバーが要求の処理を完了すると、updatePage() という特定のメソッドがトリガーされます。

最後に呼び出されるのは、null 値を設定した send() です。サーバーに送信するデータ (市 (city) と州 (state)) は、すでに要求 URL に追加してあるため、要求に含めて送信しなければならないものは何もありません。この呼び出しによって要求が送信され、サーバーは指定された処理を実行することができます。

上記の内容に別段変ったところがないと思うのならば、それは Ajax がいかにわかりやすく単純であるかということです。Ajax が持つ非同期という性質さえ頭に入れておけば、Ajax は比較的簡単な手法です。Ajax によって、複雑な HTTP 要求/応答コードを作成する代わりに、優れたアプリケーションとインターフェースの開発に専念できるので、ありがたいと思うはずです。

リスト 5 のコードは、この上なく簡単です。データはシンプル・テキストなので、要求 URL の一部として組み込むことができます。要求を送信するのは、複雑な POST ではなく GET です。追加する XML やコンテンツ・ヘッダーもなければ、要求の本体に組み込んで送信するデータもありません。これがいわゆる、Ajax のユートピアです。

心配には及びません。連載が進むにつれて事態はより複雑になっていきますが、POST 要求を送信する方法、要求ヘッダーとコンテンツ・タイプを設定する方法、メッセージに XML をエンコードする方法、要求にセキュリティーを追加する方法など (内容を挙げればかなり長いリストになります) については、これから学んでいきます。今は難しいことは考えずに、基本に専念してください。そのうち、Ajax ツール一式を確立することになります。

応答を処理する方法

いよいよ、サーバーの応答を実際に処理する段階に来ましたが、この時点で知っておかなければならないことは次の 2 つの点だけです。

• xmlHttp.readyState プロパティーが 4 になるまで何もしないこと。
• サーバーは、応答を xmlHttp.responseText プロパティーに入れること。

上記で最初に挙げた点 (Ready 状態) は、次回の記事の大半を占めることになります。実際、今まで皆さんが知りたかった以上に詳しく HTTP 要求の各段階について知ることになるはずです。ここでは特定の値 (4) であるかどうかを調べるだけで事は運びます (次回の記事を楽しみにしていてください)。2 つ目の点、つまり xmlHttp.responseText プロパティーを使ってサーバーの応答を取得するのは簡単です。リスト 6 に、サーバーがリスト 5 で送信された値に応じて呼び出すことのできるメソッドの例を記載します。

function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}

上記のコードも、それほど難しいことも複雑なこともありません。このコードは、適切な Ready 状態になってサーバーがこの関数を呼び出すまで待機し、サーバーから返された値 (この例では、ユーザーが入力した市 (city) と州 (state) に該当する郵便番号 (zipCode)) を使用して別のフォーム・フィールドの値を設定します。その結果、ユーザーがボタンをクリックしていないにも関わらず、zipCode フィールドに突如、郵便番号が現れます。これが、前に述べたデスクトップ・アプリケーションの感覚です。応答性、動的な感覚、そして他にもさまざまなことが、わずかな Ajax コードで実現します。

観察力の鋭い読者は、zipCode フィールドが通常のテキスト・フィールドであることにお気付きのはずです。サーバーが郵便番号を返し、updatePage() メソッドがこのフィールドの値をその市 (city) と州 (state) の郵便番号 (zipCode) で設定した後は、ユーザーがこの値を変更することができます。この値は、2 つの理由から故意にユーザーが変更できるようにしています。1 つは、この例の内容が複雑にならないようにするため、そしてもう 1 つは、場合によってはサーバーから返された内容をユーザーが変更できるようにする必要があることを示すためです。この 2 つの点は、どちらも優れたユーザー・インターフェースを設計する上では重要な点なので覚えておいてください。

上に戻る

Web フォームでの関連付け

残っている作業は何かと言えば、実はそれほどありません。JavaScript メソッドが、ユーザーがフォームに入力した情報を取得してサーバーに送信し、応答をリッスンして処理するための別の JavaScript メソッドを提供し、さらには応答が返ってくるとフィールドの値まで設定してくれます。あとは、最初の JavaScript メソッドを呼び出してプロセス全体を開始するだけです。そのためには当然、HTML フォームにボタンを追加するという方法が考えられますが、それではあまりにも 2001年的だと思いませんか？そこで、リスト 7 のように JavaScript 技術を利用します。

<form>
 <p>City: <input type="text" name="city" id="city" size="25" 
onChange="callServer();" /></p>
 <p>State: <input type="text" name="state" id="state" size="25" 
onChange="callServer();" /></p>
 <p>Zip Code: <input type="text" name="zipCode" id="zipCode" size="5" /></p>
</form>

上記のコードがかなり型どおりのコードであるという印象を持ったとしたら、その印象の通り、まさにありきたりのコードです。ユーザーが city または state フィールドのいずれかに新しい値を入力すると、callServer() メソッドが呼び出されます。そこからは、Ajax ならではの楽しい部分の始まりです。事態を把握したように思えてきましたか？それなら順調な滑り出しです。

上に戻る

まとめ

この時点で初めての Ajax アプリケーションの作成に取り掛かるのは時期尚早でしょう。少なくとも、「参考文献」セクションを本格的に調べることを厭わないのでない限り、その段階ではありません。けれども、Ajax アプリケーションの機能についての基本概念、そして XMLHttpRequest オブジェクトの基礎知識は身に付いているはずです。今後の記事では、このオブジェクトをマスターし、JavaScript とサーバー間の通信に対処する方法、HTML フォームを扱う方法、さらには DOM を扱う方法を学んでいきます。

しかし今の時点では、Ajax アプリケーションがいかに強力なアプリケーションになり得るかに想像をめぐらせてください。Web フォームが、ボタンをクリックしたときだけでなくフィールドへの入力、コンボ・ボックスからの選択、そして画面上でのマウスのドラッグ操作にも応答するとしたらどうでしょう。非同期とは正確には何を意味するのか、そしてサーバーが要求に応答するまで待つことなく実行される JavaScript コードについて考えてください。さらに、どのような問題に突き当たる可能性があるのか、注意する分野はどこなのか、そしてこの新しいプログラミング手法によってフォームの設計がどう変わるのかを考える必要があります。

これらの問題をじっくり考えることで、本当に理解しているわけではないアプリケーションにカット・アンド・ペーストして組み込めるコードを手に入れる以上の報いがあるはずです。次回の記事では、今回説明した概念を実践に移し、Ajax アプリケーションを実際に機能させるために必要なコードの詳細を説明します。それまでは、Ajax の可能性をお楽しみください。

参考文献

学ぶために

• 「WebSphere Portal による Ajax の使用」(developerWorks、2006年6月) を読んで、ポータルのパフォーマンスを向上させ、よりクリーンなポータル・アプリケーション・アーキテクチャーを作成する方法、そして最も重要な点として、遙かに応答性に優れたポータルをユーザーに提供する方法を学んでください。
  
  
• Adaptive Path は、最先端のユーザー・インターフェース設計を手掛ける企業の 1 つです。この企業のページを熟読することで、Ajax についての多大な情報を入手することができます。
  
  
• Ajax という用語の由来に興味がある方は、Jesse James Garrett と彼が書いた Ajax に関する (この記事のような) 優れた記事を調べてください。
  
  
• 連載の次回の記事では、XMLHttpRequest オブジェクトに焦点を絞ります。XMLHttpRequest オブジェクトに関するこの卓越した記事を読んで、一足先にスタートを切ってください。
  
  
• Internet Explorerを使用している場合は、Microsoft Developer Network の XML デベロッパー・センターで耳よりな情報を入手できます。
  
  
• 「Ajax for Java developers: Build dynamic Java applications」(developerWorks、2005年9月) では、ページ・リロードのジレンマを解消する動的な Web アプリケーション・エクスペリエンスを実現する革新的手法を紹介しています。
  
  
• 「Ajax for Java developers: Java object serialization for Ajax」(developerWorks、2005年10月) では、Ajax アプリケーションでデータをシリアライズする 5 つの方法を紹介しています。
  
  
• 「Using Ajax with PHP and Sajax」(developerWorks、2005年10月) は、Ajax と PHP を使って動的にコンテンツを更新するリッチ Web アプリケーションの開発に興味を持つ開発者向けのチュートリアルです。
  
  
• 「Call SOAP Web services with AJAX, Part 1: Build the Web services client」(developerWorks、2005年10月) では、Ajax デザイン・パターンを適用した Web ブラウザー・ベースの SOAP Web サービス・クライアントを実装する方法を説明しています。
  
  
• 「XML Matters: Beyond the DOM」(developerWorks、2005年5月) では、動的 Web アプリケーションを構築する手段としての DOM (Document Object Model) について詳説しています。
  
  
• 「Build apps with Asynchronous JavaScript with XML, or AJAX」(developerWorks、2005年11月) では、Ajax を使用してリアルタイム検証に対応した Web アプリケーションを作成する方法を例に沿って説明しています。
  
  
• 「Ajax for Java developers: Ajax with Direct Web Remoting」(developerWorks、2005年11月) では、Ajax の力仕事を自動化する具体的な方法を紹介しています。
  
  
• OSA Foundation のウィキで、AJAX/JavaScript ライブラリーを調査しています。
  
  
• XUL Planet のオブジェクト参照セクションで、XMLHttpRequest についての詳しい説明を読んでください (言うまでもなく、他のあらゆる種類の XML オブジェクト、DOM、CSS、HTML、Web サービス、Windows およびナビゲーション・オブジェクトについての説明も記載されています)。
  
  
• Flickr.com で、極めて優れた Ajax アプリケーションの 1 つをオンラインで確認してください。
  
  
• Google の GMail も、Web アプリケーションに革命をもたらす優れた Ajax アプリケーションの 1 つです。
  
  
• 『Head Rush Ajax ― 学びながら読む Ajax 入門』(オライリー・ジャパン、2006年2月) は、この記事および連載で説明する概念 (およびその他) を、受賞に輝く革新的 Head First スタイルで理解できるようにします。
  
  
• 『JavaScript』(第 5 版、オライリー・ジャパン、2001年11月) は、JavaScript 言語および動的 Web ページの操作に関する優れた参考資料となります。
  
  
• developerWorks Web development ゾーンでは、多種多様な Web ベースのソリューションを取り上げた記事を専門に揃えています。
  
  

議論するために

• ディスカッション・フォーラムに参加してください。
  
  
• Ajax.NET Professional は、Ajax のすべてに関する優れたブログです。
  
  
• developerWorks blogs から developerWorks コミュニティーに加わってください。
  
  

著者について

Brett McLaughlin は、Logo の時代からコンピューター業界に携わっています (あの小さな三角形を覚えていますか)。近年、Java および XML コミュニティーでもっとも著名な作成者兼プログラマーの 1 人です。彼の功績には Nextel Communications での複合エンタープライズ・システムのインプリメンテーション、Lutris Technologies でのアプリケーション・サーバーの作成があり、最近では O'Reilly Media, Inc. で関連本の著作および編集に従事しています。近日出版予定の著書『Head Rush Ajax ― 学びながら読む Ajax 入門』では、賞を獲得した革新的な Head First アプローチを Ajax にもたらしています。最近の著作には、最新バージョンの Java テクノロジーに関する最初の本、『Java 5.0 Tiger』があります。また、彼の著名な『Java & XML』は今でも、Java 言語での XML テクノロジーの使用方法に関するもっとも信頼のおける著作物の 1 つとして数えられています。

この記事を評価する

コメント

上に戻る

目次

• 昔ながらの技術、そして新しい工夫
• Request オブジェクトの取得
• Ajax の世界での要求/応答
• Web フォームでの関連付け
• まとめ
• 参考文献
• 著者について
• コメント