AngularJS AJAX – Направете AJAX повикване с $http

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

AngularJS AJAX

AJAX е кратката форма на Asynchronous JavaСкрипт и XML. AJAX е предназначен основно за актуализиране на части от уеб страница, без презареждане на цялата страница.

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

AJAX позволява уеб страниците да се актуализират асинхронно чрез обмен на малки количества данни със сървъра зад кулисите. Това означаваше, че е възможно да се актуализират части от уеб страница, без да се презарежда цялата страница.

Много съвременни уеб приложения всъщност следват тази техника за опресняване на страницата или получаване на данни от сървъра.

Взаимодействия на високо ниво със сървъри, използващи $resource

Angular предоставя два различни API за обработка на Ajax заявки. Те са

  • $ресурс
  • $http

Ще разгледаме свойството “$resource” в Angular, което се използва за взаимодействие със сървъри на високо ниво.

Когато говорим за взаимодействие на по-високо ниво, това означава, че ще се притесняваме само за това какво може да предложи сървърът по отношение на функционалността, а не за това какво точно сървърът прави в детайли по отношение на тази функционалност.

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

Така че на високо ниво знаем какво могат да правят тези две функции и можем да ги извикаме, използвайки свойството $resource. Но тогава не знаем точно подробностите за функциите „GetEmployeeDetails“ и „SetEmployeeDetails“ и как се изпълняват.

Горното обяснение обяснява това, което е известно като базирана на REST архитектура.

  • REST е известен като Representational State Transfer, което е архитектура, следвана в много съвременни уеб базирани системи.
  • Това означава, че можете да използвате нормалните 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);

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

СВЪРЗАНИ СТАТИИ

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

За да използвате свойството $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. В тази услуга създаваме функция, която ще извика $resource API
  5. $resource('/example/Event/:1). Функцията $resource е услуга, която се използва за извикване на REST крайна точка. Крайната точка REST обикновено е URL адрес. В горната функция ние използваме URL (/example /Event/:1) като наша REST крайна точка. Нашата REST крайна точка (/example /Event/:1) означава, че има приложение Event, разположено на основния ни сайт „example“. Това приложение за събития е разработено чрез използване на базирана на 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.

Да приемем, че имаме a 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 към нашата функция Controller, за да можем да използваме функцията „get“ на услугата $http.
  2. Сега използваме функцията get от HTTP услугата, за да получим JSON обектите от URL адреса http://example /angular/getTopics.PHP
  3. Въз основа на обекта 'response', ние създаваме функция за обратно извикване, която ще върне записите с данни и впоследствие ги съхраняваме в обекта $scope.
  4. След това можем да използваме променливата $scope.names от контролера и да я използваме в нашия изглед, за да покажем съответно JSON обектите.

Как да извлечете данни от от SQL и MySQL Сървър, използващ AngularJS

Angular може да се използва и за извличане на данни от работещ сървър MySQL или SQL.

Идеята е, че ако имате PHP страница, свързваща се с a MySQL база данни или ан Asp.Net страница, свързваща се с MS SQL сървърна база данни, тогава трябва да се уверите, че както PHP, така и ASP.Net страницата изобразява данните във формат JSON.

Следва стъпка по стъпка процес за извличане на данни от SQL и MySQL Сървър, използващ AngularJS.

Да приемем, че имаме PHP сайт (http://example /angular/getTopics.PHP), обслужващи данни от a MySQL или SQL база данни.

Стъпка 1) Вземете данни от a MySQL база данни
Първата стъпка е да се гарантира, че PHP страницата взема данните от a 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>

Oбобщение

  • Пълната форма на AJAX е асинхронна JavaСценарий и XML.
  • Разгледахме какво а ПОЧИВКА архитектура е, което не е нищо друго освен функционалност, изложена от уеб приложения, базирана на нормалните HTTP глаголи GET, POST, PUT и DELETE.
  • Обектът $resource се използва с Angular за взаимодействие с уеб приложенията RESTFUL на високо ниво, което означава, че извикваме само функционалността, изложена от уеб приложението, но не се притесняваме как се изпълнява функционалността.
  • Разгледахме и услугата $http, която може да се използва за получаване на данни от уеб приложение. Това е възможно, защото услугата $http може да работи с уеб приложения на по-подробно ниво.
  • Поради мощността на услугата $http, това може да се използва за получаване на данни от a MySQL или MS SQL Server чрез PHP приложение. След това данните могат да бъдат изобразени в таблица с помощта на директивата ng-repeat.