Tìm Hiểu AngularJS - Ajax $http (P5)

Bài đăng này đã không được cập nhật trong 9 năm

Bài viết lần này mình sẽ đi giải quyết vấn đề: "Bạn muốn lấy dữ liệu JSON thông qua request Ajax và sử dụng chúng".
Trong AngularJS, bạn có thể dùng các cách dưới đây để gửi một request Ajax:
- Lời gọi AJAX thông qua $http service
- Lời gọi JSONP thông qua $http service
- Lời gọi kiểu REST
Để giải quyết vấn đề trên ta sẽ sử dụng $http service để lấy dữ liệu và lưu chúng vào scope.

$http Service

$http service là cách đơn giản nhất để gửi một lời gọi AJAX tới Web server của bạn. Nhưng bạn cần lưu ý rằng lời gọi AJAX này không thể được gửi tới tên miền khác ngoài tên miền của trang HTML nơi bạn gọi AJAX. Chẳng hạn, nếu trang HTML của bạn được tải từ viblo.aisa thì trang HTML đó chỉ có thể tạo một lời gọi AJAX tới URLs thuộc về tên miền viblo.aisa
Ví dụ giải pháp cho vấn đề ban đầu sẽ như sau:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="utf8">
        <title>AngularJS Ajax</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <script>
            var app = angular.module("MyApp", []);
            app.controller("PostsCtrl", function($scope, $http) {
              $http.get('data/posts.json').
                success(function(data, status, headers, config) {
                  $scope.posts = data;
                }).
                error(function(data, status, headers, config) {
                  // log error
                });
            });
        </script>
    </head>
    <body ng-app="MyApp">
      <div ng-controller="PostsCtrl">
        <ul ng-repeat="post in posts">
          <li>{{post.title}}</li>
        </ul>
      </div>
    </body>
</html>

Lưu ý hàm trong controller được khai báo với 2 tham số, một tham số là đối tượng $scope và một tham số là đối tượng $http và chính đối tượng $http được sử dụng để tạo lời gọi AJAX.
Hàm $http.get() đùng để đọc dữ liệu từ server mà ở cụ thể là từ url "data/posts.json". Sau đó gọi đến 2 hàm là success() và error() rồi truyền tham số vào chúng. Khi lời gọi AJAX kết thúc nếu lời gọi thành công (server sẽ trả về một mã HTTP từ 200 đến 209), các câu lệnh trong hàm success() sẽ được thực hiện. Nếu lời gọi AJAX lỗi, các câu lệnh trong hàm error() sẽ được thực hiện.
Như vậy vấn đề đã được giải quyết, data lấy được từ server sẽ được gán vào scope và tùy ý bạn sử dụng trên view.
Ở đây file posts.json sẽ có dạng như sau:

    {
    "records": [
      {
        "title" : "AngularJS AJAX - $http",
        "content" : "$http is an AngularJS service for reading data from remote servers.",
      },
      {
        "title" : "Requesting JSON data with AJAX",
        "content" : "You wish to fetch JSON data via AJAX request and render it.",
      }
    ]
    }

Và kết quả thu được như sau:

AngularJS AJAX - $http

Requesting JSON data with AJAX

$http Functions

Ngoài hàm $http.get() ở trên thì $http service còn định nghĩa sẵn một số hàm được sử dụng để gửi AJAX requests như sau:
- $http.post(url, data, config)
- $http.put(url, data, config)
- $http.delete(url, config)
- $http.head(url, config)
Bạn hãy để ý phần tham số và tất nhiên cả hàm get cũng có $http.get(url, config), tham số url là chuỗi còn config là đối tượng có thể có hoặc không.
Hàm $http.post() và $http.put() yêu cầu một tham số data thứ sẽ lưu dữ liệu để gửi lên server. Tham số data này sẽ được chuyển thàng dạng chuỗi JSON, chuỗi này sẽ được truyền trong request body khi http request được gửi tới server.

Tham số config

Tham số config truyền đến các hàm $http khác nhau điều khiển HTTP request tới server. Tham số này là một đối tượng Javascript thứ có thể bao gồm các thuộc tính sau:
- method
- url
- params
- headers
- timeout
- cache
method: được sử dụng để thiết lập phương thức HTTP cho request, phương thức này có thể là GET, POST, PUT, DELETE hoặc HEAD. Thuộc tính này bình thường được thiết lập thông qua hàm bạn chọn để gọi trên $http service, vì vậy trong thực tế ban hiếm khi phải thiết lập thuộc tính này.
url: sử dụng để thiết lập URL của lời gọi AJAX. Nó đã được cung cấp trong các hàm của $https nên bạn cũng ít khi phải thiết lập nó lần nữa trong đối tượng config.
params dùng để thiết lập bất cứ một tham số yêu cầu nào được gắn thêm trên chuỗi URL.
headers: được sử dụng để thiết lập bất kỳ HTTP headers nào bạn muốn gửi lên server. Headers là một đối tượng Javascript với một thuộc tính cho mỗi headers.
timeout: dùng để thiết lập thời gian giới hạn cho một yêu cầu AJAX. Khi thời gian giới hạn đã hết, lời gọi AJAX bị bỏ qua. Thời gian giới hạn được xác định bởi miliseconds.
cache: cho phép XHR GET yêu cầu bộ nhớ đệm.
Ngoài ra nếu bạn để ý ở phần ví dụ giải quyết vấn đề ban đầu sẽ thấy hàm success() và error() có tham số: data là một đối tượng JSON trả về từ server, status là mã trạng thái HTTP trả về sau khi thực hiện request AJAX.

Kết luận và tham khảo

Ở bài nay ta cần ghi nhớ các $http functions, các tham số config để sử dụng tương ứng với các trường hợp khác nhau. Ngoài ra bạn còn phải nắm được các HTTP status codes mà server trả về, nó sẽ giúp quá trình debug của bạn dễ dàng hơn.
Và dưới đây là một số nguồn mình tham khảo trong khi viết bài:

https://docs.angularjs.org/api/ng/service/ $http](https://docs.angularjs.org/api/ng/service/$ .

http://tutorials.jenkov.com/angularjs/ajax.html.

http://fdietz.github.io/recipes-with-angular-js/consuming-external-services/requesting-json-data-with-ajax.html

Nếu các bạn có ý kiến đóng góp xin vui lòng để lại comment bên dưới, chúng ta sẽ cùng nhau mổ xẻ vấn đề. Xin cảm ơn!

$http Service

$http Functions

Tham số config

Kết luận và tham khảo

Mục lục