AngularJS AJAX – AJAX-Aufruf mit $http durchführen

By: James Hartmann James Hartmann
Hours Aktualisiert

AngularJS AJAX

AJAX ist die Kurzform von Asynchronous JavaSkript und XML. AJAX wurde in erster Linie dafür entwickelt, Teile einer Webseite zu aktualisieren, ohne die ganze Seite neu zu laden.

Der Grund für die Entwicklung dieser Technologie bestand darin, die Anzahl der Roundtrips zwischen dem Client und dem Server sowie die Anzahl der gesamten Seitenaktualisierungen zu reduzieren, die früher immer dann stattfanden, wenn ein Benutzer bestimmte Informationen benötigte.

AJAX ermöglichte die asynchrone Aktualisierung von Webseiten durch den Austausch kleiner Datenmengen mit dem Server im Hintergrund. Dadurch war es möglich, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu zu laden.

Viele moderne Webanwendungen verwenden tatsächlich diese Technik, um die Seite zu aktualisieren oder Daten vom Server abzurufen.

Interaktionen auf hoher Ebene mit Servern unter Verwendung von $resource

Angular bietet zwei verschiedene APIs zur Verarbeitung von Ajax-Anfragen. Sie sind

  • $ressource
  • $http

Wir werden uns die Eigenschaft „$resource“ in Angular ansehen, die für die Interaktion mit Servern auf hoher Ebene verwendet wird.

Wenn wir über die Interaktion auf einer höheren Ebene sprechen, bedeutet das, dass es uns nur darum geht, was der Server an Funktionalität zu bieten hat, und nicht darum, was der Server im Detail in Bezug auf diese Funktionalität tut.

Wenn der Server beispielsweise eine Anwendung hostet, die die Mitarbeiterinformationen eines bestimmten Unternehmens verwaltet, kann der Server Clients Funktionen wie GetEmployeeDetails, SetEmployeeDetails usw. zur Verfügung stellen.

Auf einer hohen Ebene wissen wir also, was diese beiden Funktionen tun können, und wir können sie mit der Eigenschaft $resource aufrufen. Aber dann kennen wir die genauen Details der Funktionen „GetEmployeeDetails“ und „SetEmployeeDetails“ nicht und wissen nicht, wie sie implementiert werden.

Die obige Erklärung erläutert, was als REST-basierte Architektur bekannt ist.

  • REST ist als Representational State Transfer bekannt und ist eine Architektur, die in vielen modernen webbasierten Systemen verwendet wird.
  • Das bedeutet, dass Sie die normalen HTTP-Verben GET, POST, PUT und DELETE verwenden können, um mit einer webbasierten Anwendung zu arbeiten.

Nehmen wir also an, wir haben eine Webanwendung, die eine Liste von verwaltet Events.

Wenn wir zur Liste aller Ereignisse gelangen wollten,

  • Die Webanwendung kann eine URL offenlegen, z http://example/events und
  • Wir können das Verb „GET“ verwenden, um die vollständige Liste der Ereignisse abzurufen, wenn die Anwendung einer REST-basierten Architektur folgt.

Wenn es beispielsweise ein Ereignis mit der ID 1 gab, können wir die Details dieses Ereignisses über die URL abrufen. http://example/events/1

Was ist das $resource-Objekt?

Das $resource-Objekt in Angular hilft bei der Arbeit mit Servern, die Anwendungen auf einer REST-basierten Architektur bereitstellen.

Nachfolgend finden Sie die grundlegende Syntax der @resource-Anweisung sowie die verschiedenen Funktionen

Syntax der @resource-Anweisung

var resource Object = $resource(url);

Sobald Sie das resourcesObject zur Hand haben, können Sie die folgenden Funktionen verwenden, um die erforderlichen REST-Aufrufe durchzuführen.

1. get([params], [success], [error]) – Dies kann verwendet werden, um den Standard-GET-Aufruf durchzuführen.

2. save([params], postData, [success], [error]) – Dies kann verwendet werden, um den Standard-POST-Aufruf durchzuführen.

3. query([params], [success], [error]) – Dies kann verwendet werden, um den Standard-GET-Aufruf durchzuführen, aber als Teil der Antwort wird ein Array zurückgegeben.

4. remove([params], postData, [success], [error]) – Dies kann verwendet werden, um den Standard-DELETE-Aufruf durchzuführen.

In allen unten angegebenen Funktionen kann der Parameter „params“ verwendet werden, um die erforderlichen Parameter bereitzustellen, die in der URL übergeben werden müssen.

Zum Beispiel,

  • Angenommen, Sie übergeben einen Wert von Topic: „Angular“ als „param“ in der Get-Funktion als
  • erhalten('http://example/events' ,'{ Thema: 'Winkel' }')
  • Die URL http://example/events?Topic=Angular wird als Teil der Get-Funktion aufgerufen.

ÄHNLICHE ARTIKEL

So verwenden Sie die AngularJS-$resource-Eigenschaft

Um die Eigenschaft $resource zu verwenden, müssen die folgenden Schritte ausgeführt werden:

Schritt 1) Die Datei „angular-resource.js“ muss von der Angular.JS-Site heruntergeladen und in der Anwendung platziert werden.

Schritt 2) Das Anwendungsmodul sollte eine Abhängigkeit vom Modul „ngResource“ deklarieren, um die $resource nutzen zu können.

Im folgenden Beispiel rufen wir das Modul „ngResource“ aus unserer Anwendung „DemoApp“ auf.

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

Schritt 3) Rufen Sie die Funktion $resource() mit Ihrem REST-Endpunkt auf, wie im folgenden Beispiel gezeigt.

Wenn Sie dies tun, kann das $resource-Objekt die erforderlichen Funktionen aufrufen, die von den REST-Endpunkten bereitgestellt werden.

Das folgende Beispiel ruft die Endpunkt-URL auf: http://example/events/1

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

Im obigen Beispiel werden die folgenden Dinge getan

  1. Beim Definieren der Angular-Anwendung wird ein Dienst mithilfe der Anweisung „DemoApp.services“ erstellt, wobei DemoApp der Name unserer Angular-Anwendung ist.
  2. Die Methode .factory wird verwendet, um die Details dieses neuen Dienstes zu erstellen.
  3. „Eintrag“ ist der Name, den wir unserem Dienst geben. Dabei kann es sich um einen beliebigen Namen handeln, den Sie angeben möchten.
  4. In diesem Dienst erstellen wir eine Funktion, die die $resource-API aufruft
  5. $resource('/example/Event/:1).Die $resource-Funktion ist ein Dienst, der zum Aufrufen eines REST-Endpunkts verwendet wird. Der REST-Endpunkt ist normalerweise eine URL. In der obigen Funktion verwenden wir die URL (/example /Event/:1) als unseren REST-Endpunkt. Unser REST-Endpunkt (/example /Event/:1) zeigt an, dass sich auf unserer Hauptseite „example“ eine Event-Anwendung befindet. Diese Event-Anwendung wurde mithilfe einer REST-basierten Architektur entwickelt.
  6. Das Ergebnis des Funktionsaufrufs ist ein Ressourcenklassenobjekt. Das Ressourcenobjekt verfügt nun über die Funktionen ( get() , query() , save() , remove(), delete() ), die aufgerufen werden können.

Schritt 4) Wir können jetzt die Methoden, die im obigen Schritt zurückgegeben wurden ( get() , query() , save() , remove(), delete() ), in unserem Controller verwenden.

Im folgenden Codeausschnitt verwenden wir die Funktion get() als Beispiel

Schauen wir uns den Code an, der die Funktion get() nutzen kann.

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

Im obigen Schritt

  • Die Funktion get() im obigen Snippet gibt eine GET-Anfrage an / example /Event/:1 aus.
  • Der Parameter:1 in der URL wird durch $scope.id ersetzt.
  • Die Funktion get() gibt ein leeres Objekt zurück, das automatisch gefüllt wird, wenn die tatsächlichen Daten vom Server kommen.
  • Das zweite Argument von get() ist ein Rückruf, der ausgeführt wird, wenn die Daten vom Server eintreffen. Die mögliche Ausgabe des gesamten Codes wäre ein JSON-Objekt, das die Liste der von der „Beispiel“-Website bereitgestellten Ereignisse zurückgeben würde. Ein Beispiel dafür, was zurückgegeben werden kann, ist unten dargestellt 
    {
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}

Serverinteraktionen auf niedriger Ebene mit $http

$http ist ein weiterer Angular JS-Dienst, der zum Lesen von Daten von Remote-Servern verwendet wird. Die beliebteste Datenform, die von Servern gelesen wird, sind Daten im JSON-Format.

Nehmen wir an, wir haben eine PHP Seite ( http://example/angular/getTopics.PHP ), das die folgenden JSON-Daten zurückgibt

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

Schauen wir uns den AngularJS-Code mit $http an, mit dem die oben genannten Daten vom Server abgerufen werden können

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

Im obigen Beispiel

  1. Wir fügen den $http-Dienst zu unserer Controller-Funktion hinzu, damit wir die „get“-Funktion des $http-Dienstes verwenden können.
  2. Wir verwenden jetzt die Get-Funktion des HTTP-Dienstes, um die JSON-Objekte von der URL abzurufen http://example /angular/getTopics.PHP
  3. Basierend auf dem „response“-Objekt erstellen wir eine Callback-Funktion, die die Datensätze zurückgibt und speichern diese anschließend im $scope-Objekt.
  4. Wir können dann die Variable $scope.names vom Controller verwenden und sie in unserer Ansicht verwenden, um die JSON-Objekte entsprechend anzuzeigen.

So rufen Sie Daten aus SQL ab und MySQL Server mit AngularJS

Angular kann auch zum Abrufen von Daten von einem laufenden Server verwendet werden MySQL oder SQL.

Die Idee ist, dass, wenn Sie eine PHP-Seite haben, die eine Verbindung zu einem herstellt MySQL Datenbank oder eine Asp.Net Seite, die eine Verbindung zu einem MS herstellt SQL Wenn Sie eine Serverdatenbank erstellen, müssen Sie sicherstellen, dass sowohl die PHP- als auch die ASP.Net-Seite die Daten im JSON-Format rendern.

Nachfolgend finden Sie eine Schritt-für-Schritt-Anleitung zum Abrufen von Daten aus SQL und MySQL Server mit AngularJS.

Nehmen wir an, wir haben eine PHP-Site (http://example /angular/getTopics.PHP) Bereitstellung von Daten von entweder a MySQL oder SQL-Datenbank.

Schritt 1) Nehmen Sie Daten von a MySQL Datenbank
Der erste Schritt besteht darin, sicherzustellen, dass die PHP-Seite die Daten von a übernimmt MySQL Datenbank und stellt die Daten im JSON-Format bereit.

Schritt 2) Rufen Sie die JSON-Daten mit dem $http-Dienst ab
Schreiben Sie den oben gezeigten ähnlichen Code, um den $http-Dienst zum Abrufen der JSON-Daten zu verwenden.

Schauen wir uns den AngularJS-Code mit $http an, mit dem die oben genannten Daten vom Server abgerufen werden können

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

Schritt 3) Rendern Sie Daten in Ihrer Ansicht mithilfe von ng-repeat-Direktive

Im Folgenden verwenden wir die ng-repeat-Direktive, um jedes der Schlüssel-Wert-Paare in den JSON-Objekten durchzugehen, die von der „get“-Methode des $http-Dienstes zurückgegeben werden.

Für jedes JSON-Objekt zeigen wir den Schlüssel „Name“ und den Wert „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>

Zusammenfassung

  • Die Langform von AJAX ist Asynchronous JavaSkript und XML.
  • Wir haben uns angeschaut, was für ein Erholsam Architektur ist nichts anderes als eine von Webanwendungen bereitgestellte Funktionalität basierend auf den normalen HTTP-Verben GET, POST, PUT und DELETE.
  • Das $resource-Objekt wird mit Angular verwendet, um auf hoher Ebene mit den RESTFUL-Webanwendungen zu interagieren. Das bedeutet, dass wir nur die von der Webanwendung bereitgestellte Funktionalität aufrufen, uns aber nicht darum kümmern, wie die Funktionalität implementiert wird.
  • Wir haben uns auch den $http-Dienst angesehen, mit dem Daten von einer Webanwendung abgerufen werden können. Dies ist möglich, weil der $http-Dienst detaillierter mit Webanwendungen arbeiten kann.
  • Aufgrund der Leistungsfähigkeit des $http-Dienstes kann dieser zum Abrufen von Daten von einem verwendet werden MySQL oder MS SQL Server über eine PHP-Anwendung. Die Daten können dann mithilfe der ng-repeat-Direktive in einer Tabelle gerendert werden.

Du magst vielleicht: