AngularJS - AJAX - Amzuni - Học lập trình trực tuyến

AngularJS – AJAX: Kết nối ứng dụng với dữ liệu từ server

AJAX (Asynchronous JavaScript and XML) là một kỹ thuật cho phép các trang web cập nhật một phần nội dung mà không cần tải lại toàn bộ trang. Trong AngularJS, việc thực hiện AJAX trở nên đơn giản và hiệu quả nhờ service $http.

Tại sao cần sử dụng AJAX trong AngularJS?

Tương tác với server: Gửi yêu cầu đến server để lấy dữ liệu, gửi dữ liệu đến server để lưu trữ, cập nhật hoặc xóa dữ liệu.
Tạo các ứng dụng đơn trang (SPA): Cập nhật nội dung trang một cách động mà không cần tải lại toàn bộ trang, mang lại trải nghiệm người dùng mượt mà hơn.
Tải dữ liệu một cách hiệu quả: Chỉ tải những dữ liệu cần thiết, giảm thiểu thời gian tải trang.

Service $http trong AngularJS

$http là một service cốt lõi trong AngularJS, được sử dụng để thực hiện các yêu cầu HTTP.
Nó hỗ trợ các phương thức HTTP phổ biến như GET, POST, PUT, DELETE, HEAD, JSONP.
Cú pháp cơ bản:

JavaScript

$http({
  method: 'GET',
  url: '/api/users'
})
.then(function(response) {
  // Xử lý dữ liệu trả về thành công
  $scope.users = response.data;
}, function(error) {
  // Xử lý lỗi
  console.error('Có lỗi xảy ra:', error);
});

Ví dụ thực tế: Lấy danh sách người dùng từ server

HTML

<div ng-app="myApp" ng-controller="MyController">
  <ul>
    <li ng-repeat="user in users">{{ user.name }}</li>
  </ul>
</div>

JavaScript

angular.module('myApp', [])
  .controller('MyController', function($scope, $http) {
    $http.get('/api/users')
      .then(function(response) {
        $scope.users = response.data;
      });
  });

Các phương thức phổ biến của $http

$http.get(url): Thực hiện yêu cầu GET.
$http.post(url, data): Thực hiện yêu cầu POST.
$http.put(url, data): Thực hiện yêu cầu PUT.
$http.delete(url): Thực hiện yêu cầu DELETE.
$http.head(url): Thực hiện yêu cầu HEAD.
$http.jsonp(url): Thực hiện yêu cầu JSONP.

Các thuộc tính cấu hình của $http

method: Phương thức HTTP (GET, POST, PUT, DELETE, HEAD, JSONP).
url: URL của API.
data: Dữ liệu gửi kèm theo yêu cầu.
headers: Các header tùy chỉnh.
params: Các tham số truy vấn.

Ưu điểm của việc sử dụng $http trong AngularJS

Dễ sử dụng: Cú pháp đơn giản, dễ hiểu.
Tích hợp sẵn: Không cần thêm thư viện bên ngoài.
Hỗ trợ đầy đủ các phương thức HTTP: Đáp ứng được hầu hết các nhu cầu của ứng dụng.
Xử lý lỗi tốt: Có thể dễ dàng xử lý các lỗi xảy ra trong quá trình gọi API.

Những điều cần lưu ý

CORS: Nếu bạn đang gọi API từ một domain khác, bạn cần cấu hình CORS trên server để cho phép các yêu cầu cross-origin.
Bảo mật: Khi gửi dữ liệu nhạy cảm, hãy sử dụng HTTPS để bảo mật dữ liệu truyền đi.
Xử lý lỗi: Luôn xử lý các lỗi có thể xảy ra trong quá trình gọi API để đảm bảo ứng dụng hoạt động ổn định.

Tóm lại, $http là một công cụ mạnh mẽ trong AngularJS, giúp bạn dễ dàng thực hiện các yêu cầu AJAX và kết nối ứng dụng của mình với các dịch vụ backend.

AngularJS – AJAX