AngularJS AJAX – Soita AJAX-puhelu käyttämällä $http

by: James Hartman James Hartman
Hours Päivitetty

AngularJS AJAX

AJAX on Asynchronousin lyhyt muoto JavaScript ja XML. AJAX on suunniteltu ensisijaisesti verkkosivun osien päivittämiseen ilman koko sivun uudelleenlatausta.

Syynä tämän tekniikan suunnitteluun oli vähentää asiakkaan ja palvelimen välillä tehtyjen edestakaisten matkojen määrää ja koko sivun päivitysten määrää, joka tapahtui aina, kun käyttäjä tarvitsi tiettyjä tietoja.

AJAX salli verkkosivujen päivittämisen asynkronisesti vaihtamalla pieniä määriä tietoa kulissien takana olevan palvelimen kanssa. Tämä tarkoitti, että verkkosivun osia oli mahdollista päivittää lataamatta koko sivua uudelleen.

Monet nykyajan verkkosovellukset itse asiassa noudattavat tätä tekniikkaa päivittääkseen sivun tai saadakseen tietoja palvelimelta.

Korkean tason vuorovaikutus palvelimien kanssa käyttämällä $resurssia

Angular tarjoaa kaksi erilaista sovellusliittymää Ajax-pyyntöjen käsittelemiseen. He ovat

  • $resurssi
  • $http

Tarkastelemme Angularin "$resurssi" -ominaisuutta, jota käytetään vuorovaikutuksessa palvelimien kanssa korkealla tasolla.

Kun puhumme vuorovaikutuksesta korkeammalla tasolla, se tarkoittaa, että meitä häiritsee vain se, mitä palvelimella on tarjota toiminnallisuuden suhteen, eikä se, mitä palvelin tarkalleen ottaen tekee tämän toiminnon suhteen.

Jos palvelin esimerkiksi isännöi sovellusta, joka ylläpitää tietyn yrityksen työntekijätietoja, palvelin saattaa paljastaa toimintoja asiakkaille, kuten GetEmployeeDetails, SetEmployeeDetails jne.

Joten korkealla tasolla tiedämme, mitä nämä kaksi funktiota voivat tehdä, ja voimme kutsua niitä käyttämällä $resurssi-ominaisuutta. Mutta sitten emme tiedä tarkalleen "GetEmployeeDetails"- ja "SetEmployeeDetails-funktioiden" yksityiskohtia ja kuinka ne toteutetaan.

Yllä oleva selitys selittää sen, mitä kutsutaan REST-pohjaiseksi arkkitehtuuriksi.

  • REST tunnetaan nimellä Representational State Transfer, joka on arkkitehtuuri, jota noudatetaan monissa nykyaikaisissa verkkopohjaisissa järjestelmissä.
  • Se tarkoittaa, että voit käyttää normaaleja HTTP-verbejä GET, POST, PUT ja DELETE työskennelläksesi verkkopohjaisen sovelluksen kanssa.

Oletetaan siis, että meillä on verkkosovellus, joka ylläpitää luetteloa Tapahtumat .

Jos halusimme päästä kaikkien tapahtumien luetteloon,

  • Verkkosovellus voi paljastaa URL-osoitteen, kuten http://example/events ja
  • Voimme käyttää "GET"-verbiä saadaksemme koko luettelon tapahtumista, jos sovellus noudattaa REST-pohjaista arkkitehtuuria.

Jos siis esimerkiksi tapahtui tapahtuma, jonka tunnus on 1, voimme saada tämän tapahtuman tiedot URL-osoitteen kautta. http://example/events/1

Mikä on $resurssi-objekti

Angularin $resource-objekti auttaa työskentelemään palvelimien kanssa, jotka palvelevat sovelluksia REST-pohjaisessa arkkitehtuurissa.

@resource-käskyn perussyntaksi ja eri funktiot on annettu alla

@resurssilausekkeen syntaksi

var resource Object = $resource(url);

Kun sinulla on resourceObject käsillä, voit käyttää alla olevia toimintoja tarvittavien REST-kutsujen soittamiseen.

1. get([parametrit], [onnistuminen], [virhe]) – Tätä voidaan käyttää normaalin GET-kutsun tekemiseen.

2. save([parametrit], postData, [success], [error]) – Tätä voidaan käyttää tavallisen POST-kutsun tekemiseen.

3. query([parametrit], [onnistuminen], [virhe]) – Tätä voidaan käyttää standardin GET-kutsun tekemiseen, mutta taulukko palautetaan osana vastausta.

4. remove([parametrit], postData, [success], [error]) – Tätä voidaan käyttää normaalin DELETE-kutsun tekemiseen.

Kaikissa alla annetuissa funktioissa parametria "params" voidaan käyttää antamaan vaaditut parametrit, jotka on välitettävä URL-osoitteessa.

Esimerkiksi

  • Oletetaan, että annat Aihe: 'Angular' arvon 'param'-arvoksi get-funktiossa
  • saada('http://example/events' ,'{ Aihe: 'Angular' }')
  • URL-osoite http://example/events?Topic=Angular kutsutaan osana get-toimintoa.

AIHEESEEN LIITTYVÄT ARTIKKELIT

AngularJS $resurssi -ominaisuuden käyttäminen

Jotta voit käyttää $resurssi-ominaisuutta, sinun on suoritettava seuraavat vaiheet:

Vaihe 1) Tiedosto "angular-resource.js" on ladattava Angular.JS-sivustolta ja sijoitettava sovellukseen.

Vaihe 2) Sovellusmoduulin tulee ilmoittaa riippuvuus "ngResource"-moduulista voidakseen käyttää $resurssia.

Seuraavassa esimerkissä kutsumme "ngResource"-moduulia "DemoApp"-sovelluksestamme.

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

Vaihe 3) $resource()-funktion kutsuminen REST-päätepisteelläsi seuraavan esimerkin mukaisesti.

Jos teet tämän, $resurssiobjektilla on kyky kutsua tarvittavat toiminnot, jotka REST-päätepisteet paljastavat.

Seuraava esimerkki kutsuu päätepisteen URL-osoitetta: http://example/events/1

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

Yllä olevassa esimerkissä tehdään seuraavat asiat

  1. Angular-sovellusta määritettäessä palvelu luodaan käyttämällä lausetta 'DemoApp.services', jossa DemoApp on Angular-sovelluksellemme annettu nimi.
  2. .factory-menetelmää käytetään tämän uuden palvelun yksityiskohtien luomiseen.
  3. "Entry" on nimi, jonka annamme palvelullemme ja joka voi olla mikä tahansa nimi, jonka haluat antaa.
  4. Tässä palvelussa luomme funktion, joka kutsuu $resource API:ta
  5. $resurssi('/example/Event/:1).$resurssifunktio on palvelu, jota käytetään kutsumaan REST-päätepistettä. REST-päätepiste on yleensä URL-osoite. Yllä olevassa funktiossa käytämme URL-osoitetta (/example /Event/:1) REST-päätepisteenä. REST-päätepisteemme (/esimerkki /Tapahtuma/:1) tarkoittaa, että pääsivustollamme "esimerkki" on tapahtumasovellus. Tämä tapahtumasovellus on kehitetty käyttämällä REST-pohjaista arkkitehtuuria.
  6. Funktiokutsun tulos on resurssiluokan objekti. Resurssiobjektissa on nyt funktiot ( get() , query() , save() , remove(), delete() ), jotka voidaan kutsua.

Vaihe 4) Voimme nyt käyttää menetelmiä, jotka palautettiin yllä olevassa vaiheessa (jotka ovat get() , query() , save() , remove(), delete() ) ohjaimessamme.

Alla olevassa koodinpätkässä käytämme esimerkkinä get()-funktiota

Katsotaanpa koodia, joka voi hyödyntää get()-funktiota.

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

Yllä olevassa vaiheessa

  • Yllä olevan katkelman get()-funktio lähettää GET-pyynnön osoitteeseen /esimerkki /Event/:1.
  • URL-osoitteen parametri:1 korvataan arvolla $scope.id.
  • Funktio get() palauttaa tyhjän objektin, joka täytetään automaattisesti, kun varsinaiset tiedot tulevat palvelimelta.
  • Toinen get():n argumentti on takaisinsoitto, joka suoritetaan, kun tiedot saapuvat palvelimelta. Koko koodin mahdollinen tuloste olisi JSON-objekti, joka palauttaisi luettelon "esimerkkisivustolta" paljastetuista tapahtumista. Alla on esimerkki palautettavista tapahtumista. 
    {
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}

Matalan tason palvelinvuorovaikutus $http:n kanssa

$http on toinen Angular JS -palvelu, jota käytetään tietojen lukemiseen etäpalvelimista. Suosituin palvelimilta luettava tietomuoto on JSON-muotoinen data.

Oletetaan, että meillä on a PHP sivu ( http://example/angular/getTopics.PHP ), joka palauttaa seuraavat JSON-tiedot

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

Katsotaanpa AngularJS-koodia käyttämällä $http, jota voidaan käyttää yllä olevien tietojen saamiseksi palvelimelta

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

Yllä olevassa esimerkissä

  1. Lisäämme $http-palvelun Controller-toimintoomme, jotta voimme käyttää $http-palvelun "get"-toimintoa.
  2. Käytämme nyt HTTP-palvelun get-toimintoa JSON-objektien hakemiseen URL-osoitteesta http://example /angular/getTopics.PHP
  3. 'Response'-objektin perusteella luomme takaisinsoittotoiminnon, joka palauttaa datatietueet ja sen jälkeen tallennamme ne $scope-objektiin.
  4. Voimme sitten käyttää $scope.names-muuttujaa ohjaimesta ja käyttää sitä näkymässämme JSON-objektien näyttämiseen vastaavasti.

Kuinka noutaa tietoja SQL:stä ja MySQL Palvelin AngularJS:llä

Angular-ohjelmaa voidaan käyttää myös tietojen hakemiseen käynnissä olevalta palvelimelta MySQL tai SQL.

Ajatuksena on, että jos sinulla on PHP-sivu, joka yhdistää a MySQL tietokanta tai Asp.Net sivu yhdistää MS:ään SQL palvelintietokanta, sinun on varmistettava, että sekä PHP että ASP.Net-sivu renderöivät tiedot JSON-muodossa.

Seuraavassa on vaiheittainen prosessi tietojen hakemiseen SQL:stä ja MySQL Palvelin AngularJS:llä.

Oletetaan, että meillä on PHP-sivusto (http://example /angular/getTopics.PHP) palvelee tietoja joko a MySQL tai SQL-tietokanta.

Vaihe 1) Ota tiedot osoitteesta a MySQL tietokanta
Ensimmäinen askel on varmistaa, että PHP-sivu ottaa tiedot a MySQL tietokanta ja palvelee tiedot JSON-muodossa.

Vaihe 2) Hanki JSON-tiedot käyttämällä $http-palvelua
Kirjoita yllä oleva samanlainen koodi käyttääksesi $http-palvelua JSON-tietojen hakemiseen.

Katsotaanpa AngularJS-koodia käyttämällä $http:ta, jota voidaan käyttää yllä olevien tietojen saamiseksi palvelimelta

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

Vaihe 3) Renderöi tiedot näkymässäsi käyttämällä ng-repeat direktiivi

Alla käytämme ng-repeat-ohjetta käydäksemme läpi jokaisen avainarvoparin JSON-objekteissa, jotka on palautettu $http-palvelun get-menetelmällä.

Jokaiselle JSON-objektille näytämme avaimen, joka on "Nimi" ja arvo on "Descriptioni".

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

Yhteenveto

  • AJAXin täysi muoto on Asynchronous JavaKäsikirjoitus ja XML.
  • Olemme katsoneet mitä a LEVOTUA arkkitehtuuri on, mikä ei ole muuta kuin verkkosovellusten paljastama toiminto, joka perustuu normaaleihin HTTP-verbeihin GET, POST, PUT ja DELETE.
  • $resurssi-objektia käytetään Angularin kanssa vuorovaikutukseen RESTFUL-verkkosovellusten kanssa korkealla tasolla, mikä tarkoittaa, että kutsumme vain verkkosovelluksen paljastamia toimintoja, mutta emme välitä toiminnallisuuden toteuttamisesta.
  • Tarkastelimme myös $http-palvelua, jonka avulla voidaan saada tietoja verkkosovelluksesta. Tämä on mahdollista, koska $http-palvelu voi toimia verkkosovellusten kanssa yksityiskohtaisemmalla tasolla.
  • $http-palvelun tehon vuoksi sitä voidaan käyttää tietojen saamiseksi a MySQL tai MS SQL Server PHP-sovelluksen kautta. Tiedot voidaan sitten muodostaa taulukkoon ng-repeat -direktiivin avulla.

Saatat tykätä: