AngularJS $http
$http là 1 dịch vụ AngularJS dùng để đọc dữ liệu từ server từ xa. Dịch vụ $http tạo 1 kết nối đến server và trả về 1 phản hồi. Ví dụ sau tạo 1 kết nối đơn giản đến server và trả về kết quả ở 1 header:
<div ng-app="myApp" ng-controller="myCtrl"> <p>Thông điệp trả về từ server là: </p> <h1>{{myWelcome}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("dammio.html") .then(function(response) { $scope.myWelcome = response.data; }); }); </script>
Phương thức
Ví dụ trên sử dụng phương thức .get của dịch vụ $http. Phương thức .get là 1 phương thức tắt của dịch vụ $http. Có vài phương thức tắt là:
- .delete()
- .get()
- .head()
- .jsonp()
- .patch()
- .post()
- .put()
Các phương thức trên đều là cách vắn tắt để gọi dịch vụ $http. Ví dụ sau thực thi dịch vụ $http với 1 đối tượng là 1 đối số. Đối tượng đặc tả phương thức HTTP cần làm gì khi kết nối thành công, làm gì khi kết nối thất bại.
<div ng-app="myApp" ng-controller="myCtrl"> <p>Thông điệp chào mừng - dammio.com:</p> <h1>{{myWelcome}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http({ method : "GET", url : "dammio.html" }).then(function mySucces(response) { $scope.myWelcome = response.data; }, function myError(response) { $scope.myWelcome = response.statusText; }); }); </script>
Thuộc tính
Phản hồi từ server là 1 đối tượng với các thuộc tính sau:
- .config là đối tượng dùng để phát sinh một yêu cầu kết nối.
- .data là 1 chuỗi hay 1 đối tượng mang theo phản hồi từ server.
- .headers là 1 hàm dùng để lấy thông tin header.
- .status là 1 số định nghĩa trạng thái HTTP.
- .statusText là 1 chuỗi định nghĩa trạng thái HTTP.
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("dammio.html") .then(function(response) { $scope.content = response.data; $scope.statuscode = response.status; $scope.statustext = response.statustext; }); });
Để quản lý lỗi, thêm 1 hàm vào phương thức .then
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("trangwebsaiten.htm") .then(function(response) { //Hàm đầu tiên thực thi khi thành công $scope.content = response.data; }, function(response) { //Hàm thứ hai xử lý lỗi $scope.content = "Something went wrong"; }); });
JSON
Dữ liệu lấy từ server nên ở định dạng JSON. JSON là cách hay để chuyển dữ liệu, và dễ dùng bên trong AngularJS, hoặc bất kỳ đoạn JavaScript nào. Ví dụ ở server, chúng ta có 1 tập tin trả về 1 đối tượng JSON chứa 15 khách hàng, tất cả được bao quanh trong 1 mảng gọi là customers.
Tập tin dammio.html ở client như sau:
{ "customers": [ { "Name": "Dammio Ta", "City": "Paris", "Country": "France" }, { "Name": "Alonso Deprie", "City": "New York", "Country": "USA" }, { "Name": "Kamanoto Yikoa", "City": "Tokyo", "Country": "Japan" } ] }
Sau đó, chúng ta dùng chỉ thị ng-repeat để lặp qua mảng và xuất dữ liệu:
<div ng-app="myApp" ng-controller="dammioCtrl"> <ul> <li ng-repeat="x in myData"> {{ x.Name + ', ' + x.Country }} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('dammioCtrl', function($scope, $http) { $http.get("dammio.php").then(function(response) { $scope.myData = response.data.customers; }); }); </script>
Trong ví dụ trên, ứng dụng định nghĩa điều khiển tên là dammioCtrl, với đối tượng $scope và $http. $http là 1 đối tượng XMLHttpRequest để lấy dữ liệu bên ngoài. $http.get() đọc dữ liệu JSON từ server (chẳng hạn như tập tin dammio.html). Khi nhận dữ liệu trả về thành công, controller tạo 1 thuộc tính tên là myData với dữ liệu JSON từ server.
- APA:
Dammio. (2017). [AngularJS] Phần 11: AngularJS http. https://www.dammio.com/2017/03/16/angularjs-phan-11-angularjs-ajax.
- BibTeX:
@misc{dammio,
author = {Dammio},
title = {[AngularJS] Phần 11: AngularJS http},
year = {2017},
url = {https://www.dammio.com/2017/03/16/angularjs-phan-11-angularjs-ajax},
urldate = {2025-02-07}
}
Dùng http để kết nối với server ngoài không có được là sao vậy admin?