Ajax.Baseクラス - Backstage of theater.js

【抜粋】一部省略
Ajax.Base = function() {};
Ajax.Base.prototype = {
  setOptions: function(options) {
    this.options = {
      method:       'post',
      asynchronous: true,
      parameters:   ''
    }
    Object.extend(this.options, options || {});
  },
(省略)
  responseIsFailure: function() {
    return !this.responseIsSuccess();
  }
}

後述のAjax.Request、Ajax.Updater、Ajax.PeriodicalUpdaterで継承されます。抽象クラス扱いで、プログラマがインスタンスを作成することはありません。

ここで、ちょっと分からないことが。今までは抽象クラスの実装は以下のようにしていました。

【参考】Enumerableクラスの継承
var Enumerable = {
(省略)
}
(省略)
ObjectRange = Class.create();
Object.extend(ObjectRange.prototype, Enumerable);
Object.extend(ObjectRange.prototype, {
(省略)
}

抽象クラス扱いのEnumerableクラスは、Class.createメソッドとprototypeプロパティを使用せず、varで宣言してオブジェクトへ直にメソッドを定義しています。その後、Object.extendメソッドを使用して継承を実現しています。

しかし、Ajax.Baseクラスを継承する場合は以下のようになっています。

【参考】Ajax.Baseクラスの継承
Ajax.Base = function() {};
Ajax.Base.prototype = {
(省略)
}
(省略)
Ajax.Request = Class.create();
(省略)
Ajax.Request.prototype = Object.extend(new Ajax.Base(), {
(省略)
}

抽象クラス扱いのAjax.Baseは、Class.createは使用しないものの、空のfunctionが設定されています。そして、そのprototypeプロパティにメンバが追加されています。その後、Object.extendを使用して、Ajax.Baseのインスタンスにメンバを追加し、これをAjax.Requestクラスのprototypeプロパティに設定しています。

この二者は結果として同じになると思います。なぜ書き方が違うのかは分かりません・・・。継承の実装方法としては、前者の方が感覚的に分かりやすいと思うのですが。後者はトリッキーな気がします。あとで理由がで分かったら追記します。

setOptionsメソッド

【抜粋】
  setOptions: function(options) {
    this.options = {
      method:       'post',
      asynchronous: true,
      parameters:   ''
    }
    Object.extend(this.options, options || {});
  },

外部から呼ばれることはなく、Ajax.Baseクラスを継承する各Ajaxクラスのインスタンス生成時に呼び出されるメソッドです。

自オブジェクトoptionsプロパティにオブジェクトを定義し、引数のオブジェクトoptionsのプロパティをそれに追加しています。引数optionsがnullなら空オブジェクトを使用しています。

optionsプロパティのオブジェクトにはmethod(='post')、asynchronous(=true)、parameters(='')がデフォルトで設定されますが、他にも設定できます。設定できるプロパティは以下を参照してください。

prototype.js v1.4.0 の使い方 - options 引数オブジェクト

補足として、onXXXXXXXXとなっている部分に該当するプロパティは以下になります。(Ajax.Respondersで設定できるものとは若干違います)

プロパティ名	イベント発生時期
onLoading	インスタンス生成の0.01秒後
onLoaded	データ送信時(ローカルでは発生しない)
onInteractive	データ受信開始時
onComplete	通信完了時(エラー時も含む)
on(+HTTPステータスコード)	通信完了時のHTTPステータスコードに対応
onSuccess	通信成功時(HTTPステータスコード2xx) ステータスコード指定優先
onFailure	通信失敗時(HTTPステータスコード2xx以外) ステータスコード指定優先
onException	例外発生時

HTTPステータスコードについては以下を参照してください。

http://homepage1.nifty.com/yito/anhttpd/statuscode.html

【例】
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" src="prototype.js" charset="utf-8"></script>
<script language="javascript">
<!--
function test(){
  new Ajax.Request(
    'test.jsp',
	 
    //以降がsetOptionsの引数となる
    { method:'post',
      asynchronous:true,
      postBody:"txt1=" + $('txt1').value + "&txt2=" + $('txt2').value,
      requestHeaders:['headerName1', 'headerValue1',
                      'headerName2', 'headerValue2'],
      on200:function(req){//200はOK(受信完了)を意味する
        $('test').innerHTML = req.responseText;
      }
    });
}
//-->
</script>
</head>
<body>
<div id="test"></div>
<input type="text" id="txt1" value="あいうえお"/><br/>
<input type="text" id="txt2" value="かきくけこ"/><br/>
<button onclick="test();">TEST</button>
</body>
</html>
----------------------------------------------------------
[test.jsp]
<%@ page contentType="text/plain;charset=utf-8" %>
<%@ page import="java.util.*, java.io.*" %>
<%!
//2バイト文字Unicode変換
public String strEncode(String strVal)
  throws UnsupportedEncodingException{
  if(strVal == null){
    return ( null);
  }else{
    return (new String(strVal.getBytes("ISO-8859-1"), "UTF-8"));
  }
}
%>
<%
//キャッシュ無効化
Calendar today = new GregorianCalendar();
response.setDateHeader("Last-Modified", today.getTime().getTime());
response.setDateHeader("Expires", 0);
response.setHeader("Pragma","no-cache");
response.setHeader("Cache-Control","no-cache");
%>
txt1:<%=strEncode(request.getParameter("txt1"))%><br/>
txt2:<%=strEncode(request.getParameter("txt2"))%><br/>
header1:<%=request.getHeader("headerName1")%><br/>
header2:<%=request.getHeader("headerName2")%><br/>

responseIsSuccessメソッド

【抜粋】
  responseIsSuccess: function() {
    return this.transport.status == undefined
        || this.transport.status == 0
        || (this.transport.status >= 200 && this.transport.status < 300);
  },

this.transportはその通信で使用するXMLHttpRequestオブジェクトです。そのHTTPステータスコードを判定し、undefinedか0か200番台であればtrue、そうでなければfalseを返却します。

responseIsFailureメソッド

【抜粋】
  responseIsFailure: function() {
    return !this.responseIsSuccess();
  }

上記responseIsSuccessメソッドの逆の結果を返却します。