AngularJS AJAX – Ring AJAX-samtal med $http

By: James Hartman James Hartman
Hours Uppdaterad

AngularJS AJAX

AJAX är den korta formen av Asynkron JavaSkript och XML. AJAX var i första hand utformad för att uppdatera delar av en webbsida, utan att ladda om hela sidan.

Anledningen till att den här tekniken designades var att minska antalet tur- och returresor som gjordes mellan klienten och servern och antalet uppdateringar av hela sidan som brukade ske när en användare behövde viss information.

AJAX tillät webbsidor att uppdateras asynkront genom att utbyta små mängder data med servern bakom kulisserna. Detta innebar att det var möjligt att uppdatera delar av en webbsida, utan att ladda om hela sidan.

Många moderna webbapplikationer följer faktiskt denna teknik för att uppdatera sidan eller hämta data från servern.

Interaktioner på hög nivå med servrar som använder $resource

Angular tillhandahåller två olika API:er för att hantera Ajax-förfrågningar. Dom är

  • $resurs
  • $http

Vi kommer att titta på egenskapen "$resource" i Angular, som används för att interagera med servrar på en hög nivå.

När vi pratar om att interagera på en högre nivå betyder det att vi bara kommer att bry oss om vad servern har att erbjuda angående funktionalitet och inte om exakt vad servern gör i detalj med avseende på denna funktionalitet.

Till exempel, om servern var värd för en applikation som upprätthåller personalinformationen för ett visst företag, kan servern exponera funktioner för klienter som GetEmployeeDetails, SetEmployeeDetails, etc.

Så på en hög nivå vet vi vad dessa två funktioner kan göra, och vi kan anropa dem med hjälp av egenskapen $resource. Men då vet vi inte exakt detaljerna om funktionerna "GetEmployeeDetails" och "SetEmployeeDetails", och hur det implementeras.

Ovanstående förklaring förklarar vad som kallas en REST-baserad arkitektur.

  • REST är känt som Representational State Transfer, vilket är en arkitektur som följs i många moderna webbaserade system.
  • Det betyder att du kan använda de vanliga HTTP-verben GET, POST, PUT och DELETE för att arbeta med en webbaserad applikation.

Så låt oss anta att vi har en webbapplikation som har en lista över Evenemang.

Om vi ​​ville komma till listan över alla evenemang,

  • Webbapplikationen kan exponera en URL som t.ex http://example/events och
  • Vi kan använda verbet "GET" för att få hela listan med händelser om applikationen följer en REST-baserad arkitektur.

Så till exempel, om det fanns en händelse med ett ID på 1, kan vi få information om denna händelse via URL:en. http://example/events/1

Vad är $resource-objektet

$resource-objektet i Angular hjälper till att arbeta med servrar som betjänar applikationer på en REST-baserad arkitektur.

Den grundläggande syntaxen för @resource-satsen tillsammans med de olika funktionerna ges nedan

Syntax för @resurssatsen

var resource Object = $resource(url);

När du har resourceObject till hands kan du använda funktionerna nedan för att göra de nödvändiga REST-anropen.

1. get([params], [framgång], [fel]) – Detta kan användas för att göra det vanliga GET-anropet.

2. save([params], postData, [success], [error]) – Detta kan användas för att göra standard POST-anrop.

3. query([params], [framgång], [fel]) – Detta kan användas för att göra det vanliga GET-anropet, men en array returneras som en del av svaret.

4. remove([params], postData, [framgång], [fel]) – Detta kan användas för att göra standardanropet DELETE.

I alla funktionerna nedan kan parametern 'params' användas för att tillhandahålla de nödvändiga parametrarna, som måste skickas i URL:en.

Till exempel,

  • Anta att du skickar ett värde på Topic: 'Angular' som en 'param' i get-funktionen as
  • skaffa sig('http://example/events' ,'{ Ämne: 'Angular' }')
  • URL: en http://example/events?Topic=Angular anropas som en del av get-funktionen.

RELATERADE ARTIKLAR

Hur man använder AngularJS $resource-egenskap

För att kunna använda egenskapen $resource måste följande steg följas:

Steg 1) Filen "angular-resource.js" måste laddas ner från Angular.JS-webbplatsen och måste placeras i applikationen.

Steg 2) Applikationsmodulen bör deklarera ett beroende av modulen "ngResource" för att kunna använda $resursen.

I följande exempel anropar vi modulen "ngResource" från vår "DemoApp"-applikation.

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

Steg 3) Anropa $resource()-funktionen med din REST-slutpunkt, som visas i följande exempel.

Om du gör detta kommer $resource-objektet att ha förmågan att anropa den nödvändiga funktionaliteten som exponeras av REST-slutpunkterna.

Följande exempel anropar slutpunkts-URL: http://example/events/1

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

I exemplet ovan görs följande saker

  1. När du definierar Angular-applikationen skapas en tjänst genom att använda satsen 'DemoApp.services' där DemoApp är namnet på vår Angular-applikation.
  2. .factory-metoden används för att skapa detaljerna för denna nya tjänst.
  3. 'Entry' är det namn vi ger vår tjänst som kan vara vilket namn du vill ange.
  4. I den här tjänsten skapar vi en funktion som kommer att anropa $resource API
  5. $resource('/example/Event/:1). $resource-funktionen är en tjänst som används för att anropa en REST-slutpunkt. REST-slutpunkten är normalt en URL. I ovanstående funktion använder vi URL:en (/exempel /Event/:1) som vår REST-slutpunkt. Vår REST-slutpunkt(/exempel /Event/:1) anger att det finns en Event-applikation på vår huvudsajt "exempel". Denna Event-applikation är utvecklad med hjälp av en REST-baserad arkitektur.
  6. Resultatet av funktionsanropet är ett resursklassobjekt. Resursobjektet kommer nu att ha funktionerna (get() , query() , save() , remove(), delete() ) som kan anropas.

Steg 4) Vi kan nu använda metoderna som returnerades i steget ovan (som är get() , query() , save() , remove(), delete() ) i vår kontroller.

I kodavsnittet nedan använder vi get()-funktionen som ett exempel

Låt oss titta på koden som kan använda 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 steget ovan,

  • Get()-funktionen i ovanstående kodavsnitt skickar en GET-förfrågan till /exempel /Event/:1.
  • Parametern:1 i URL:en ersätts med $scope.id.
  • Funktionen get() kommer att returnera ett tomt objekt som fylls i automatiskt när den faktiska datan kommer från servern.
  • Det andra argumentet för att get() är en callback som exekveras när data kommer från servern. Den möjliga utmatningen av hela koden skulle vara ett JSON-objekt som skulle returnera listan med händelser exponerade från "exempel"-webbplatsen. Ett exempel på vad som kan returneras visas nedan 
    {
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}

Serverinteraktioner på låg nivå med $http

$http är en annan Angular JS-tjänst som används för att läsa data från fjärrservrar. Den mest populära formen av data som läses från servrar är data i JSON-format.

Låt oss anta att vi har en PHP sida ( http://example/angular/getTopics.PHP ) som returnerar följande JSON-data

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

Låt oss titta på AngularJS-koden med $http, som kan användas för att hämta ovanstående data från servern

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

  1. Vi lägger till $http-tjänsten till vår Controller-funktion så att vi kan använda "get"-funktionen för $http-tjänsten.
  2. Vi använder nu get-funktionen från HTTP-tjänsten för att hämta JSON-objekten från URL:en http://example /angular/getTopics.PHP
  3. Baserat på 'response'-objektet skapar vi en callback-funktion som returnerar dataposterna och därefter lagrar vi dem i $scope-objektet.
  4. Vi kan sedan använda variabeln $scope.names från styrenheten och använda den i vår uppfattning för att visa JSON-objekten därefter.

Hur man hämtar data från SQL och MySQL Server som använder AngularJS

Angular kan också användas för att hämta data från en server som körs MySQL eller SQL.

Tanken är att om du har en PHP-sida som ansluter till en MySQL databas eller en Asp.Net sida som ansluter till en MS SQL serverdatabas, då måste du se till att både PHP och ASP.Net-sidan återger data i JSON-format.

Följande är steg för steg process om hur man hämtar data från SQL och MySQL Server som använder AngularJS.

Låt oss anta att vi har en PHP-sida (http://example /angular/getTopics.PHP) serverar data från antingen en MySQL eller SQL-databas.

Steg 1) Ta data från en MySQL databas
Det första steget är att se till att PHP-sidan tar data från en MySQL databas och serverar data i JSON-format.

Steg 2) Få JSON-data med hjälp av $http-tjänsten
Skriv liknande kod som visas ovan för att använda $http-tjänsten för att få JSON-data.

Låt oss titta på AngularJS-koden med $http som kan användas för att hämta ovanstående data från servern

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

Steg 3) Återge data i din vy med hjälp av ng-upprepa direktiv

Nedan använder vi ng-repeat-direktivet för att gå igenom vart och ett av nyckel-värdeparen i JSON-objekten som returneras av "get"-metoden för $http-tjänsten.

För varje JSON-objekt visar vi nyckeln som är "Namn" och värdet är "Descriptjon".

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

Sammanfattning

  • Den fullständiga formen av AJAX är Asynchronous JavaScript och XML.
  • Vi har tittat på vad a ROGIVANDE arkitektur är, vilket inte är något annat än en funktion som exponeras av webbapplikationer baserade på de normala HTTP-verben GET, POST, PUT och DELETE.
  • $resource-objektet används med Angular för att interagera med RESTFUL-webbapplikationerna på en hög nivå, vilket innebär att vi bara anropar funktionaliteten som exponeras av webbapplikationen men inte bryr oss om hur funktionaliteten implementeras.
  • Vi tittade också på $http-tjänsten som kan användas för att hämta data från en webbapplikation. Detta är möjligt eftersom $http-tjänsten kan fungera med webbapplikationer på en mer detaljerad nivå.
  • På grund av kraften i $http-tjänsten kan denna användas för att hämta data från en MySQL eller MS SQL Server via en PHP-applikation. Data kan sedan renderas i en tabell med ng-repeat-direktivet.

Du kanske gillar: