Ajaxの普及とJavaScriptライブラリの出現や発展は車の両輪のように進んできた。Prototype.jsの出現はその先駆けだったといってよいだろう。今回は、そのAjax関連機能を取り上げる。バージョン1.6.0.2、Windows環境の場合で説明する。

サーバとの送受信

サーバとWebブラウザとの間でデータを送受信する際に、もっとも多く用いられるのはAjax.Requestだ。これはPrototype.jsのClassによって構築されているので、ここではクラスの1つとして紹介する。基本的な構成は以下のとおりだ。最初にnewを記述してインスタンスを生成させるようにすることが必要だ。

new Ajax.Request( 'アクセスするURL', {
  method : 'get'もしくは'post',
  // ..... その他オプション .....
  onSuccess : function( transport )  {
    // ..... サーバから正常にデータを受信したとき .....
    // (ステータスコード2xxのとき)
    // 引数transportはサーバから受信したデータなど、以下同じ
  },
  onFailure : function( transport )  {
    // ..... サーバからデータを受信できなかったとき .....
    // (ステータスコード2xx以外のとき)
  },
  onException : function( transport, ex )  {
    // ..... 送受信時に何らかのエラーが発生したとき .....
  }
} )

サーバにアクセスするときのHTTPメソッドはgetかpostを記述する。そしてリクエスト送信前後に行う処理をコールバック関数で記述する。引数transportは、サーバから受信したデータなどが収められたオブジェクトだ。オプションの詳細はAjax Optionsで参照できる。

受信したXMLデータでWebページを更新

では例として、リスト1のようなXML形式のデータを受信して、リスト2のようにHTMLの<ul><li>に変換してリンクを表示させる方法を紹介したい。

【リスト1】 XML形式のブックマークデータ(独自形式、文字コードUTF-8)

<?xml version="1.0"?>
<bookmark>
  <item>
    <title>いまからはじめるPrototype.js</title>
    <link>http://journal.mycom.co.jp/series/prototypejs/001/menu.html</link>
  </item>
  <item>
    <title>いまからはじめるScript.aculo.us</title>
    <link>http://journal.mycom.co.jp/series/scriptaculous/001/menu.html</link>
  </item>
</bookmark>

【リスト2】 HTMLに変換後のブックマーク(<div id="panel"></div>内に表示)

<ul>
  <li><a href=".....">いまからはじめるPrototype.js</a></li>
  <li><a href=".....">いまからはじめるScript.aculo.us</a></li>
</ul>

例1 IE7, Opera9.2, Safari3の場合

1.Ajax.Requestのインスタンスを生成する処理を記述する(リスト3)。正常にデータを受信できたときは上記の変換処理を行い、その他の場合は簡単なメッセージを表示させるようにする。

【リスト3】 Ajax.Requestのインスタンスを生成

new Ajax.Request( 'サーバのURL', {
  method : 'get',
  onSuccess : function( transport )  {
    // ..... XMLからHTMLへの変換処理 .....
  },
  onFailure : function( transport )  {
    $( 'panel' ).update( 'データを受信できませんでした' );
  },
  onException : function( transport, ex )  {
    $( 'panel' ).update( 'エラーが発生しました<pre>' + ex.message + '</pre>' );
  }
} );

2.初期設定として、新たに生成した<ul>と、リスト1のルートタグにあたるDOMオブジェクト(documentElement)の参照を変数に代入しておく。

var ul  = new Element( 'ul' );
var doc = transport.responseXML.documentElement;

3.リンク情報を持つ<item>を逐次参照し、HTMLに変換する

$A( doc.getElementsByTagName( 'item' ) ).each( function( tag )  {
  if ( !Prototype.Browser.IE )  tag = Element.cleanWhitespace( tag );
  var children = tag.childNodes;
  // <a>の生成(children[ 0 ] : <title>, children[ 1 ] : <link>)
  var a = new Element( 'a', { href : children[ 1 ].firstChild.nodeValue } )
                .update( children[ 0 ].firstChild.nodeValue );
  // ..... <a>を<li>の子要素とする .....
  var li = a.wrap( 'li' );
  // ..... <ul>に<li>を追加 .....
  Element.insert( ul, li );
} );

4.すべての<item>から<li>を作成したら、<ul>を画面表示の要素として追加する

$( 'panel' ).insert( ul );

例2 Firefox2の場合

Firefoxでは、上記の3.について、セレクタを含むElementのメソッドをより多く実行可能だ。以下にその例を示す。

// CSSセレクタで<item>を逐次参照
Element.select( doc, 'item' ).each( function( tag )  {
  // <title>と<link>のDOMオブジェクトを参照
  var title = Element.firstDescendant( tag );
  var link  = Element.next( title );
  // <a>および<li>を生成
  var li = new Element( 'a', { href : link.firstChild.nodeValue } )
                  .update( title.firstChild.nodeValue )
                  .wrap( 'li' );
  // <li>を<ul>に追加
  ul.insert( li );
} );

例1と例2を合わせると以下のようになる。ここではPrototype.Browser.Geckoを用いてWebブラウザの種類に応じて処理を変えられるようにしている。できればどのWebブラウザでも同じ方法で処理したいのだが、どうしてもできないときは、こうした処理の振り分けが必要になる。

new Ajax.Request( 'サーバのURL', {
  method : 'get',
  onSuccess : function( transport )  {
    var ul  = new Element( 'ul' );
    var doc = transport.responseXML.documentElement;
    if ( !Prototype.Browser.Gecko )  {
      // Firefox以外の処理
    }  else  {
      // Firefoxでの処理
    }
    $( 'panel' ).insert( ul );
  },
  onFailure : function( transport )  {
    $( 'panel' ).update( 'データを受信できませんでした' );
  },
  onException : function( transport, ex )  {
    $( 'panel' ).update( 'エラーが発生しました<pre>' + ex.message + '</pre>' );
  }
} );

その他のAjax関連機能

Ajax.Updater クラス
サーバから受信したHTMLデータでWebページを更新する。JavaScriptを実行するオプションもある。

Ajax.PeriodicalUpdater クラス
定期的にサーバからHTMLデータ受信してWebページを更新する。

Ajax.Responders オブジェクト
どのAjax処理でも共通するコールバック関数を設定しておく。

Webメールクライアントのように多くのユーザーがアクセスするページでもAjaxを導入する例が増えてきた。連載は今回で最後となるが、Prototype.jsをはじめとするJavaScriptライブラリはまだまだ発展を続けている。数年経ってから振り返ったときに、2008年はAjax普及元年と呼ばれるようになっているかもしれない。