Ajaxの実装

Ajaxとは？

Ajax（Asynchronous JavaScript and XML）という言葉は操作性の高いWebアプリケーションあるいはRIA（Rich Internet Application）を構築するために利用される各種の技術・テクニックを総称する言葉として2005年頃から広まり始めました。Ajaxを利用したWebアプリケーションはページの表示や動作に影響を与えることなく、サーバーからのデータをバックグララウンドで非同期で取得することができます。データの取得はXHRオブジェクト（XMLHttpRequest）を介して行われるのですが、このXHRの実装方法が各ブラウザにおいて異なっていたため、実際の利用に際しては複雑なコードが必要とされていました。その結果として、これらの差異を吸収しかつ再利用可能なプログラムを作成するための各種Ajaxフレームワークが生み出されることになったのです。Extでは、これらの一連の操作はExt.Ajaxというシングルトンオブジェクトを介して行われます。

Ext.Ajax

Ext.AjaxはExt.data.Connectionクラスを継承すると同時にシングルトンオブジェクトとしてライブラリの読み込みと同時に自動的に生成され、Ajax処理を一元的に行う「場所」として様々な機能を提供します。このシングルトンオブジェクトを利用することにより、全てのAjax処理はただ1種類のクラスを介することになり、そのクラスが提供するメソッド、イベント、そしてパラメーターへのアクセスが可能となります。

Ext.Ajaxのイベント

Ext.Ajaxが生成するリクエストは全て下記のAjaxイベントを発生させます。

• beforerequest (conn, opts)
  Ajaxリクエストが送信される前に発生
• requestcomplete (conn, response, opts)
  Ajaxリクエストが成功した場合に発生
• requestexception (conn, response, opts)
  HTTPステータスエラーがサーバーから返された場合に発生

// 例： 全てのAjaxリクエストにおいて「実行中」アイコンを表示させる
Ext.Ajax.on('beforerequest', this.showSpinner, this);
Ext.Ajax.on('requestcomplete', this.hideSpinner, this);
Ext.Ajax.on('requestexception', this.hideSpinner, this);

Ext.Ajaxのプロパティ

前述の通りExt.Ajaxはシングルトンオブジェクトであるため、プロパティの設定は初期設定のときに行うか、リクエストを送信する際に必要に応じてオーバーライドするしか方法はありません。よく利用するプロパティは以下の通りです：

• method: リクエストの際にデフォルトで利用するHTTPメソッドを指定します。このプロパティは大文字小文字を区別するため、必ず大文字で指定するようにしてください（デフォルトは"undefined"になっています。このプロパティが指定されていない場合、paramsが指定されていると"POST"、paramsがなければ"GET"になります）。
• extraParams: リクエストの際に追加のパラメーターとして送信されるプロパティを含むオブジェクトです（デフォルトは"undefined"）。セッション情報やその他の常にサーバーに渡す必要あるデータが通常ここに格納されます。
• url: リクエストを送信するサーバーのデフォルトのURLを指定します（デフォルトは"undefined"）。リクエストの送信先が常に1つのURLなのであれば、このプロパティを一度設定しておけば、リクエストの度に指定する必要がなくなります。
• defaultHeaders:リクエストの際に送信されるヘッダー情報を格納するオブジェクトです（defaultは"undefined"）

// 全てのリクエストで送信するヘッダー情報を設定
Ext.Ajax.defaultHeaders = {
    'Powered-By': 'Ext Core'
};

Ext.Ajax.requestメソッド

Ext.Ajax.requestはサーバーにリクエストを送信し、またサーバーからのデータを受信する際に呼び出されるメソッドです。サーバーからのレスポンスを処理するためsuccessとfailureの2種類のメソッド を定義することもできます。このsuccess/failureメソッドの呼び出しは非同期であることに注意してください。つまり、これらのコールバックメソッドはサーバーがレスポンスを返した際に初めて呼び出されるのですが、Webページのその他の部分についてはサーバーのレスポンスを待たずに処理を行っていると言うことになります。

Ext.Ajax.request({
   url: 'ajax_demo/sample.json',
   success: function(response, opts) {
      var obj = Ext.decode(response.responseText);
      console.dir(obj);
   },
   failure: function(response, opts) {
      console.log('server-side failure with status code ' + response.status);
   }
});

Ext.Updater

もう一つのAjaxの一般的な利用方法として、ページ全体を読み込むことなく、ページの一部を動的に更新するというものがあります。Another common use for Ajax is updating elements dynamically on a page without refreshing everything. The request method exposes an el configuration which will take the response from a request and set it to the innerHTML of an element. Developers can also use the Ext.TaskMgr to setup a recurring task to update the element periodically.

Ajaxによるフォームの送信

フォーム送信のためのコンフィグオプションを設定することによりExt.Ajax.requestを介してフォームを送信することができます。

Ext.Ajax.request({
   url: 'ajax_demo/sample.json',
   form: 'myForm',
   success: function(response, opts) {
      var obj = Ext.decode(response.responseText);
      console.dir(obj);
   },
   failure: function(response, opts) {
      console.log('server-side failure with status code ' + response.status);
   }
});