AJAXについて

Last Update:
2005/11/18

目次

Ajaxとは？

インターネットの普及により、現在、どのクライアント PC にも、Web ブラウザがインストールされています。その中で、Web ブラウザをクライアントとしてアプリケーションを操作する Web アプリケーションは、企業向け・一般向けを問わず、すでに十分に浸透しています。クライアントサイドに新たなアプリケーションをインストールする必要がない Web アプリケーションは、サーバサイドですべてのアプリケーションコンテンツを管理できることから、クライアントサイドのアプリケーション管理の苦労から開放されるため、非常に多くの場面で採用されてきました。Web アプリケーションの基本的な動きは、Web ブラウザから Web サーバにリクエストを送り、その結果を HTML として受け取りそれを表示することです。そのため、Web アプリケーションのクライアント側での挙動は、Web ブラウザにできることに限定されてしまいます。たとえば、リクエスト・レスポンスを基本に動作するため、細かい操作一つ一つにページの再表示が必要であることや、Web ブラウザを基本としているため、フィールド間の移動や入力文字列の補完などの面に柔軟に対応できないなど、Web アプリケーションは操作性の面でさまざまな問題が指摘されています。

そのような中で注目を集めているのが、Ajax (Asynchronous JavaScript + XML) です。Ajax とは、JavaScript の組み込みクラス XMLHttpRequest を用いて Web ブラウザと Web サーバが非同期に通信し、その結果を元に 表示されているページの一部を書き換える技術です。そもそも、Ajax という技術が存在するわけではありません。JavaScript、DHTML (Dynamic HTML)、CSS など一般的なブラウザでサポートされている旧知の技術を組み合わせることにより、いままでの Web アプリケーションでは実現できなかった柔軟かつ表現力が豊かなアプリケーションを Web ブラウザのみで実現する仕組みを総称して Ajax と呼びます。

代表的な Ajax アプリケーションとして、Google Suggest や Google Maps などがあげられます。

技術的バックグラウンド

ここでは、Ajax について、技術的にもうすこし掘り下げてみたいと思います。Ajax のプログラムは、通常 JavaScript を用いて記述します。そのプログラムの大まかな流れは以下のようになります。

  1. XMLHttpRequest オブジェクトを作成する。
  2. open メソッドにより、リクエストのメソッド、送信先、同期/非同期の指定を行う。
  3. send メソッドにより、リクエストをサーバに送信する。
  4. サーバでの処理が終わると、onreadystatechange イベントが発生する。
  5. イベントハンドラの中で、レスポンスを受け取り、その結果からページを書き換える。

図1: Ajaxの動作

ここからは、それぞれの手順について説明します。

はじめに、XMLHttpRequest オブジェクトを作成します。ここでは、ブラウザの種類やバージョンに対応できるように作成するオブジェクトを調整する必要があります。

リスト１ XMLHttpRequest の作成 
//IE
if(window.ActiveXObject){
  try {
    //MSXML2以降用
    req = new ActiveXObject("Msxml2.XMLHTTP")
  } catch (e) {
    try {
      //旧MSXML用
      req = new ActiveXObject("Microsoft.XMLHTTP")
     } catch (e2) {
      req = null
    }
  }
} else if(window.XMLHttpRequest){
  //IE以外
  req = new XMLHttpRequest()
}

次に、作成したリクエストに、送信するときのメソッドが POST なのか GET なのか、送信する先のURL、同期/非同期かなどを指定します。ここでは、GET メソッドで、/complete というパスに向かって、非同期でリクエストを送る指定をしています。また、このリクエストに対するレスポンスが帰ってきたときに呼び出されるコールバックメソッドを登録しておく必要があります。

リスト２ 送信先の指定 
req.open('GET', '/complete', true) 
req.onreadystatechange = function() { 
  //メソッドの実装は後ほど
}

準備ができましたので、リクエストを送信します。

リスト３ 送信 
req.send()

リクエストに対する処理が完了すると、onstatechange イベントが発生し、先ほど登録したコールバックメソッドが呼ばれます。リクエストのステータスが4の場合は、その呼び出しが完了したことになります。また、ステータスが200の場合は、そのリクエストが正常終了したことになります。この二つの値をチェックし、レスポンスとして受け取った文字列を、表示しているページの DOM Tree に追加することによって、結果を今表示しているページに表示します。

リスト４ イベントの処理 
req.onreadystatechange = function() { 
  if (req.readyState==4 && req.status == 200) {
    var element = document.getElementById('somewhere')
    element.appendChild(document.createTextNode(req.responseText)) 
  }
}

代表的な Ajax コンポーネント

上記の方法で、JavaScript を用いて Ajax アプリケーションを作成することができます。しかし、JavaScript を用いてリクエストを送り、その結果を解釈し、ページを書き換える処理はあまり簡単にできるものではないでしょう。すでにいくつかの Ajax アプリケーションを作成するためのプロダクトが提供されていますので、ここではそれを紹介します。

AjaxTags
Ajax アプリケーションを実現するためのコンポーネントを、タグライブラリーとして提供しています。AjaxTags は、オープンソースとして、http://ajaxtags.sourceforge.net/ から提供されています。
AjaxFaces
Ajax アプリケーションを実現するためのコンポーネントを、JavaServer Faces の UI コンポーネントとして提供しています。AjaxFaces は、商用のプロダクトですが、http://www.ajaxfaces.com/company/ からユーザ登録をした上で評価版をダウンロードすることができます。
MyFaces
JSF のオープンソース実装である MyFaces では、拡張機能として Ajax のコンポーネントを提供しています。ここでは、この MyFaces の拡張機能を用いて、JSF アプリケーションに Ajax 機能を追加する手順を説明します。

これ以外にも、さまざまな Web フレームワークに Ajax の機能は取り入れられつつあります。

Total Access: