AngularJS AJAX – выполнение AJAX-вызова с использованием $http

Автор: Джеймс Хартман Джеймс Хартман
Hours обновлено

AngularJS AJAX

AJAX — это краткая форма асинхронного JavaСкрипт и XML. AJAX был в первую очередь разработан для обновления частей веб-страницы без перезагрузки всей страницы.

Причиной разработки этой технологии было сокращение количества обращений между клиентом и сервером, а также количества обновлений всей страницы, которые раньше происходили всякий раз, когда пользователю требовалась определенная информация.

AJAX позволял асинхронно обновлять веб-страницы путем скрытого обмена небольшими объемами данных с сервером. Это означало, что можно было обновлять части веб-страницы без перезагрузки всей страницы.

Многие современные веб-приложения фактически используют этот метод для обновления страницы или получения данных с сервера.

Высокоуровневое взаимодействие с серверами с использованием $resource

Angular предоставляет два разных API для обработки запросов Ajax. Они есть

  • $ ресурс
  • $ http

Мы рассмотрим свойство $resource в Angular, которое используется для взаимодействия с серверами на высоком уровне.

Когда мы говорим о взаимодействии на более высоком уровне, это означает, что нас будет волновать только то, что сервер может предложить в отношении функциональности, а не то, что именно сервер делает в деталях в отношении этой функциональности.

Например, если на сервере размещалось приложение, которое хранит информацию о сотрудниках определенной компании, сервер может предоставлять клиентам такие функции, как GetEmployeeDetails, SetEmployeeDetails и т. д.

Итак, на высоком уровне мы знаем, что могут делать эти две функции, и можем вызывать их, используя свойство $resource. Но тогда мы не знаем точно деталей функций «GetEmployeeDetails» и «SetEmployeeDetails», а также того, как они реализованы.

Приведенное выше объяснение объясняет то, что известно как архитектура на основе REST.

  • REST известен как передача репрезентативного состояния — архитектура, используемая во многих современных веб-системах.
  • Это означает, что вы можете использовать обычные HTTP-команды GET, POST, PUT и DELETE для работы с веб-приложением.

Итак, предположим, у нас есть веб-приложение, которое поддерживает список Мероприятия.

Если бы мы хотели получить список всех событий,

  • Веб-приложение может предоставить URL-адрес, например http://example/events и
  • Мы можем использовать команду «GET», чтобы получить весь список событий, если приложение использует архитектуру на основе REST.

Например, если произошло событие с идентификатором 1, мы можем получить подробную информацию об этом событии через URL-адрес. http://example/events/1

Что такое объект $resource

Объект $resource в Angular помогает работать с серверами, которые обслуживают приложения в архитектуре на основе REST.

Основной синтаксис оператора @resource вместе с различными функциями приведен ниже.

Синтаксис оператора @resource

var resource Object = $resource(url);

Получив под рукой ресурсObject, вы можете использовать приведенные ниже функции для выполнения необходимых вызовов 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 как
  • получать('http://example/events' ,'{ Тема: 'Angular' }')
  • URL http://example/events?Topic=Angular вызывается как часть функции get.

СТАТЬИ ПО ТЕМЕ

Как использовать свойство $resource AngularJS

Чтобы использовать свойство $resource, необходимо выполнить следующие шаги:

Шаг 1) Файл angular-resource.js необходимо скачать с сайта Angular.JS и поместить в приложение.

Шаг 2) Модуль приложения должен объявить зависимость от модуля «ngResource», чтобы использовать $resource.

В следующем примере мы вызываем модуль «ngResource» из нашего приложения «DemoApp».

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

Шаг 3) Вызов функции $resource() с конечной точкой REST, как показано в следующем примере.

Если вы это сделаете, то объект $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. «Вход» — это имя, которое мы даем нашему сервису. Это может быть любое имя, которое вы хотите указать.
  4. В этом сервисе мы создаем функцию, которая будет вызывать API $resource.
  5. $resource('/example/Event/:1). Функция $resource — это служба, которая используется для вызова конечной точки REST. Конечная точка REST обычно представляет собой URL-адрес. В приведенной выше функции мы используем URL-адрес (/example/Event/:1) в качестве конечной точки REST. Наша конечная точка REST(/example /Event/:1) означает, что на нашем основном сайте «example» находится приложение Event. Это приложение Event разработано с использованием архитектуры на основе REST.
  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() в приведенном выше фрагменте отправляет запрос GET к /example/Event/:1.
  • Параметр:1 в URL-адресе заменяется на $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"
  }
]

Давайте посмотрим на код AngularJS, использующий $http, который можно использовать для получения вышеуказанных данных с сервера.

<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. Теперь мы используем функцию get из службы HTTP, чтобы получить объекты JSON из URL-адреса. http://example /angular/getTopics.PHP
  3. На основе объекта «ответ» мы создаем функцию обратного вызова, которая будет возвращать записи данных, а затем сохраняем их в объекте $scope.
  4. Затем мы можем использовать переменную $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) Получите данные JSON с помощью службы $http.
Напишите аналогичный код, показанный выше, чтобы использовать службу $http для получения данных JSON.

Давайте посмотрим на код AngularJS, использующий $http, который можно использовать для получения вышеуказанных данных с сервера.

<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 для просмотра каждой пары ключ-значение в объектах JSON, возвращаемых методом get службы $http.

Для каждого объекта JSON мы отображаем ключ «Имя» и значение «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 — асинхронный. JavaСценарий и XML.
  • Мы рассмотрели, что такое ОТДЫХ архитектура — это не что иное, как функциональность, предоставляемая веб-приложениями на основе обычных HTTP-команд GET, POST, PUT и DELETE.
  • Объект $resource используется в Angular для взаимодействия с веб-приложениями RESTFUL на высоком уровне. Это означает, что мы вызываем только функциональность, предоставляемую веб-приложением, но не беспокоимся о том, как эта функциональность реализуется.
  • Мы также рассмотрели сервис $http, который можно использовать для получения данных из веб-приложения. Это возможно, поскольку сервис $http может работать с веб-приложениями на более детальном уровне.
  • Благодаря возможностям службы $http ее можно использовать для получения данных из MySQL или MS SQL Server через приложение PHP. Затем данные можно отобразить в таблице с помощью директивы ng-repeat.

Вы могли бы: