ココを理解すれば近道な「Ajaxフレームワーク」：Web 2.0で変わるWebプログラミングの常識（1/5 ページ）

AjaxをWebアプリケーションに取り入れるには、デファクトスタンダードなフレームワークを利用するのがよい。基礎を理解すると、さまざまな応用例が考えられるはずだ。

[大澤文孝，ITmedia]

　このオンライン・ムックPlus「Web 2.0で変わるWebプログラミングの常識」、第6回目となる今回は、第5回「そのサービスはAjaxフレームワークで一変できるか？」に続く、フレームワークの実装例について解説していく。冒頭よりコードを挙げた実践的な内容に入っていくため、内容が不明な場合には、最低でも第5回の最初から読んでみるとよい。

　このオンライン・ムックPlus「Web 2.0で変わるWebプログラミングの常識」の連載を読むことで、読者はAjaxの実装形態がどのようになっているのか理解することができるはずだ。

　Ajaxの元となっているものの1つであるJavaScriptは、HTMLの延長線上で記述した人も多いだろう。Ajaxの取り込みは、ここで解説していくフレームワークを使うことで飛躍的に容易なものへとなるのだ。

送受信の基礎を押さえよう

　第5回の最後には、「prototype.js」と呼ばれるJavaScriptフレームワークを用いて、Ajax.Requestオブジェクトを使ったデータ送受信の例を挙げた。サンプルコードは次の通りだ。

var myAjax = new Ajax.Request(
  'http://example.jp/calc.php',
  {
    method: 'post',
    postBody: parameter,
    onSuccess: AjaxSuccess,
    onFailure: AjaxFailed,
    onException: AjaxException
  }
);

　最初の行から続く第1引数には、接続先のURLを指定する（http://example.jp/calc.php）。そして第2引数には、接続オプションを含むオブジェクトを指定する。接続オプションには、JSON書式による無名オブジェクトを指定するのが一般的だ（表2：prototype.jsで提供されるAjax関連のオブジェクト）。

　上記のコードはどのような処理を行っているのか？　Ajaxとのかかわりなどについて触れていこう。

　4行目のmethodプロパティでは、getメソッドで呼び出すのか、それともpostメソッドで呼び出すのかを指定している。これは、HTMLでいうformタグでもおなじみの取得手順だ。ここではpostメソッドとして呼び出している。そして、postメソッドの場合には、POSTする際のボディ部をpostBodyプロパティに設定することになる。

　次いで、POSTする際のボディ部とは、PHPでいうならば、サーバサイドの「$_POST['フィールド名']」で取得できる文字列のことである。

　ちなみにgetメソッドの場合には、parametersプロパティにURLクエリとして送信する値を指定することになる。

　parametersプロパティに指定した文字列は、URLの後ろに「?value1=値1&value2=値2…」のように付与され、PHPからは、$_GET['フィールド名']として取得できるのだ。

　このため、onXXXXXXメソッドは、XMLHttpRequestオブジェクトにおける送受信が成功や失敗した時、もしくは、ステータスが変化した時などに呼び出されるコールバック関数を指定することになる。

　さらにonSuccessプロパティは、成功した時に呼び出される関数、そしてonFailureプロパティは、失敗した時に呼び出される関数を指定する。また、onExceptionプロパティは、処理中に例外が発生した場合に呼び出される関数を指定するものだ。

　すでに別の回で紹介したリスト6では、これらの3つの関数すべてを指定しているが、実際には、必要なものだけを定義すれば十分だ。つまり、「結果が正常に得られた時にだけ何か処理をしたい」という場面では、onSuccessプロパティだけを設定すればよいことを意味する。

表2■接続オプション

プロパティ	意味
method	呼び出すメソッドを指定する。getまたはpost。デフォルトはpost。
parameters	GETメソッドで呼び出す際のパラメータを指定する。
postBody	POSTメソッドで呼び出す際のボディ部を指定する。
requestHeaders	送信時に送り出す追加ヘッダを指定する。
onSuccess	呼び出しが成功した時に呼び出される関数。
onFailure	呼び出しが失敗した時に呼び出される関数。
onException	例外が発生した時に呼び出される関数。
asynchronus	非同期接続かを設定する。デフォルトはtrueであり、非同期接続を示す。
onXXXXXX	XmlHttpRequestオブジェクトのステータスが変化した時（onCompleteなど）や、特定のHTTPステータスコードを受領した時に呼び出すカスタム関数（On200、On304、On403など）を定義する。