Ajax通信
Ajaxとは
Ajaxとは、Asynchronous JavaScript + XMLの略で、"エイジャックス"と読みます。非同期でJavaScriptでサーバと通信をする方法のことです。
同期と非同期
Ajaxの"A"は"Asynchronous"で、"非同期"を表します。クライアントとサーバとの通信には「同期」と「非同期」の二種類があります。
同期通信の場合、サーバにリクエストを送ってからレスポンスが返ってくるまでブラウザの操作や処理の実行ができません。
非同期通信の場合、リクエストを送った後、レスポンスが返ってくるのを待たずに操作や処理を実行できます。
Ajaxでは非同期通信も同期通信も可能です。
- 同期通信
- 非同期通信
hifive、jQueryを用いたAjax通信
jQueryの場合はjQuery.ajax()( $.ajax() )、hifiveを使用している場合はh5.ajax()でAjax通信を行うことができます。どちらも基本的には同じです。h5.ajaxは内部でjQuery.ajaxを使用しています。
JSDoc: h5.ajax
jQuery.ajax() | jQuery API Documentation
ajaxメソッドは以下のように使用します
// urlへ非同期でリクエストを送る。urlは絶対パスでも相対パスでもOK
h5.ajax(url);
// 設定オブジェクトを第２引数に指定
var settings = {/* 後ほど説明します */};
h5.ajax(url, settings);
// 設定オブジェクトにurlを持たせて第１引数に渡す
settings.url = url;
h5.ajax(settings);
設定オブジェクト
ajax()メソッドには設定オブジェクトを渡すことができます。
$.ajaxSettingsで設定されているものと、ajax()の引数に渡したものをマージしたものが使用されます(引数で渡したものが優先されます)。
$.ajaxSettingsはただのオブジェクトであり、編集することがでます。また、$.ajaxSetup()を使って設定をすることもできます。
$.ajaxSetup({cache:false});
// $.ajaxSettings.chace = false; と書いても同じ
// デフォルトの設定が使用されるのでキャッシュを使わないでアクセスされる
$.ajax(url);
以下、設定オブジェクトの各プロパティについての簡単な説明です。jQuery1.10.2のAPIを元に記述しています。詳細はjQuery.ajax() | jQuery API Documentation(英語)をご覧ください。
| プロパティ名 | 型 | 説明 |
|---|---|---|
| accepts | Object | リクエストヘッダのAcceptをオブジェクトで指定します。 |
| async | Boolean | 非同期でアクセスするかどうかを指定します。デフォルトはtrueで、falseを設定した場合は同期になります |
| beforeSend | Function | リクエストを送る前に実行する処理を関数で指定します。 |
| cache | Boolean | キャッシュがあるときに使用するかどうかを指定します。デフォルトはtrueですが、dataTypeがscriptまたはjsonpの場合はデフォルトはfalseです |
| complete | Function | Ajax通信が成功または失敗した時に実行する関数を指定します |
| contents | Object | レスポンスをどうパースするかをオブジェクトで指定します。dataTypeをキーに、正規表現を値にもつオブジェクトを指定し、レスポンスのContent-Typeが正規表現にマッチした時にjQueryがdataTypeに応じてレスポンスをパースします |
| contentType | String | サーバにデータを送るときのContent-Typeを指定します。デフォルトは'application/x-www-form-urlencoded; charset=UTF-8'です |
| context | Object | コールバック関数内で'this'として使用するオブジェクトを指定できます |
| converters | Object | dataTypeに対応するレスポンスのパース方法ををオブジェクトで指定します |
| crossDomain | Boolean | 同一ドメイン上でクロスドメインリクエストを強制したい場合はtrueに指定します |
| data | Object|String | サーバへ送信するデータを指定します |
| dataFilter | Function | サーバからの返ってきた値をフィルタリングする関数を指定します |
| dataType | String | 戻り値の型を指定します。指定しない場合はjQueryが推測します。 |
| error | Function | 失敗時に実行する関数を指定します |
| global | Boolean | グローバルAjaxイベント('ajaxStart'や'ajaxStop')をあげるかどうかを指定します。デフォルトはtrueです。 |
| headers | Object | リクエストヘッダに追加する値をオブジェクトで指定します。 |
| ifModified | Boolean | 前回の通信から変更がある場合のみ成功ステータスを返します。デフォルトはfalseです |
| isLocal | Boolean | trueを指定すると処理をローカルのものとして扱います |
| jsonp | String | JSONPリクエスト中のコールバック関数名を書き換えます |
| jsonpCallback | String|Function | JSONPリクエストのコールバック関数名を指定します。指定しない場合はjQueryが生成するランダムな名前を使用します |
| mineType | String | MINEタイプを上書きます |
| password | String | 認証が必要なHTTP通信時にパスワードを指定します |
| processData | Boolean | dataに指定したオブジェクトをクエリ文字列に変換するかどうかを指定します。デフォルトはtrueです。 |
| scriptCharset | String | dataTypeがjsonpもしくはscriptの時に読み込むスクリプトの文字コードを指定します |
| statusCode | Object | ステータスコードごとに実行する関数をオブジェクトで指定します |
| success | Function | 成功時のコールバック関数を指定します |
| timeout | Number | タイムアウトとして扱う時間をミリ秒で設定します |
| traditional | Boolean | trueを指定すると、パラメータを古い形式でシリアライズします |
| type | String | リクエストのタイプを"POST"または"GET"で指定します。デフォルトは"GET"です |
| url | String | クエストを送るURLを指定します。第１引数にURLを指定した場合はそちらが優先されます |
| username | String | 認証が必要なHTTP通信時のユーザ名を指定します |
| xhr | Function | XMLHttpRequestObjectを生成するためのコールバック関数を指定します。デフォルトでは、IEの場合はActiveXObject、他のブラウザではXMLHttpRequestを使用します |
| xhrFields | Object | XHRオブジェクトに追加で設定するキーと値をオブジェクトで設定します |
非同期通信のコールバック
設定オブジェクトのsuccess、error、completeを使って登録することができます
success: function(data, textStatus, jqXHR){
// 成功時の処理
},
error: function(jqXHR, textStatus, errorThrown){
// 失敗時の処理
},
complete: function(jqXHR, textStatus){
// 終了時(成功、失敗)の処理
}
});
またこの方法以外に、ajax()メソッドの戻り値を使ってコールバックを登録することもできます。
jqXHRとプロミスオブジェクト
ajax()メソッドはjqXHRオブジェクトというオブジェクトを返します。jqXHRはプロミスオブジェクトのメソッドを持ちます。
プロミスオブジェクトとは、非同期処理の状態を管理するオブジェクトです。非同期処理が終了すると、プロミスオブジェクトのメソッドを使って登録されたコールバック関数を実行します。
つまり、プロミスオブジェクトを使ってにコールバック関数を登録しておくと、そのプロミスオブジェクトに紐づいている非同期処理が終了した後に実行させることができます。
ajax()の戻り値であるjqXHRは、Ajaxを使った非同期通信処理と紐づいたプロミスオブジェクトとして振る舞い、コールバックを使ってAjax非同期通信が終了した後に実行したい処理を記述することができます。
成功時に実行したいコールバックはdone()、失敗時に実行したいコールバックはfail()、成功失敗に関わらず非同期処理が終了したら必ず実行してほしいコールバックはalways()メソッドを使ってコールバックを登録できます。
var promise = $.ajax(url);
promise.done(function(data, textStatus, jqXHR){
// 成功時の処理
});
promise.fail(function(jqXHR, textStatus, errorThrown){
// 失敗時の処理
});
promise.always(function(/* 引数は成功時はdone、失敗時はfailに登録されたコールバックと同じ */){
// 終了時(成功、失敗)の処理
});
非同期処理の詳細については、自習室 非同期処理(未稿)をご覧ください。
hifiveでAjax通信を行う
Ajax通信は非同期で通信できるため、データが必要になったときにajaxメソッドを呼んでおき、レスポンスが返ってくるまでの間には他の処理を実行できます。レスポンスが返ってきたときに行う処理はコールバックで登録しておきます。
例えば、コントローラバインド時にサーバからデータを取得して、データを表示するようなコントローラを作成するとします。
Ajax通信の処理はコントローラではなく、ロジックに記述するのが望ましいです。Ajax通信などのデータ処理はコントローラに記述するビュー操作とは切り離しておくべきです。
ソースコードの記述例です。
var ajaxSampleLogic = {
__name: 'sample.AjaxSampleLogic',
getData: function() {
// jqXHRオブジェクトを返す
return h5.ajax('./data');
}
};
h5.core.expose(ajaxSampleLogic);
})();
(function() {
var sampleController = {
__name: 'sample.SampleController',
__templates: 'sample.ejs',
_ajaxSampleLogic: sample.AjaxSampleLogic,
__ready: function() {
// jqXHRに対してdoneハンドラを登録
// 成功したらthis._showDataを実行する
// _showData内のthisをコントローラにしたいので、this.own()で包む
this._ajaxSampleLogic.getData().done(this.own(this._showData));
},
_showData: function(data){
// dataを表示
this.view.update(this.rootElement, 'sampleTemp', data);
}
};
h5.core.expose(sampleController);
})();