対象読者
- jQueryなどを使っている開発者
- JavaScriptを使った複数人でのプロジェクトに参加している方
- JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方
必要な環境
この記事では、AngularJSを使用し、Chrome（39.0）、IE11、Firefox（34.0）、Safari（8.0.2）の環境にて確認を行っています。
$httpサービスを使う
Ajaxでサーバと連携する部分である、listメソッド、addメソッド、removeメソッドを、$httpサービスを使って実装します。
$httpサービスの使い方
$httpサービスは、リスト1のようにjQueryのajaxメソッドと多少パラメータの名称が異なりますが、使い方はほぼ同様です。ただし、送信されるデータはjson形式のデータになります。
$http({
url : 'url',
method : 'POST',
data : {
// 送信データ
}
})
.success(function(data,status,headers,config,statusText){
// 成功したときの処理
})
.error(function(data,status,headers,config,statusText){
// 失敗したときの処理
});
| 引数のキー値 | 説明 |
|---|---|
| method | HTTPのメソッド。GETやPOSTのように文字列で指定 |
| url | リクエストを投げる先のURL |
| params | リクエストパラメータ |
| data | 送信するデータ。デフォルトで送信されるデータはapplication/json形式になる。 |
Ajaxの結果は、success()もしくは、error()メソッドで取得可能です。これらにはコールバック形式の関数を指定します。また、この関数には、表2のような引数をして実際の結果を取得します。
| 引数 | 説明 |
|---|---|
| 第一引数（data） | レスポンス結果のデータ |
| 第二引数（status） | HTTPのステータスコード（数値） |
| 第三引数（headers） | レスポンスヘッダ。例）headers("Content-Type"); のように取得する |
| 第四引数（config） | リクエストで使用した設定オブジェクト |
| 第五引数（statusText） | HTTPのステータス（テキスト） |
サーバ側の処理
サーバ側の処理はPHPで記述してあり、一覧データの取得の場合には表3のようなリクエストを送信すると、リスト2のような結果が取得できるようにしています。methodというクエリパラメータによって処理を切り分けるようにしてあります。PHPのコードについては説明しませんので、興味がある場合にはサンプルコード内のソースを参照してください。
| URL | rest.php?method=list |
|---|---|
| メソッド | GET |
{"data":[
{"id":"6ddd35d0f42ffd","title":"タスク表題1","memo":"タスクのメモ"}
]}
$httpを使ったタスクデータの管理
実際に$httpを使って一覧データを取得するコードはリスト3のようになります。
p.list = function(callback){ // （1）結果を受け取るコールバックを指定
this.$http({
method : 'GET',
url : 'rest.php',
params : {
method: 'list'
}
}).success(function(response){
callback.call(this,response.data); // （2）成功時にはコールバックに一覧データを設定する
});
};
Ajaxの処理は非同期の為に、引数にコールバックを指定し（1）、結果の取得が成功したらそのコールバック関数に値を設定します（2）。同様の手順で、タスクの追加メソッドをリスト4のように実装します。
p.add = function(item, callback){ // （1）追加するタスクデータを引数に指定
var $scope = this.$scope;
this.$http({ // （2）Ajaxを実行する
method : 'POST',
url : 'rest.php',
data : {
method : 'add',
title : item.title,
memo : item.memo
}
}).success(function(response){
$scope.$broadcast('changeItems'); // （3）追加して、タスクデータ一覧が変わったことをイベントとして通知
callback.call(this,response.data); // （4）成功した結果をコールバック関数を使って通知
});
};
（1）ではそれぞれの対象のタスクデータと実行結果を受け取るコールバック関数を指定します。（2）ではサーバに対してAjaxでリクエストを投げます。（3）では一覧データが変わったことをイベントとして通知します。また、（4）でコントローラ側から指定されたコールバック関数に取得した結果を設定し実行します。
サービスの実装の切り替え
前回のサンプルではArrayItems.jsを使用していた部分をリスト5のようにAjaxItems.jsに切り替えます。あらかじめ、非同期処理を想定してインターフェースをそろえてありますので、コントローラ側の実装を一切変える必要が無く簡単に処理が切り替えられます
module.service('Items',function($rootScope,$http){ // （1）新たに$httpを追加
return new app.AjaxItems($rootScope,$http); // （2）今回作成したものに変更
//return new app.ArrayItems($rootScope); // （3）前回の指定（使わないのでコメント化）
});
