AngularJS AJAX – 使用 $http 发送 AJAX 调用

作者： James Hartman James Hartman
小时 - 权威教程 更新于

AngularJS AJAX

AJAX是异步JavaScript和XML的简称。AJAX主要用于在不重新加载整个页面的情况下更新网页的某些部分。

设计这项技术的原因是为了减少客户端和服务器之间的往返次数以及用户需要某些信息时发生的整个页面刷新次数。

AJAX允许网页通过在后台交换少量数据来异步更新。这意味着可以在不重新加载整个页面的情况下更新网页的某些部分。

如今，许多现代Web应用程序实际上都遵循这种技术来刷新页面或从服务器获取数据。

使用 $resource 与服务器进行高级交互

Angular提供了两种不同的API来处理Ajax请求。它们是：

  • $resource
  • $http

我们将探讨Angular中的“$resource”属性，它用于与服务器进行高级交互。

当我们谈论高级交互时，这意味着我们只关注服务器在功能方面提供什么，而不关注服务器在细节上如何实现该功能。

例如，如果服务器托管一个维护某公司员工信息的应用程序，则服务器可能会向客户端公开诸如GetEmployeeDetails、SetEmployeeDetails等功能。

因此，从高级别来看，我们知道这两个函数可以做什么，并且可以使用 $resource 属性来调用它们。但是，我们并不确切知道“GetEmployeeDetails”和“SetEmployeeDetails”函数的细节以及它们的实现方式。

上述解释了所谓的RESTful架构。

  • REST代表表示性状态转移，它是许多现代Web应用程序遵循的一种架构。
  • 这意味着您可以使用正常的HTTP动词GET、POST、PUT和DELETE来处理基于Web的应用程序。

因此，假设我们有一个维护事件列表的Web应用程序。

如果我们想获取所有事件的列表，

  • Web应用程序可以公开一个URL，例如 **http://example/events**，并且
  • 如果应用程序遵循RESTful架构，我们可以使用“GET”动词来获取整个事件列表。

例如，如果有一个ID为1的事件，那么我们可以通过URL获取该事件的详细信息： **http://example/events/1**

$resource对象是什么？

$resource对象在Angular中用于处理遵循RESTful架构的服务器应用程序。

以下是@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’的值作为“param”传递给get函数，例如：
  • get(‘http://example/events‘ ,'{ Topic: ‘Angular’ }’)
  • URL **http://example/events?Topic=Angular** 会在get函数中被调用。

相关文章

如何使用AngularJS $resource属性

要使用$resource属性，需要遵循以下步骤：

步骤1）从Angular.JS站点下载“angular-resource.js”文件，并将其放置在应用程序中。

步骤2）应用程序模块应声明对“ngResource”模块的依赖，以便使用$resource。

在以下示例中，我们正在从我们的“DemoApp”应用程序调用“ngResource”模块。

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

步骤3）使用REST端点调用$resource()函数，如下面的示例所示。

如果您这样做，则$resource对象将能够调用REST端点公开的必要功能。

以下示例调用端点URL： **http://example/events/1**

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

在上面的示例中，正在执行以下操作：

  1. 在定义Angular应用程序时，通过语句‘DemoApp.services’创建一个服务，其中DemoApp是我们Angular应用程序的名称。
  2. 使用.factory方法创建此新服务的详细信息。
  3. ‘Entry’是我们为服务指定的名称，可以是您想要的任何名称。
  4. 在此服务中，我们正在创建一个将调用$resource API的函数
  5. $resource(‘/example/Event/:1)。$resource函数是用于调用REST端点的服务。REST端点通常是URL。在上面的函数中，我们使用URL（/example /Event/:1）作为我们的REST端点。我们的REST端点（/example /Event/:1）表示在我们的主站点“example”上有一个Event应用程序。此Event应用程序是使用RESTful架构开发的。
  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()的第二个参数是一个回调函数，在数据从服务器到达时执行。整个代码的可能输出是一个JSON对象，它将返回“example”网站公开的事件列表。下面显示了可能的返回示例。
    {
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}

使用 $http 与服务器进行低级交互

$http是另一个AngularJS服务，用于从远程服务器读取数据。从服务器读取的最常见的数据形式是JSON格式的数据。

假设我们有一个PHP页面（**http://example/angular/getTopics.PHP**），它返回以下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服务添加到Controller函数中，以便可以使用$http服务的“get”函数。
  2. 我们现在使用HTTP服务的get函数从URL **http://example /angular/getTopics.PHP** 获取JSON对象。
  3. 基于“response”对象，我们创建一个回调函数，该函数将返回数据记录，然后我们将其存储在$scope对象中。
  4. 然后，我们可以在视图中使用控制器中的$scope.names变量，以相应地显示JSON对象。

如何使用 AngularJS 从 SQL 和 MySQL 服务器获取数据

Angular还可以用于从运行MySQL或SQL的服务器获取数据。

关键是，如果您有一个连接到MySQL数据库的PHP页面或一个连接到MSSQL服务器数据库的Asp.Net页面，那么您需要确保PHP和ASP.Net页面都以JSON格式呈现数据。

以下是使用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对象，我们显示键“Name”和值“Description”。

<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的全称是异步JavaScript和XML。
  • 我们已经了解了RESTFUL架构是什么，它只是基于GET、POST、PUT和DELETE的普通HTTP动词的Web应用程序公开的功能。
  • $resource对象用于Angular，以便与RESTful Web应用程序进行高级交互，这意味着我们只调用Web应用程序公开的功能，而不关心该功能的实现方式。
  • 我们还了解了$http服务，该服务可用于从Web应用程序获取数据。这是可能的，因为$http服务可以更详细地与Web应用程序协同工作。
  • 由于$http服务的强大功能，它可以通过PHP应用程序从MySQL或MS SQL Server获取数据。然后可以使用ng-repeat指令在表中呈现数据。