Kết nối

[AngularJS] Phần 11: AngularJS http

6.312 lượt xem 
 Cập nhật lần cuối: 23/09/2023 lúc 09:56:34
Thể loại: AngularJS, Thiết kế Web 

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.

Liên quan:  [AngularJS] Phần 14: AngularJS và SQL

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.

Trích dẫn bài viết
  • 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}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Tùng TN
Tùng TN
7 năm trước

Dùng http để kết nối với server ngoài không có được là sao vậy admin?

1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x