Connection Manager（その１） - tetsuya

Connection Manegerは、XMLHttpRequestを処理するためのモジュール類（YUIのConnection Managerのページはこちら）。
よく知られている通り、Ajaxは、Asynchuronous Javascript and XMLの略なので、狭義には、このConnection Mangerでハンドルする「in pageで発生する（ページのreloadを伴わない）非同期なXMLHttpRequestによる処理系」のことを意味する。
一般に知られるようになったのは、Google Mapが公開されたときと記憶している。

JavaScriptライブラリには、Drag and DragやAnimationといった「画面をリッチに飾るための処理系（Effect）」、DomやEventといった「オブジェクト指向言語としてのJavaScriptのヘルパー」が含まれるが、これらを含んだものが、広義のAjaxと認識されている。

Connection Manager handles cross-browser instantiation of XMLHttpRequest, negotiates the server response and uses a callback pattern to process the response data.

と書かれているように、Connection Managerは、クロスブラウザーに対応したXMLHttpRequestの初期化（XMLHttpRequestが、そもそも、IEにおいてActiveXで実装されたものに由来する）、サーバーとのネゴシエーション、（戻ってきた）データの処理をするコールバックパターンのヘルパーである。

YUIにおいて、まず、読み込むファイルは

<!-- Dependency -->
<script src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js">
</script>

<!-- Used for Custom Events and event listener bindings -->
<script src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js">
</script>

<!-- Source file -->
<script src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js">
</script>

と書かれている。event-min.jsは、（後述の）カスタムイベントを利用する際に用いるので、そうでない場合には必要ない。

Connection Managerをつかって、XMLHttpRequestを初期化・実行するためには、以下のように書く。

<script>
var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
</script>

引数は

引数	意味
第1引数；HTTPのメソッド	HTTPメソッドは、GET、POSTの他にHEAD、DELETE、PUTの計５つがあるが、普通使うのは、GETとPOSTだけ。
第2引数；URL	Httpサーバーを呼ぶためのURL
第3引数；Call Back関数	Call Back（非同期なHttpサーバーからのレスポンス）を処理する処理系（Call Back Objectと書かれているが、YUIの作法がある）
第4引数	POSTで通信するときのPOSTメッセージを入れる（配列）

Asynchronous Transactions and the Callback Object（非同期なトランとCallback Obuject）

CallBackオブジェクトと呼ばれるのは、以下のリテラル表現のJavaScriptオブジェクトである。

var callback =
{
  success: function(o) {/*success handler code*/},
  failure: function(o) {/*failure handler code*/},
  argument: [argument1, argument2, argument3]
}

ここで、

success	XMLHttpRequestが正常に処理され、サーバーから正常なレスポンス（Httpサーバーのステータスコードで言えば200系）が戻った際に処理する関数（ハンドラ）を定義
failure	サーバーから通信障害のレスポンス（ステータスコードで言えば400系）が戻ったときに処理する関数（ハンドラ）を定義
argument	正常系、異常系のハンドラのための引数を定義。オブジェクト、数値、配列など

以下のコードは、このサンプルとして挙げられているもの。

//正常系、異常系のハンドラに食わせる引数（配列）の例
var args = ['foo','bar'];

var responseSuccess = function(o){
/* oはレスポンスオブジェクトをあらわす。
 * ハンドラでは、以下のように、このレスポンスオブジェクトのプロパティー
 * にアクセスすることで処理を実装する。（意味は後述）
 * o.tId
 * o.status
 * o.statusText
 * o.getResponseHeader[ ]
 * o.getAllResponseHeaders
 * o.responseText
 * o.responseXML
 * o.argument
 */
};

var responseFailure = function(o){
// レスポンスオブジェクト（o）のプロパティーとアクセス方法は
// responseSuccess()と同じ。（意味は後述）
}

var callback =
{
  // 通信に成功したら、ハンドラresponseSuccess()を呼ぶ。
  success:responseSuccess,
  // 通信に失敗したら、ハンドラresponseFailure()を呼ぶ。
  failure:responseFailure,
  argument:args
};

HttpサーバーのCachingを避けたいとき

Getメソッドに対するサーバーのキャッシング機構を使いたくないときには、Callback Objectに以下のように定義する。

var callback =
{
  cache:false
}

こうすると、Getパラメータにrnd=timestampというのが付加されるようになる。（これで、ことなったリクエストだと、サーバーが反応することを期待する）
でも、副作用があるので注意とのこと（それはそうだ）。

CallBackオブジェクトとファイルアップロード

YAHOO.util.Connect.setFormをつかってファイルアップロードする際には、successとfailureの代わりにuloadハンドラを定義しなくてはならない（以下のサンプル）。

var callback =
{
  upload: function(o) {/*upload handler code*/},
  argument: [argument1, argument2, argument3]
}