AngularJS TIPS
サーバーサイドと非同期通信するには？（$http）
AngularJSでサーバーサイドのWeb APIと非同期通信する方法を説明。また、ログの種類や、ショートカットメソッドについても紹介する。
近年のフロントエンド開発において、非同期通信を受け持つXMLHttpRequest（XHR）オブジェクトは欠かせません。JavaScript単体でできることは限られています。JavaScriptアプリでは、ページ上の操作に応じてXHRでサーバーに処理を要求し、その処理結果をページに反映させるのが基本です*1。
- *1 このようなアプリのことを、単一のページで全ての処理を完結させることから、SPA（Single Page Application）と呼びます。
$httpサービスは、このXHRオブジェクトのラッパーです。$httpサービスを利用することで、XHRオブジェクトでは冗長になりがちだった通信の手続きを、よりシンプルに記述できるようになります。
$httpサービスは、じつにさまざまな機能（パラメーター）を持っていますが、本稿ではまず、$httpサービスを利用した基本的な非同期通信の手続きについて解説します。
$httpサービスの基本
さっそく、具体的な例を見ていきましょう。以下は、テキストボックスに入力された名前に応じて、サーバーから「Hello, ●○！」のようなメッセージを受け取り、表示するサンプルです。なお、サーバーサイド（PHP）については、本稿の守備範囲を外れるため、詳しい解説は省きます。詳細は専門の記事などを参考にしてください。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<form name="myForm" novalidate>
<label for="name">名前：</label>
<input id="name" name="name" type="text" ng-model="name" />
<button ng-click="onclick()">送信</button>
</form>
<div>{{result}}</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', '$http', function($scope, $http) {
$scope.onclick = function() {
// 1サーバーに対してリクエストを送信
$http({
method: 'GET',
url: 'http.php',
params: { name: $scope.name }
})
// 2成功時の処理（ページにあいさつメッセージを反映）
.success(function(data, status, headers, config){
$scope.result = data;
})
// 3失敗時の処理（ページにエラーメッセージを反映）
.error(function(data, status, headers, config){
$scope.result = '通信失敗！';
});
};
}]);
</script>
</body>
</html>
|
|
<?php
// クエリ情報nameを取得
$r = $_GET['name'];
// クエリ情報nameが空の場合はエラー
if (empty($r)) {
header('HTTP/1.1 500 Internal Server Error');
} else {
// 空でなければ、メッセージを出力
print('Hello,'.$r.'！');
}
|
$httpサービスの基本的な構文は、以下の通りです。
［構文］$httpサービス
$http(config)
- config： 通信設定（「パラメーター名: 値」のハッシュ形式）
引数configに指定できるパラメーターにはさまざまなものがありますが、まずは、サンプルで利用しているものに絞ってまとめます。
| パラメーター名 | 概要 |
|---|---|
| method | リクエストに使用するHTTPメソッド（GET、POSTなど） |
| url | リクエスト先のパス |
| params | リクエスト時に送信するクエリ情報（ハッシュ形式） |
1であれば、「http.php?name=＜入力値＞」に対してHTTP GETでリクエストしなさい、という意味になります。
$httpサービスによる非同期通信の結果は、success／errorメソッドで処理します（23）。successメソッドは通信に成功した場合、errorメソッドは失敗した場合に、それぞれ呼び出されるコールバック関数を定義しています*2。
- *2 より具体的にはHTTPステータスが200番台の場合は成功、それ以外では失敗と見なします。
success／errorメソッドで定義したコールバック関数の引数は、以下の通りです。
- data： レスポンス本体
- status： ステータスコード
- headers： レスポンスヘッダー
- config： リクエスト時の通信設定
コールバック関数では、一般的には引数dataの値をもとに、ページの内容を更新します。この例では、成功時にあいさつメッセージを、失敗時にはエラーメッセージを、それぞれページに反映させています。
［Note］thenメソッド
成功／失敗時の処理をまとめて定義するthenメソッドもあります。thenメソッドを利用することで、リスト1は以下のように表せます。
|
$http({ …… })
.then(
function(result) {
……成功時のコード……
},
function(result) {
……失敗時のコード……
},
)
|
ショートカットメソッド
$httpサービスには、特定のHTTPメソッドに特化した、ショートカットメソッドも用意されています。
| メソッド | 対応するHTTPメソッド |
|---|---|
| $http.get | GET（取得） |
| $http.post | POST（登録） |
| $http.patch | PATCH（更新） |
| $http.delete | DELETE（削除） |
| $http.head | HEAD（ヘッダーのみ） |
これらメソッドの構文は、以下の通りです。
［構文］ショートカットメソッド
$http.method(url, config)
- method： メソッド名
- url： リクエスト先のパス
- config： 通信設定（「パラメーター名: 値」のハッシュ形式）
例えば先ほどのリスト1は、$http.getメソッドを利用することで、以下のように書き換えが可能です。コード量が劇的に減るわけではありませんが、HTTPメソッドとリクエストパスが先頭で明示されるので、見た目の読みやすさが改善します。
|
$http.get(
'http.php',{
params: { name: $scope.name }
}
)
.success(function(data, status, headers, config){
$scope.result = data;
})
.error(function(data, status, headers, config){
$scope.result = '通信失敗！';
});
|
API：$http カテゴリ：ng（コアモジュール） > service（サービス）
※以下では、本稿の前後を合わせて5回分（第33回～第37回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
33. ng-repeat要素でさまざまな繰り返しを表現するには？（ng-repeat）
ng-repeatディレクティブの応用的な使い方として、「重複した値を含んだ配列」「ハッシュ（連想配列）」「複数の要素セット」の内容を順に処理して出力する方法を説明。
35. 【現在、表示中】≫ サーバーサイドと非同期通信するには？（$http）
AngularJSでサーバーサイドのWeb APIと非同期通信する方法を説明。また、ログの種類や、ショートカットメソッドについても紹介する。
36. サーバーサイドとHTTP POSTで非同期通信するには？（$http）
AngularJSでHTTP POSTで非同期通信する方法を説明。また、送信データをJSONではなくjQuery形式にする方法や、PHPでJSONデータをデコードする方法も紹介する。
37. JSON形式のWeb APIにアクセスするには？（$http）
Web APIと通信する際に問題となるクロスドメイン制約を回避するために使われるテクニック「JSONP」を、AngularJSで実現するための基本的な方法を説明する。
