AngularJS AJAX – Foretag AJAX-opkald ved hjælp af $http

Af: James Hartman James Hartman
Hours Opdateret

AngularJS AJAX

AJAX er den korte form for Asynkron JavaScript og XML. AJAX var primært designet til at opdatere dele af en webside uden at genindlæse hele siden.

Grunden til at designe denne teknologi var at reducere antallet af rundrejser, der blev foretaget mellem klienten og serveren, og antallet af hele sideopdateringer, som plejede at finde sted, når en bruger havde brug for visse oplysninger.

AJAX tillod websider at blive opdateret asynkront ved at udveksle små mængder data med serveren bag kulisserne. Det betød, at det var muligt at opdatere dele af en webside, uden at genindlæse hele siden.

Mange moderne webapplikationer følger faktisk denne teknik til at opdatere siden eller hente data fra serveren.

Interaktioner på højt niveau med servere ved hjælp af $resource

Angular leverer to forskellige API'er til at håndtere Ajax-anmodninger. De er

  • $ressource
  • $http

Vi vil se på egenskaben "$resource" i Angular, som bruges til at interagere med servere på et højt niveau.

Når vi taler om at interagere på et højere niveau, betyder det, at vi kun bliver generet af, hvad serveren har at tilbyde af funktionalitet og ikke om, hvad serveren præcist gør i detaljer med hensyn til denne funktionalitet.

For eksempel, hvis serveren var vært for en applikation, der vedligeholder medarbejderoplysningerne for en bestemt virksomhed, kan serveren udsætte funktionalitet for klienter såsom GetEmployeeDetails, SetEmployeeDetails osv.

Så på et højt niveau ved vi, hvad disse to funktioner kan, og vi kan kalde dem ved hjælp af $resource-egenskaben. Men så kender vi ikke præcis detaljerne i “GetEmployeeDetails” og “SetEmployeeDetails funktionerne”, og hvordan det er implementeret.

Ovenstående forklaring forklarer, hvad der er kendt som en REST-baseret arkitektur.

  • REST er kendt som Representational State Transfer, som er en arkitektur, der følges i mange moderne webbaserede systemer.
  • Det betyder, at du kan bruge de normale HTTP-verber GET, POST, PUT og DELETE til at arbejde med en webbaseret applikation.

Så lad os antage, at vi har en webapplikation, der vedligeholder en liste over Events.

Hvis vi ønskede at komme til listen over alle begivenhederne,

  • Webapplikationen kan afsløre en URL som f.eks http://example/events og
  • Vi kan bruge verbet "GET" til at få hele listen over begivenheder, hvis applikationen følger en REST-baseret arkitektur.

Så hvis der for eksempel var en begivenhed med et ID på 1, så kan vi få detaljerne om denne begivenhed via URL'en. http://example/events/1

Hvad er $resource-objektet

$resource-objektet i Angular hjælper med at arbejde med servere, der betjener applikationer på en REST-baseret arkitektur.

Den grundlæggende syntaks for @resource-sætningen sammen med de forskellige funktioner er angivet nedenfor

Syntaks for @ressourceerklæring

var resource Object = $resource(url);

Når du har resourceObject ved hånden, kan du bruge nedenstående funktioner til at foretage de nødvendige REST-opkald.

1. get([params], [succes], [fejl]) – Dette kan bruges til at lave standard GET-kaldet.

2. save([params], postData, [success], [fejl]) – Dette kan bruges til at lave standard POST-kaldet.

3. query([params], [succes], [fejl]) – Dette kan bruges til at lave standard GET-kaldet, men et array returneres som en del af svaret.

4. remove([params], postData, [success], [fejl]) – Dette kan bruges til at foretage standard DELETE-kaldet.

I alle funktionerne nedenfor kan parameteren 'params' bruges til at angive de nødvendige parametre, som skal sendes i URL'en.

For eksempel:

  • Antag, at du sender en værdi af Emne: 'Angular' som en 'param' i get-funktionen som
  • få('http://example/events' ,'{ Emne: 'Angular' }')
  • URL-adressen http://example/events?Topic=Angular bliver påkaldt som en del af get-funktionen.

RELATEREDE ARTIKLER

Sådan bruger du AngularJS $resource-egenskab

For at bruge egenskaben $resource skal følgende trin følges:

Trin 1) Filen "angular-resource.js" skal downloades fra Angular.JS-siden og skal placeres i applikationen.

Trin 2) Applikationsmodulet bør erklære en afhængighed af "ngResource"-modulet for at bruge $ressourcen.

I det følgende eksempel kalder vi "ngResource"-modulet fra vores 'DemoApp'-applikation.

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

Trin 3) Kaldning af $resource()-funktionen med dit REST-slutpunkt, som vist i følgende eksempel.

Hvis du gør dette, vil $resource-objektet have evnen til at påkalde den nødvendige funktionalitet, der er afsløret af REST-endepunkterne.

Følgende eksempel kalder slutpunktets URL: http://example/events/1

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

I eksemplet ovenfor bliver følgende ting gjort

  1. Når Angular-applikationen defineres, oprettes en tjeneste ved at bruge sætningen 'DemoApp.services', hvor DemoApp er navnet på vores Angular-applikation.
  2. .factory-metoden bruges til at oprette detaljerne for denne nye tjeneste.
  3. 'Entry' er det navn, vi giver til vores tjeneste, som kan være et hvilket som helst navn, du ønsker at give.
  4. I denne tjeneste opretter vi en funktion, som vil kalde $resource API
  5. $resource('/example/Event/:1). $resource-funktionen er en tjeneste, der bruges til at kalde et REST-slutpunkt. REST-endepunktet er normalt en URL. I ovenstående funktion bruger vi URL'en (/example /Event/:1) som vores REST-slutpunkt. Vores REST-slutpunkt(/eksempel /Begivenhed/:1) angiver, at der er en begivenhedsapplikation på vores hovedside "eksempel". Denne Event-applikation er udviklet ved at bruge en REST-baseret arkitektur.
  6. Resultatet af funktionskaldet er et ressourceklasseobjekt. Ressourceobjektet vil nu have funktionerne ( get() , query() , save() , remove(), delete() ), som kan aktiveres.

Trin 4) Vi kan nu bruge metoderne, som blev returneret i ovenstående trin (som er get() , query(), save() , remove(), delete() ) i vores controller.

I nedenstående kodestykke bruger vi funktionen get() som et eksempel

Lad os se på koden, som kan gøre brug af get()-funktionen.

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

I ovenstående trin,

  • Get()-funktionen i ovenstående uddrag sender en GET-anmodning til /eksempel /Event/:1.
  • Parameteren:1 i URL'en erstattes med $scope.id.
  • Funktionen get() vil returnere et tomt objekt, som udfyldes automatisk, når de faktiske data kommer fra serveren.
  • Det andet argument for at få() er et tilbagekald, som udføres, når dataene ankommer fra serveren. Det mulige output af hele koden ville være et JSON-objekt, som ville returnere listen over hændelser, der er eksponeret fra "eksempel"-webstedet. Et eksempel på, hvad der kan returneres, er vist nedenfor 
    {
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}

Serverinteraktioner på lavt niveau med $http

$http er en anden Angular JS-tjeneste, som bruges til at læse data fra fjernservere. Den mest populære form for data, der læses fra servere, er data i JSON-formatet.

Lad os antage, at vi har en PHP side ( http://example/angular/getTopics.PHP ), der returnerer følgende JSON-data

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

Lad os se på AngularJS-koden ved hjælp af $http, som kan bruges til at hente ovenstående data fra serveren

<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>

I ovenstående eksempel

  1. Vi tilføjer $http-tjenesten til vores Controller-funktion, så vi kan bruge "get"-funktionen i $http-tjenesten.
  2. Vi bruger nu get-funktionen fra HTTP-tjenesten til at hente JSON-objekterne fra URL'en http://example /angular/getTopics.PHP
  3. Baseret på 'response'-objektet opretter vi en tilbagekaldsfunktion, som returnerer dataposterne, og efterfølgende gemmer vi dem i $scope-objektet.
  4. Vi kan derefter bruge variablen $scope.names fra controlleren og bruge den i vores visning til at vise JSON-objekterne i overensstemmelse hermed.

Sådan henter du data fra SQL og MySQL Server ved hjælp af AngularJS

Angular kan også bruges til at hente data fra en kørende server MySQL eller SQL.

Ideen er, at hvis du har en PHP-side, der forbinder til en MySQL database eller en Asp.Net side, der forbinder til en MS SQL serverdatabase, så skal du sikre dig, at både PHP- og ASP.Net-siden gengiver dataene i JSON-format.

Følgende er trin for trin proces om, hvordan man henter data fra SQL og MySQL Server ved hjælp af AngularJS.

Lad os antage, at vi har et PHP-websted (http://example /angular/getTopics.PHP) serverer data fra enten en MySQL eller SQL-database.

Trin 1) Tag data fra en MySQL database
Det første skridt er at sikre, at PHP-siden tager dataene fra en MySQL database og serverer dataene i JSON-format.

Trin 2) Hent JSON-dataene ved hjælp af $http-tjenesten
Skriv den lignende kode vist ovenfor for at bruge $http-tjenesten til at få JSON-dataene.

Lad os se på AngularJS-koden ved hjælp af $http, som kan bruges til at hente ovenstående data fra serveren

<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>

Trin 3) Gengiv data i din visning ved hjælp af ng-gentag direktiv

Nedenfor bruger vi ng-repeat-direktivet til at gennemgå hvert af nøgleværdi-parrene i JSON-objekterne, der returneres af "get"-metoden for $http-tjenesten.

For hvert JSON-objekt viser vi nøglen, som er "Navn", og værdien er "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>

Resumé

  • Den fulde form for AJAX er den asynkrone JavaScript og XML.
  • Vi har set på, hvad en ROLIG arkitektur er, hvilket ikke er andet end en funktionalitet, der eksponeres af webapplikationer baseret på de normale HTTP-verber GET, POST, PUT og DELETE.
  • $resource-objektet bruges sammen med Angular til at interagere med RESTFUL-webapplikationerne på et højt niveau, hvilket betyder, at vi kun påberåber os den funktionalitet, der er eksponeret af webapplikationen, men ikke bekymrer os om, hvordan funktionaliteten implementeres.
  • Vi så også på $http-tjenesten, som kan bruges til at hente data fra en webapplikation. Dette er muligt, fordi $http-tjenesten kan arbejde med webapplikationer på et mere detaljeret niveau.
  • På grund af kraften i $http-tjenesten kan denne bruges til at hente data fra en MySQL eller MS SQL Server via en PHP-applikation. Dataene kan derefter gengives i en tabel ved hjælp af ng-repeat-direktivet.

Du kan lide: