Ajaxという言葉が世に出てから約2年になる。Ajaxについて解説した雑誌やサイトの記事も珍しくはなくなった。しかし，どうもいまだにピンとこない，という人は意外に多いのではないかと思う。そこで，もう一度改めてAjaxの仕掛けを眺めていこうと思う。
Ajaxというのは，ActiveXとかCGIなどと同じように，実装技術に名前を付けたものである。もう少し細かく分類すると，リッチ・クライアントを実装するための一つの手法ということになる。リッチ・クライアントを実装する手段はAjaxに限らず山ほどある。だから，Ajaxが他の何かに似た仕掛けを持っているのは当然である。
それでは何がAjaxの売りかというと，メジャーなプラットフォームでよく使われるブラウザに搭載済みの機能，つまりJavaScriptを使うところにある。クライアント側に「なんとかエンジン」とか「なんとかプラグイン」のような特別なプログラムをインストールする必要がないのである。
既存の技術をうまく利用してリッチ・クライアントを実現するわけだから，Ajaxがベースにしている技術はそれほど目新しいものではない。これもまた当然である。それでは，どんな技術をどのように使っているのだろうか。一つずつ順に見ていくことにしたい。
まずはAjaxの概観を見ておこう
その前に，Ajaxの概観を簡単に説明しておこう。図1をご覧いただきたい。ブラウザでサーバーにアクセスすると，まずコンテンツ，すなわちHTMLドキュメントやJavaScriptのファイルを取得し，これらをもとにブラウザのウィンドウに表示を行う。JavaScriptのプログラムはユーザーの挙動を捕捉し，サーバーと通信を行って動的なデータを取得する。その結果に基づいてブラウザの表示を書き換える。これが大きな流れである。
 |
| 図1●Ajaxの処理の流れの概観 |
この図を見ていると，いくつかのポイントが見えてくる。
(1)JavaScriptがユーザーの挙動を捕捉する仕組み
(2)JavaScriptがブラウザの表示を書き換える仕組み
(3)JavaScriptがサーバーと通信する仕組み
の3点である。
このうち(1)と(2)は，JavaScriptの機能として比較的知れわたっているので，わざわざ説明する必要はないと思われるかもしれない。しかし，「なるほど，それならJavaScriptを勉強しよう」と思っていざ情報を収集してみると，視覚効果に関するものが大半を占めることに気がつく。
それもそのはず。Ajaxより前にJavaScriptといえば，視覚効果やポップアップ，マウスの追従といった“面白い”機能を実現するために使われることのほうが多かった。ユーザー・インタフェースの実装などという凝ったことに手を出している技術者は，ほんの一握りで，それもせいぜいプルダウンメニューかツリービュー程度だった。そういうわけで，まずは前述の(1)と(2)のあたりから，改めて解説をしてみたい。
図2では図1のブラウザの部分をもう少し詳しく書いてみた。ブラウザは，取り込んだHTMLドキュメントを解析して内部的にオブジェクトのツリー構造に展開する。これがDOM（Document Object Model）である＊1。大まかに言うとブラウザは，このデータ構造，つまりDOMに従ってウィンドウの表示をしている。
 |
| 図2●Ajaxの処理の流れをもう少し詳しく見るとこうなる [画像のクリックで拡大表示] |
ユーザーがブラウザに対してマウスのクリックやキーボード入力などの操作を行うと，DOMに基づいて解析を行い，イベントを発生させるとともに，“必要に応じて”JavaScriptのコードを実行する＊2。
JavaScript側では，DOM APIを使ってドキュメント構造を参照したり，書き換えを行う。ブラウザは，ドキュメント構造の変更に従ってウィンドウの表示を更新する。ここまでが先の(1)と(2)の流れである。
SPANタグで囲まれた部分をJavaScriptで書き換える
ここまで理解できたところで，サンプルを使って具体的に説明していこう。一つ目は，テキストボックスに文字列を入力してボタンを押すと，入力した内容でブラウザの一部を置き換える例（図3）である。
 |
| 図3●画面上の「わたし」の部分を，テキストボックスに入力した文字列で書き換えるサンプル。こちらからソースをダウンロードできます [画像のクリックで拡大表示] |
コードを見ていこう（図4）。ここではHTMLドキュメント（page1.htm）とJavaScriptのプログラム（myname.js）を使っている。まず，HTMLである。(1)のところでJavaScriptのコードを読み込んでいる。JavaScriptのコードはHTMLの中に埋め込むこともできるが，ここではコードの可搬性などの便宜のため別ファイルにするスタイルを取った。また，HTMLとJavaScriptのファイルは同じディレクトリに置かないように配慮している。HTMLがあるディレクトリにjsというサブ・ディレクトリを作成し，ここにJavaScriptのファイルを置くことにする。そのため，(1)のSCRIPTタグのsrc属性は"js/myname.js"という値になっている。
 |
| 図4●図3のHTMLドキュメント（page1.htm）とJavaScriptプログラム（myname.js） [画像のクリックで拡大表示] |
(2)では，onclick属性に，ボタンのクリックで起動するスクリプトを記述している。呼び出す関数はchange_mynameである。引数に書いてある式「document.getElementById('myinput').value」というのは，「現在表示しているドキュメントからid属性がmyinputであるエレメントを見つけ，そのvalue属性を得る」という意味になる。
「id属性がmyinputであるエレメント」とは，(2)の二つ上の行にあるテキストボックスのことであり，「そのvalue属性」というのは，テキストボックスにタイプした文字列という意味である。したがって言い直すと，「ボタンを押したら，テキストボックスにタイプした文字列を引数にしてchange_myname( )という関数呼び出しを実行しなさい」という意味になる。
次にJavaScript側のchange_myname関数の内容に移ろう。(3)ではid属性がmynameであるエレメントを取得して，変数elに代入している。つまり，(4)のSPANタグで囲まれた部分に対応するドキュメント構造＊3を取得することになる。そして，(5)でこのオブジェクトのinnerHTMLプロパティを変更している。これにより，SPANタグで囲まれた部分のHTMLが書き換わるという仕掛けだ。
getElementByIdとかinnerHTMLなどといった単語が突然出てきたので面食らった人もいるかもしれない。実はこれが，DOM APIなのである。ドキュメント構造を参照したり変更するために，どのようなメソッドやプロパティが用意されているかは，DOMの仕様を見れば書いてある。
言い換えると，このようなコードをスクラッチから書きたいと思ったら，DOMに関する知識が必須である。初心者にはちょっとハードルが高いかもしれないが，いずれ役にたつと信じてぜひマスターしていただきたいところだ。
