Ajaxオブジェクト

引き続きprototype.jsのソースコードを読んでいこう。今回は932行目、Ajaxオブジェクトの定義から読み進めていく。なお、ここからは6月19日に公開されたバージョン1.5.1.1を使用する。

932 var Ajax = {
933   getTransport: function() {
934     return Try.these(
935       function() {return new XMLHttpRequest()},
936       function() {return new ActiveXObject('Msxml2.XMLHTTP')},
937       function() {return new ActiveXObject('Microsoft.XMLHTTP')}
938     ) || false;
939   },
940 
941   activeRequestCount: 0
942 }

ここでは、getTransportプロパティにより、XMLHttpRequest(), ActiveXObject('Msxml2.XMLHTTP'), ActiveXObject('Microsoft.XMLHTTP') から取得可能なtransport(転送)オブジェクトを取得しようとしていることがわかる。Try.theseについては149行目からの定義を参照してほしい。

AJAXアプリケーションでは、ブラウザでのページ表示後も、ブラウザとサーバとの間で非同期にデータをやり取りする。このときのやり取りに使われるのが、XMLベースで記述された転送オブジェクトだ。

転送オブジェクトの取得と、リクエスト、およびレスポンスの処理方法はブラウザにより異なる。したがって、AJAXアプリケーションを実装する際には、アプリケーションを対応させるブラウザに応じて、転送オブジェクトの扱いを分岐・制御するコードを書いていく必要がある。ゼロからAJAXアプリケーションを実装したことのある読者であれば、この面倒なプロセスを経験したことだろう(転送オブジェクトは、一般にXMLHttpObject(またはXMLHttpRequest)と表記されることが多い。本記事でも、以下、転送オブジェクトをXMLHttpObjectと表記することとする)。

さて、ここから確認していくAjaxオブジェクトは、その名のとおり、AJAXアプリケーションの実装を支援するために提供されているオブジェクトだ。prototype.jsを使用することで、上記のようにブラウザ毎に異なる実装が要求される部分を、よりシンプルに記述することができる。

944行目以降、Ajaxオブジェクトのプロパティとして、以下のようなオブジェクトが定義されている。

  • Ajax.Responders .. AJAX関連のイベントを捕捉管理する
  • Ajax.Base .. AJAX関連オブジェクトの基底クラスとして機能する
  • Ajax.Request .. 上記のXMLHttpObjectを制御し、AJAX処理を行う
  • Ajax.Updater .. AJAX処理や処理結果に応じて、ページを更新する
  • Ajax.PeriodicalUpdater .. Ajax.Updaterを利用し、定期的にページ更新をおこなう

Ajax.Requestオブジェクト

ここでは、AJAX処理のメイン部分ともいえるAjax.Requestの実装を見ながら、prototype.jsを使用したAJAXアプリケーション実装テクニックを確認していこう。

1000 Ajax.Request = Class.create();
1001 Ajax.Request.Events =
1002   ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete'];
1003 
1004 Ajax.Request.prototype = Object.extend(new Ajax.Base(), {
1005   _complete: false,
1006 
1007   initialize: function(url, options) {
1008     this.transport = Ajax.getTransport();
1009     this.setOptions(options);
1010     this.request(url);
1011   },
          :

Ajax.Request.Eventsプロパティは、上記のとおり5つの文字列を配列として保持している。この5つの文字列は、AJAX処理中のステータスを表している。AJAX処理中のステータスは、先述したXMLHttpObjectのreadyStateプロパティにより取得することができる。

続いて1004行目からはAjax.Requestのprototypeオブジェクトが定義されている。new Ajax.Request()で実行されるinitialize処理において、XMLHttpObjectを取得(getTransport())していることが確認できる。

initialize処理では、さらに、setOptions()によりリクエスト発行時のオプションが指定され、request()によりリクエストが発行されている。setOptionsで指定できるオプションにはHTTPリクエストメソッド(GETやPOSTなど)や処理時の使用エンコードなどがある。これらは、Ajax.Baseでprototype定義されているので、併せて983行目以降の記述も確認しておこう。

次回も引き続き、Ajax.Requestオブジェクトの実装を確認していきたい。