Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

サーバーサイドと非同期通信するには?($http)

2015年12月7日

AngularJSでサーバーサイドのWeb APIと非同期通信する方法を説明。また、ログの種類や、ショートカットメソッドについても紹介する。

  • このエントリーをはてなブックマークに追加

 近年のフロントエンド開発において、非同期通信を受け持つXMLHttpRequest(XHR)オブジェクトは欠かせません。JavaScript単体でできることは限られています。JavaScriptアプリでは、ページ上の操作に応じてXHRでサーバーに処理を要求し、その処理結果をページに反映させるのが基本です*1

  • *1 このようなアプリのことを、単一のページで全ての処理を完結させることから、SPA(Single Page Application)と呼びます。

 $httpサービスは、このXHRオブジェクトのラッパーです。$httpサービスを利用することで、XHRオブジェクトでは冗長になりがちだった通信の手続きを、よりシンプルに記述できるようになります。

 $httpサービスは、じつにさまざまな機能(パラメーター)を持っていますが、本稿ではまず、$httpサービスを利用した基本的な非同期通信の手続きについて解説します。

$httpサービスの基本

 さっそく、具体的な例を見ていきましょう。以下は、テキストボックスに入力された名前に応じて、サーバーから「Hello, ●○!」のようなメッセージを受け取り、表示するサンプルです。なお、サーバーサイド(PHP)については、本稿の守備範囲を外れるため、詳しい解説は省きます。詳細は専門の記事などを参考にしてください。

HTML
<!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>
リスト1 $httpサービスでサーバーサイドに問い合わせするコード(http.html)
PHP
<?php
// クエリ情報nameを取得
$r = $_GET['name'];
// クエリ情報nameが空の場合はエラー
if (empty($r)) {
  header('HTTP/1.1 500 Internal Server Error');
} else {
  // 空でなければ、メッセージを出力
  print('Hello,'.$r.'!');
}
リスト2 クライアントからの要求を受けてメッセージを応答するコード(http.php)
入力された名前に応じてメッセージを生成
入力された名前に応じてメッセージを生成

 $httpサービスの基本的な構文は、以下の通りです。

[構文]$httpサービス

$http(config)

  • config: 通信設定(「パラメーター名: 値」のハッシュ形式)

 引数configに指定できるパラメーターにはさまざまなものがありますが、まずは、サンプルで利用しているものに絞ってまとめます。

パラメーター名概要
method リクエストに使用するHTTPメソッド(GET、POSTなど)
url リクエスト先のパス
params リクエスト時に送信するクエリ情報(ハッシュ形式)
$httpサービスの通信設定

 1であれば、「http.php?name=<入力値>」に対してHTTP GETでリクエストしなさい、という意味になります。

 $httpサービスによる非同期通信の結果は、successerrorメソッドで処理します(23)。successメソッドは通信に成功した場合、errorメソッドは失敗した場合に、それぞれ呼び出されるコールバック関数を定義しています*2

  • *2 より具体的にはHTTPステータスが200番台の場合は成功、それ以外では失敗と見なします。

 successerrorメソッドで定義したコールバック関数の引数は、以下の通りです。

  • data: レスポンス本体
  • status: ステータスコード
  • headers: レスポンスヘッダー
  • config: リクエスト時の通信設定

 コールバック関数では、一般的には引数dataの値をもとに、ページの内容を更新します。この例では、成功時にあいさつメッセージを、失敗時にはエラーメッセージを、それぞれページに反映させています。

[Note]thenメソッド

 成功/失敗時の処理をまとめて定義するthenメソッドもあります。thenメソッドを利用することで、リスト1は以下のように表せます。

JavaScript
$http({ …… })
  .then(
    function(result) {
      ……成功時のコード……
    },
    function(result) {
      ……失敗時のコード……
    },
  )
リスト3 thenメソッドでリスト1を書き換えたコード(http.htmlより抜粋)

ショートカットメソッド

 $httpサービスには、特定のHTTPメソッドに特化した、ショートカットメソッドも用意されています。

メソッド対応するHTTPメソッド
$http.get GET(取得)
$http.post POST(登録)
$http.patch PATCH(更新)
$http.delete DELETE(削除)
$http.head HEAD(ヘッダーのみ)
$httpサービスのショートカットメソッド

 これらメソッドの構文は、以下の通りです。

[構文]ショートカットメソッド

$http.method(url, config)

  • method: メソッド名
  • url: リクエスト先のパス
  • config: 通信設定(「パラメーター名: 値」のハッシュ形式)

 例えば先ほどのリスト1は、$http.getメソッドを利用することで、以下のように書き換えが可能です。コード量が劇的に減るわけではありませんが、HTTPメソッドとリクエストパスが先頭で明示されるので、見た目の読みやすさが改善します。

JavaScript
$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 = '通信失敗!';
});
リスト4 $http.getメソッドでリスト1を書き換えたコード(http_get.html)
処理対象:非同期通信 カテゴリ:サービス
API:$http カテゴリ:ng(コアモジュール) > service(サービス)

※以下では、本稿の前後を合わせて5回分(第33回~第37回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
33. ng-repeat要素でさまざまな繰り返しを表現するには?(ng-repeat)

ng-repeatディレクティブの応用的な使い方として、「重複した値を含んだ配列」「ハッシュ(連想配列)」「複数の要素セット」の内容を順に処理して出力する方法を説明。

AngularJS TIPS
34. ログをコンソールに出力するには?($log)

AngularJSで開発者ツールのコンソールにログを出力する方法を説明。また、ログの種類や、デバッグログの表示/非表示の切り替え方法も紹介する。

AngularJS TIPS
35. 【現在、表示中】≫ サーバーサイドと非同期通信するには?($http)

AngularJSでサーバーサイドのWeb APIと非同期通信する方法を説明。また、ログの種類や、ショートカットメソッドについても紹介する。

AngularJS TIPS
36. サーバーサイドとHTTP POSTで非同期通信するには?($http)

AngularJSでHTTP POSTで非同期通信する方法を説明。また、送信データをJSONではなくjQuery形式にする方法や、PHPでJSONデータをデコードする方法も紹介する。

AngularJS TIPS
37. JSON形式のWeb APIにアクセスするには?($http)

Web APIと通信する際に問題となるクロスドメイン制約を回避するために使われるテクニック「JSONP」を、AngularJSで実現するための基本的な方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!