AngularJS AJAX

AJAX 是异步的缩写 Java脚本和 XML。AJAX 主要用于更新网页的部分内容，而无需重新加载整个页面。

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

AJAX 允许网页通过后台与服务器交换少量数据来异步更新。这意味着可以更新网页的某些部分，而无需重新加载整个页面。

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

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

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

$资源
$http

我们将研究 Angular 中的“$resource”属性，它用于在高层次上与服务器交互。

当我们谈论更高层次的交互时，这意味着我们只会关心服务器提供的功能，而不是服务器在这个功能方面具体做了什么。

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

因此，从高层次上讲，我们知道这两个函数可以做什么，并且可以使用 $resource 属性调用它们。但是，我们不知道“GetEmployeeDetails”和“SetEmployeeDetails 函数”的具体细节，以及它们是如何实现的。

上面的解释说明了什么是基于 REST 的架构。

REST 被称为表述性状态转移，这是许多现代基于 Web 的系统所遵循的架构。
这意味着您可以使用 GET、POST、PUT 和 DELETE 等常规 HTTP 动词来处理基于 Web 的应用程序。

假设我们有一个 Web 应用程序，它维护着一个列表活动/会议与展会.

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

Web 应用程序可以公开如下 URL http://example/events 和
如果应用程序遵循基于 REST 的架构，我们可以使用“GET”动词来获取整个事件列表。

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

什么是 $resource 对象

Angular 中的 $resource 对象有助于与在基于 REST 的架构上为应用程序提供服务的服务器协作。

@resource 语句的基本语法以及各种功能如下所示

@resource 语句的语法

var resource Object = $resource(url);

一旦您拥有了资源对象，您就可以使用以下函数进行所需的 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 中传递的所需参数。

例如，

假设您在 get 函数中将 Topic: 'Angular' 的值作为 'param' 传递，如下所示
得到（'http://example/events' ,'{ 主题：'Angular' }')
网址 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
});

在上面的例子中，正在做以下事情

在定义 Angular 应用程序时，使用语句“DemoApp.services”创建服务，其中 DemoApp 是赋予我们 Angular 应用程序的名称。
.factory 方法用于创建此新服务的详细信息。
“Entry” 是我们为我们的服务赋予的名称，可以是您想要提供的任何名称。
在此服务中，我们正在创建一个调用 $resource API 的函数
$resource('/example/Event/:1)。$resource 函数是一种用于调用 REST 端点的服务。REST 端点通常是一个 URL。在上面的函数中，我们使用 URL (/example /Event/:1) 作为我们的 REST 端点。我们的 REST 端点 (/example /Event/:1) 表示我们的主要站点“example”上有一个事件应用程序。此事件应用程序是使用基于 REST 的架构开发的。
函数调用的结果是一个资源类对象。资源对象现在将具有可调用的函数（ 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 对象，它将返回“示例”网站公开的事件列表。下面显示了可以返回的内容的示例
```
{
{ '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 ）返回以下 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>

在上面的例子中

我们将 $http 服务添加到我们的 Controller 函数中，以便我们可以使用 $http 服务的“get”功能。
我们现在使用 HTTP 服务中的 get 函数从 URL 获取 JSON 对象 http://example /angular/getTopics.PHP
基于“响应”对象，我们创建一个回调函数，它将返回数据记录，然后将它们存储在 $scope 对象中。
然后，我们可以使用控制器中的 $scope.names 变量，并在我们的视图中使用它来相应地显示 JSON 对象。

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

Angular 还可用于从运行 MySQL 或 SQL。

这个想法是，如果你有一个 PHP 页面连接到一个 MySQL 数据库或网络连接到 MS 的页面 SQL 服务器数据库，那么您需要确保 PHP 和 ASP.Net 页面都以 JSON 格式呈现数据。

以下是如何从 SQL 中获取数据的分步过程 MySQL 使用 AngularJS 的服务器。

假设我们有一个 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”，值“Descript离子”。

<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。
我们已经看过了宁静架构只不过是 Web 应用程序基于 GET、POST、PUT 和 DELETE 等常规 HTTP 动词所公开的功能。
$resource 对象与 Angular 一起使用，在高层次上与 RESTFUL Web 应用程序进行交互，这意味着我们只调用 Web 应用程序公开的功能，而不必担心该功能是如何实现的。
我们还研究了可用于从 Web 应用程序获取数据的 $http 服务。这是可能的，因为 $http 服务可以在更详细的级别与 Web 应用程序配合使用。
由于 $http 服务的强大功能，它可以用来从 MySQL 或通过 PHP 应用程序访问 MS SQL Server。然后可以使用 ng-repeat 指令将数据呈现在表中。