AngularJS AJAX - $http
$http , uzak sunuculardan veri okumak için bir AngularJS hizmetidir.
AngularJS $http
AngularJS $httphizmeti, sunucuya bir istekte bulunur ve bir yanıt döndürür.
Örnek
Sunucuya basit bir istekte bulunun ve sonucu bir başlıkta görüntüleyin:
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome
message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.myWelcome
= response.data;
});
});
</script>
yöntemler
Yukarıdaki örnek .get, hizmetin yöntemini kullanır $http
.
.get yöntemi, $http hizmetinin bir kısayol yöntemidir. Birkaç kısayol yöntemi vardır:
.delete().get().head().jsonp().patch().post().put()
Yukarıdaki yöntemlerin tümü, $http hizmetini çağırmanın kısayollarıdır:
Örnek
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http({
method : "GET",
url : "welcome.htm"
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response)
{
$scope.myWelcome =
response.statusText;
});
});
Yukarıdaki örnek, argüman olarak bir nesne ile $http hizmetini yürütür. Nesne, HTTP yöntemini, url'yi, başarı durumunda ne yapılacağını ve başarısızlık durumunda ne yapılacağını belirtiyor.
Özellikler
Sunucudan gelen yanıt, şu özelliklere sahip bir nesnedir:
.configisteği oluşturmak için kullanılan nesne..datasunucudan yanıtı taşıyan bir dize veya nesne..headersbaşlık bilgilerini almak için kullanılacak bir işlev..statusHTTP durumunu tanımlayan bir sayı..statusTextHTTP durumunu tanımlayan bir dize.
Örnek
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.content
= response.data;
$scope.statuscode
= response.status;
$scope.statustext
= response.statusText;
});
});
Hataları işlemek için .thenyönteme bir işlev daha ekleyin:
Örnek
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("wrongfilename.htm")
.then(function(response) {
// First function handles success
$scope.content
= response.data;
}, function(response) {
// Second function handles error
$scope.content = "Something went wrong";
});
});
JSON
Yanıttan alacağınız verilerin JSON formatında olması bekleniyor.
JSON, verileri aktarmanın harika bir yoludur ve AngularJS'de veya başka herhangi bir JavaScript'te kullanımı kolaydır.
Örnek: Sunucuda 15 müşteri içeren bir JSON nesnesi döndüren ve tümü records.
JSON nesnesine bir göz atmak için buraya tıklayın.
Örnek
Yönerge ng-repeat, bir dizide döngü yapmak için mükemmeldir:
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li
ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('customersCtrl',
function($scope, $http) {
$http.get("customers.php").then(function(response) {
$scope.myData
= response.data.records;
});
});
</script>
Uygulama açıkladı:
customersCtrlUygulama, denetleyiciyi
$scopeve
$httpnesnesi ile tanımlar .
$httpharici veri istemek için bir XMLHttpRequest nesnesidir .
$http.get()https://www.w3schools.com/angular/customers.php adresinden JSON
verilerini okur .
Başarılı olduğunda, denetleyici myData, sunucudan JSON verileriyle kapsamda bir özellik oluşturur.