AngularJS AJAX – $http を使用して AJAX 呼び出しを行う

AngularJS AJAX

AJAX は A の短縮形ですsync重要な JavaScript と XML。 AJAX は主に、ページ全体をリロードすることなく、Web ページの一部を更新するために設計されました。

このテクノロジーを設計した理由は、クライアントとサーバーの間で行われる往復回数と、ユーザーが特定の情報を必要とするたびに発生していたページ全体の更新回数を削減することでした。

AJAX により Web ページの更新が可能になりました。syncバックグラウンドでサーバーと少量のデータを交換することにより、高速に実行されます。これは、ページ全体をリロードしなくても、Web ページの一部を更新できることを意味します。

最近の Web アプリケーションの多くは、実際にこの手法に従ってページを更新したり、サーバーからデータを取得したりしています。

$resource を使用したサーバーとの高レベルの対話

Angular は、Ajax リクエストを処理するために XNUMX つの異なる API を提供します。 彼らです

  • $リソース
  • $http

Angular の「$resource」プロパティを見ていきます。これは、高レベルでサーバーと対話するために使用されます。

より高いレベルでの対話について話すとき、それは、サーバーがこの機能に関して詳細に何を行うかではなく、サーバーが機能に関して何を提供するかについてのみ気にすることを意味します。

たとえば、サーバーが特定の会社の従業員情報を管理するアプリケーションをホストしていた場合、サーバーは GetEmployeeDe などの機能をクライアントに公開する可能性があります。tails、従業員Deを設定tails, etc.

したがって、大まかに言えば、これら XNUMX つの関数で何ができるかはわかっており、$resource プロパティを使用して呼び出すことができます。しかし、その場合は正確にはわかりませんtails 「GetEmployeeDe」のtails” と “SetEmployeeDe”tails 機能」とその実装方法について説明します。

上記の説明は、いわゆる REST ベースについて説明しています。 archi構造。

  • REST は Representational State Transfer として知られています。 archiこの構造は、多くの最新の Web ベース システムで採用されています。
  • これは、通常の HTTP 動詞の GET、POST、PUT、および DELETE を使用して Web ベースのアプリケーションを操作できることを意味します。

それでは、次のリストを保持する Web アプリケーションがあると仮定しましょう。 イベント .

すべてのイベントのリストを取得したい場合は、

  • Web アプリケーションは次のような URL を公開できます。 http://example/events >
  • アプリケーションが次の場合、「GET」動詞を使用してイベントのリスト全体を取得できます。wing RESTベースの archi構造。

したがって、たとえば、ID が 1 のイベントがあった場合、de を取得できます。tails このイベントのURLを介して。 http://example/events/1

$resource オブジェクトとは何ですか

Angular の $resource オブジェクトは、REST ベースでアプリケーションにサービスを提供するサーバーと連携するのに役立ちます。 archi構造。

@resource ステートメントの基本構文とさまざまな関数を以下に示します。

@resource ステートメントの構文

var resource Object = $resource(url);

resourceObject を手元に用意したら、以下の関数を使用して必要な REST 呼び出しを行うことができます。

1. get([params], [success], [error]) – これは、標準の GET 呼び出しを行うために使用できます。

2. save([params], postData, [success], [error]) – これは標準の POST 呼び出しを行うために使用できます。

3. query([params], [success], [error]) – これは標準の GET 呼び出しを行うために使用できますが、応答の一部として配列が返されます。

4.remove([params], postData, [success], [error]) – これは標準の DELETE 呼び出しを行うために使用できます。

以下に示すすべての関数では、「params」パラメータを使用して、URL で渡す必要がある必須パラメータを提供できます。

たとえば、

  • Topic: 'Angular' の値を get 関数の 'param' として渡すとします。
  • 得る('http://example/events' ,'{ トピック: 'Angular' }')
  • URLは http://example/events?Topic=Angular get 関数の一部として呼び出されます。

AngularJS $resource プロパティの使用方法

$resource プロパティを使用するには、次のようにします。wing 次の手順に従う必要があります。

ステップ1) ファイル「angular-resource.js」は、Angular.JS サイトからダウンロードし、アプリケーションに配置する必要があります。

ステップ2) $resource を使用するには、アプリケーション モジュールで「ngResource」モジュールへの依存関係を宣言する必要があります。

続きましてwing たとえば、「DemoApp」アプリケーションから「ngResource」モジュールを呼び出しています。

angular.module(DemoApp,['ngResource']); //DemoApp is our main module

ステップ3) 以下に示すように、REST エンドポイントで $resource() 関数を呼び出します。wing 例。

これを行うと、$resource オブジェクトは、REST エンドポイントによって公開される必要な機能を呼び出すことができるようになります。

次のことwing 例では、エンドポイント URL を呼び出します。 http://example/events/1

angular.module('DemoApp.services').factory('Entry', function($resource) 
{
     return $resource('/example/Event/:1); // Note the full endpoint address
});

上の例では次のようになりますwing 物事は行われています

  1. Angular アプリケーションを定義するとき、サービスはステートメント「DemoApp.services」を使用して作成されます。DemoApp は Angular アプリケーションに与えられた名前です。
  2. .factory メソッドは、de を作成するために使用されます。tails この新しいサービスの。
  3. 「Entry」はサービスに付ける名前で、任意の名前を付けることができます。
  4. このサービスでは、$resource API を呼び出す関数を作成しています。
  5. $resource('/example/Event/:1)。$resource 関数は、REST エンドポイントを呼び出すために使用されるサービスです。通常、REST エンドポイントは URL です。上記の関数では、REST エンドポイントとして URL (/example /Event/:1) を使用しています。 REST エンドポイント(/example /Event/:1) は、メイン サイトの「example」にイベント アプリケーションがあることを示します。このイベント アプリケーションは、REST ベースのソフトウェアを使用して開発されています。 archi構造。
  6. 関数呼び出しの結果は、リソース クラス オブジェクトです。 リソース オブジェクトには、呼び出すことができる関数 ( get() 、 query() 、 save() 、remove()、delete() ) が含まれるようになります。

ステップ4) これで、上記の手順で返されたメソッド ( get() 、 query() 、 save() 、remove()、delete() ) をコントローラーで使用できるようになりました。

以下のコード スニペットでは、例として get() 関数を使用しています。

get() 関数を使用できるコードを見てみましょう。

angular.module('DemoApp.controllers',[]);
angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {
  var obj = MyFunction.get({ 1: $scope.id }, function() {
    console.log(obj);
  });

上記のステップでは、

  • 上記のスニペットの get() 関数は、/example/Event/:1 に GET リクエストを発行します。
  • URL のパラメータ:1 は $scope.id に置き換えられます。
  • get() 関数は、実際のデータがサーバーから送信されると自動的に設定される空のオブジェクトを返します。
  • get() の XNUMX 番目の引数は、サーバーからデータが到着したときに実行されるコールバックです。 コード全体の可能な出力は、「サンプル」Web サイトから公開されたイベントのリストを返す JSON オブジェクトです。返されるものの例を以下に示します。
    {
    { 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
    { 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
    { 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}
    
    }

$http との低レベルのサーバー対話

$http は、リモート サーバーからデータを読み取るために使用される別の Angular JS サービスです。 サーバーから読み取られるデータの最も一般的な形式は、JSON 形式のデータです。

あると仮定しましょう。 PHP ページ( http://example/angular/getTopics.PHP )folloを返しますwing JSONデータ

"Topics": [
  {
    "Name" : "Controllers",
    "Description" : "Controllers in action"
  },
  {
    "Name" : "Models",
    "Description" : "Binding data using Models"
  },
  {
    "Name" : "Directives",
    "Description" : "Using directives in Angular"
  }
]

$http を使用した AngularJS コードを見てみましょう。これはサーバーから上記のデータを取得するために使用できます。

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example/angular/getTopics.PHP")
    .then(function(response) 
{
$scope.names = response.data.records;});
});
</script>

上記の例では

  1. $http サービスの「get」関数を使用できるように、$http サービスをコントローラー関数に追加しています。
  2. ここでは、HTTP サービスの get 関数を使用して、URL から JSON オブジェクトを取得しています。 http://example /angular/getTopics.PHP
  3. 「応答」オブジェクトに基づいて、データ レコードを返すコールバック関数を作成し、その後それらを $scope オブジェクトに保存します。
  4. 次に、コントローラーから $scope.names 変数を使用し、それをビューで使用して、それに応じて JSON オブジェクトを表示します。

AngularJS を使用して SQL および MySQL サーバーからデータをフェッチする方法

Angular を使用して、MySQL または SQL を実行しているサーバーからデータをフェッチすることもできます。

考え方としては、MySQL データベースに接続する PHP ページがある場合、または Asp.Net MSに接続するページ SQL サーバー データベースを使用する場合は、PHP と ASP.Net ページの両方でデータが JSON 形式でレンダリングされることを確認する必要があります。

Following AngularJS を使用して SQL および MySQL サーバーからデータを取得する方法に関するステップバイステップのプロセスです。

PHP サイト (http://example /angular/getTopics.PHP) MySQL または SQL データベースからデータを提供します。

ステップ1) MySQL データベースからデータを取得する
最初のステップは、PHP ページが MySQL データベースからデータを取得し、JSON 形式でデータを提供することを確認することです。

ステップ2) $http サービスを使用して JSON データを取得する
$http サービスを使用して JSON データを取得するには、上記と同様のコードを作成します。

サーバーから上記のデータを取得するために使用できる $http を使用した AngularJS コードを見てみましょう。

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example /angular/getTopics.PHP")
    .then(function(response) 
{
	$scope.topics = response.data.records;});
});
</script>

ステップ3) を使用してビュー内でデータをレンダリングします。 ng-repeat ディレクティブ

以下では、ng-repeat ディレクティブを使用して、$http サービスの「get」メソッドによって返された JSON オブジェクト内の各キーと値のペアを調べます。

各 JSON オブジェクトについて、キーが「名前」、値が「説明」を表示しています。

<div ng-app="myApp" ng-controller="AngularCtrl"> 
<table>
  <tr ng-repeat="x in topics">
    <td>{{ x.Name }}</td>
    <td>{{ x.Description }}</td>
  </tr>
</table>
</div>

まとめ

  • AJAX の完全な形式は Async大げさな JavaScriptを およびXML。
  • 私たちはそれを調べてみました。 安らぎ archiこれは、通常の HTTP 動詞である GET、POST、PUT、DELETE に基づいて Web アプリケーションによって公開される機能に他なりません。
  • $resource オブジェクトは、RESTFUL Web アプリケーションと高レベルで対話するために Angular で使用されます。つまり、Web アプリケーションによって公開される機能のみを呼び出しますが、機能の実装方法は気にしません。
  • Web アプリケーションからデータを取得するために使用できる $http サービスについても調べました。 これが可能なのは、$http サービスが Web アプリケーションをより詳細なレベルで操作できるためです。
  • $http サービスの機能により、これを使用して、PHP アプリケーション経由で MySQL または MS SQL Server からデータを取得できます。 その後、ng-repeat ディレクティブを使用してデータをテーブルにレンダリングできます。