Prototypeを利用したAJAX開発
AJAXの柱は、非同期の要求をサーバに送信するXMLHttpRequest（XHR）オブジェクトです。問題は、このオブジェクトはブラウザ固有なので、インスタンス作成時にブラウザを考慮しなければならないことです。Prototypeを使えば、この問題をはじめ、ブラウザ固有の実装を心配する必要がなくなります。さらに、普通のJavaScriptでは多くの処理を必要とする複雑なタスクも、フレームワークでは数行のコードで実行することができます。例えば、次に示すAjax.Updaterメソッドは、サーバから「page.htm」ファイルの内容を取り出し、返された値をmyElem <div>に挿入します。
<!-- HTML --> <div id="myElem"> </div> // JavaScript new Ajax.Updater( "myElem", "page.htm", { onFailure : function() { alert("An error occurred"); } } );
このようにわずか数行で「page.htm」の中味を取得し、それをmyElem <div>に挿入することができます。また、PHPファイルなどのサーバコンポーネントを呼び出し、それらを必要な数だけパラメータとして引き渡すこともできます。
new Ajax.Updater( "myElem", "component.php", { parameters : "param1=value1¶m2=value2", method : "post", onFailure : function() { alert("An error occurred"); } } );
この場合、パラメータはクエリ文字列として渡されます。また、methodの使い方にも注目してください。ここには使用するHTTPメソッドを指定しますが、仮に他のHTTPメソッドがある場合でも、基本的にはGETまたはPOSTを指定します。一般に、Ajax.Updaterが取得するパラメータは次の3つです。
- 挿入する要素のID
- 呼び出すサーバコンポーネント
- オプションオブジェクト（さまざまなオプションを使用できるが、上記のコード例にあるオブジェクトが最も一般的）
もう1つの役に立つクラスはAjax.PeriodicalUpdaterです。このクラスを使ってサーバを定期的にポーリングすることができます。例えば、これを使ってニュースサーバを時々クエリし、ニュースが更新されたときにページを更新することができます。次に例を示します。
new Ajax.PeriodicalUpdater( "myElem", "newsProvider.php", { frequency : 5, decay : 2 } );
1つ目と2つ目のパラメータの意味はAjax.Updaterの場合と同じです。frequencyパラメータは、Ajax.PeriodicalUpdaterがサーバをポーリングした後の秒数です。decayパラメータは、応答が変わらない場合にサーバのポーリング間隔を長くするために使われます。この例では、5秒後にサーバが前回の要求と同じ応答を返した場合、新しいポーリング間隔は10秒になります（つまり、frequencyにdecayを掛けます）。10秒後も応答が同じであれば、間隔は20秒になります。異なる応答が返ってきた場合は、直ちにポーリング間隔は5秒にリセットされ、振り出しに戻ります。
サーバが、HTMLコードではなくXMLやJSONなどの他のデータ形式を返す場合は、別の強力なクラスAjax.Requestを使うことができます。このクラスを使用すると、サーバに要求を送ってXMLHttpRequestオブジェクトを受け取り、このオブジェクトからあらゆる種類のサーバ応答を取得することができます。HTML以外の、最も一般的な応答タイプはXMLとJSONです。Ajax.Requestの簡単な使用例を次に示します。
new Ajax.Request( "component.php", { onSuccess : processResponse, onFailure : notifyFailure, parameters : "param1=value1¶m2=value2" } ); function processResponse(xhrObject) { alert("The response is: " + xhrObject.responseText); } function notifyFailure() { alert("An error occurred!"); }
このコードでは、いくつかのパラメータを使ってサーバへの非同期要求を行います。応答が成功した場合は、processResponse関数を呼び出してXMLHttpRequestオブジェクトを受け取ります。この関数は、サーバから取得したものを何でも表示します。応答が失敗した場合は、notifyFailure関数を呼び出します。
もう1つよく目にするのが、AJAXアクティビティがあると必ず通知（またはイメージ）を表示するタスクです。これは、要求の実行に時間がかかる場合に非常に役に立ちます。まさにこれを実現するのがAjax.Respondersのregisterメソッドです。簡単な使用例を次に示します。
<!-- HTML --> <div id="loading" style="visibility: hidden;"> <img src="loading.gif" /> </div> // JavaScript Ajax.Responders.register( { onCreate : displayLoading, onComplete : hideLoading } ); function displayLoading() { Element.show("loading"); } function hideLoading () { Element.hide("loading"); }
この例では、AJAX呼び出しが始まると直ちにGIFが表示されます。応答を受け取ると、ロード中のGIFは非表示になります。Element.showメソッドとElement.hideメソッドの使い方にも注目しましょう。
AJAX開発に役立つ機能
基本的に、AJAXではサーバに要求を送って応答を受け取るという処理を行います。この場合、要求と一緒に、クエリ文字列の形式（つまり、param1=value1¶m2=value……）でパラメータを送ることが必要になることも少なくありません。Prototypeには、クエリ文字列を非常に簡単に作成できる便利な機能が用意されています。例えば、1つのフォームがあり、そのフォームのすべてのフィールドをクエリ文字列として集めたい場合は、Form.serializeメソッドを使うことができます。次に例を示します。
<!-- HTML --> <form id="myForm" name="myForm"> First Name: <input type="text" name="firstName" id="firstName" /> <br /> Last Name: <input type="text" name="lastName" id="lastName" /> <br /> Gender: <br /> <input type="radio" name="gender" id="gender" value="M" checked="true"/> Male <br /> <input type="radio" name="gender" id="gender" value="F" /> Female <br /> <select id="state" name="state" multiple> <option value="ALA">Alabama</option> <option value="CAL">California</option> <option value="FLO">Florida</option> </select> <br /> <input type="button" name="clickButton" id="clickButton" value="Click Me" onclick="displayQueryString()" /> </form> // JavaScript function displayQueryString() { var qs = Form.serialize($("myForm")); alert(qs); }
このフォームに私の個人的な情報を入力し、stateフィールドに「California」を指定してみたところ、図1の画面が表示されました。
簡単かつ簡潔です。また、複数選択も可能であり、複数の値を選択した場合でも、Prototypeが正しいクエリ文字列の組み合わせを自動的に処理してしてくれます。例えば、前述のフォームで「California」と「Florida」を選択した場合は、次のクエリ文字列が返されます。
firstName=Alessandro&lastName=Lacava&gender=M&''state=CAL&state=FLO''
Form.serializeを利用する場合は、次の2つのことを覚えておきましょう。
- イメージとボタン入力は無視される。
- submitボタンはクエリ文字列に含まれる。例えば、前述の例で
type="button"の代わりにtype="submit"を使った場合は、クエリ文字列中にclickButton=Click Meが含まれる。
では、フォームではなくオブジェクトをシリアライズしたい場合はどうしたらよいでしょうか。当然、Prototypeはこのことも考えています。次のコードを見てみましょう。
// create the object var obj = { firstName : "Alessandro", lastName : "Lacava", gender : "M", state : "CAL" }; // get a query string from it var qs = $H(obj).toQueryString(); alert(qs);
このコードの結果は図1と同じです。このコードで重要な役割を果たすのが$H関数です。この関数はobjectパラメータをハッシュに変換します（つまり、オブジェクトのプロパティ名をキー、オブジェクトのプロパティ値を値とする、キーと値のペアの集合が作られます）。
ここまでPrototypeの数々の優秀な機能を紹介してきましたが、必要に合わせてソースコードを修正できることを忘れてはなりません。例えば、前述したとおり、Form.serializeはデフォルトでクエリ文字列にsubmitボタンを含めます。この振る舞いを変更したい場合は、ソースコードを変更します。「prototype.js」ファイルを開くと、次のコードブロックが表示されます。
Form.Element.Serializers = {
input: function(element) {
switch (element.type.toLowerCase()) {
case 'submit':
case 'hidden':
case 'password':
case 'text':
return Form.Element.Serializers.textarea(element);
case 'checkbox':
case 'radio':
return Form.Element.Serializers.inputSelector(element);
}
return false;
},
：
：
：
case 'submit':の行をコメントアウト（または削除し）、ファイルを保存すると、Form.serializeを使ったときに入力タイプのsubmitが認識されなくなります。
