PR
図1●Ajaxでは画面全体を更新せず,必要なデータのみを送受信し更新する
図1●Ajaxでは画面全体を更新せず,必要なデータのみを送受信し更新する
[画像のクリックで拡大表示]
図2●Ajaxの処理フロー
図2●Ajaxの処理フロー
[画像のクリックで拡大表示]
写真1●社員番号の上にマウスカーソルを置くと、その詳細が表示される
写真1●社員番号の上にマウスカーソルを置くと、その詳細が表示される
[画像のクリックで拡大表示]
リスト1●XMLOutput.java(抜粋)
リスト1●XMLOutput.java(抜粋)
[画像のクリックで拡大表示]
リスト2●index.html(抜粋)
リスト2●index.html(抜粋)
[画像のクリックで拡大表示]
リスト3●employee.jsのshowEmpDetail()
リスト3●employee.jsのshowEmpDetail()
[画像のクリックで拡大表示]
リスト4●employee.jsのgetEmpDetail()
リスト4●employee.jsのgetEmpDetail()
[画像のクリックで拡大表示]

この連載記事の目次へ

 今回はオープンソースで実現するリッチクライアントの第一弾として,Ajaxを紹介する。AjaxはWebブラウザのみで高い操作性を実現できるという特徴を持ち,にわかに注目を集めている構築手法である。

既存技術の組み合わせ,Google Mapsが火付け役に

 Ajaxは「Asynchronous JavaScript + XML」の略。JavaScriptとXMLを組み合わせた名前からうかがえるように,Ajaxが利用している技術は,いずれも従来からあったものだ。強いて新しい要素をあれば,サーバーとの通信にJavaScriptの通信機能(XMLHttpRequest)を使用し,取得したデータを表示に反映させるためにDOM(Document Object Model)を積極的に使用するようになったという点だ。

 Ajaxの火付け役となったのは「Google Maps」である。Google Mapsでは,ユーザーの操作に従って画面遷移とは非同期にサーバーからデータを取得しており,一見FlashやJavaAppletのような動作を行っている。これを実現していたのがAjaxだ。

 このような高機能なアプリケーションを,ほとんどのブラウザで用意されているJavaScriptという言語で実現できる。つまり特別なアプリケーションやプラグインを導入する必要なしに作成できることをGoogle Mapsは証明したのである。

 Ajaxの特徴をまとめると,以下のようになる。

  • 一切のプラグインが不要で,Webブラウザのみで操作性の高いアプリケーションを実現できる
  • 新たな技術ではなく,古い技術を組み合わせた構築手法である
  • JavaScript,XMLという標準的な技術を使用しているため取り組みやすい

    ページ全体を更新せず,必要なデータのみ送受信

     先に述べたとおり,Ajaxの特徴は画面遷移と非同期に,任意のタイミングでサーバーと通信して表示を更新できるという点にあり,画面の作成はHTMLやJSP,PHPといった従来の方法となんら変わらない。つまり,サーバーとの通信,表示の更新部分がAjaxの肝であり,その仕組みを理解すればAjaxによるアプリケーションが作成できる。

     まずは,技術的な説明の前にAjaxで構築されたWebアプリケーションが従来のWebアプリケーションとどのように違うのかを見てみよう。例として,検索,一覧表示,詳細情報表示といった機能を持つWebアプリケーションで考えることにする。

     従来のWebアプリケーションでは,アクションのたびに画面遷移(ページ全体の再読込)が発生していた。そのため通信量が増え,読み込み中はユーザーの作業が中断されてしまうという問題があり,これがHTMLクライアントの操作性を大きく低下させる原因となっていた。

     しかし,Ajaxを使用したWebアプリケーションではデータのみを送受信,表示を更新することで,無駄な画面遷移を排除し,飛躍的に操作性を向上させることができるのである(図1)。

     では,次にAjaxの肝となるデータの送受信,表示更新の流れを見ていこう。

     従来のWebアプリケーションでは,ブラウザ・エンジンでサーバーとの通信を行っていたが,Ajaxでは,ブラウザ・エンジンだけではなく,JavaScriptの通信機能(XMLHttpObject)を使用している。これにより,ブラウザのエンジンとは独立して(画面遷移とは非同期に),任意のタイミングでサーバーとの通信を実現しているのである。

     ブラウザ・エンジンがサーバーと通信するのはページを開く時のみで,それ以降は,Ajaxエンジンがデータの送受信,表示の更新処理を行う(図2)。

     それではAjaxを使用した簡単なWebアプリケーションを見ていただこう。