いまさら聞けない、“Ajax”とは何なのか？：いまさら聞けないリッチクライアント技術（3）（3/3 ページ）

» 2007年08月23日 00時00分公開

Ajaxを構成している技術たち

■AjaxのエンジンはJavaScriptに使われている

　Ajaxはその名前にさまざまなヒントが隠されているようです。では、次に「Asynchronous JavaScript ＋ XML」のJavaScriptとAjaxの関係は非常に深いものであることに注目しましょう。

　前ページで取り上げた、マウスの動きを感知したり、足りないデータのリクエスト、画面のリロードなどといった「非同期通信」の働きは、JavaScriptを使って実現しています。繰り返しになりますが、Ajaxとは複数の技術を組み合わせた方法です。しかし、ソースコードでAjaxを見てみると、ほとんどJavaScriptで構成されているといっても過言ではありません。

　実際の使い方は一般的なJavaScriptと同じ使い方で、HTMLのソースに直接記述をしたり、外部に記述したJavaScriptソースを読み込んで、Ajaxエンジンを作っているのです。

図7　JavaScriptはAjaxエンジンの中核となっている

■DOMとは何か？

　Ajaxという言葉を生み出した、Jesse James Garrett氏が定義するAjaxの要件の1つに「ドキュメントオブジェクトモデル（以下、DOM）を使ったダイナミックな表示と相互のやりとり」というのがありました。AjaxとDOMとは非常に密接な関係がありますが、DOMとは何なのでしょうか？

　DOMとは、HTMLやXMLをプログラム上で使うためのAPIで、HTMLやXMLのデータとAjaxを結び付けるために使うものです。つまり、Ajaxを使って動的なWebページを作成するときに、HTML・XML上のどの要素を変更するか指定しなければなりません。そこでDOMはHTMLやXMLを「ツリー構造」として展開し（これを「DOMツリー」という）、アプリケーション側に文章の情報を伝え、加工や変更をしやすくするのです。

■XMLを使ったデータ交換

　非同期処理のときに、Ajaxは必要なデータのみをサーバに要求しました。郵便番号を入れると、住所を表示させるAjaxのアプリケーションの場合、サーバに「郵便番号のテキストデータ」をリクエストすると、「住所のテキストデータ」が戻ってきます。

図8　少ないデータだけなら問題はない

　上記のように少ないデータなら、テキストだけでのやりとりで問題はないですが、複数のデータをやりとりする場合は、サーバからテキストデータだけもらっても、その処理に困ってしまいます。

図9　複数のレスポンスデータをもらって困る

　そこで、データのやりとりで「XML」を使えば、複数のデータを同時にやりとりしても、どのデータがどの要素なのか一発で判明できます。

図10　Ajaxを使えば、複数データのやりとりを解決できる

Ajaxはハードルが高いが理解しておくべき

　さて駆け足でAjaxについて解説してみましたが、いかがでしたでしょうか？今回は特に重要なものだけをピックアップしており、「XHTMLとCSS」「XMLHttpRequest」といった要素（これも重要なのですが）は説明できませんでしたが、Ajaxはいままでの技術を組み合わせたものだということが分かったと思います。本格的にAjaxを理解し、実際にアプリケーションを作るには、JavaScript、XML、HTML、サーバサイドのプログラミング（Java・.NET・PHPなど）などの知識が必要です。

　確かにAjaxは、開発をしようとすると、初心者にはハードルが高いですが、普通に利用する分には何も問題ありません。ただ、今後はGoogleの各種サービスをはじめ、「Webブラウザさえあれば利用できるサービス」がどんどん増えていくのは、間違いありません。「自分が利用しているサービスがどのような仕組みで動いているのか？」を理解するということはとても大切です。

■AjaxによってWeb OSが生まれる!?

　Web上でまるでOSが動いているような「Web OS」といったサービスも続々と出現しているので、もしかすれば今後はシンクライアント的な、クライアント端末にはOSをインストールせずにWebブラウザのみが搭載したシステムが主流になるかもしれません。よって、具体的な技術についてはよく分からなくても、「どういった仕組みで動いているのか？」といった点ぐらいは、この記事をきっかけに理解していきましょう。