AngularJS AJAX – Thực hiện cuộc gọi AJAX bằng $http

Bởi: James Hartman James Hartman
Hours cập nhật

AngularJS AJAX

AJAX là viết tắt của Asynchronous JavaScript và XML. AJAX chủ yếu được thiết kế để cập nhật các phần của trang web mà không cần tải lại toàn bộ trang.

Lý do thiết kế công nghệ này là để giảm số lượng các chuyến đi khứ hồi được thực hiện giữa máy khách và máy chủ cũng như số lần làm mới toàn bộ trang thường diễn ra bất cứ khi nào người dùng yêu cầu một số thông tin nhất định.

AJAX cho phép các trang web được cập nhật không đồng bộ bằng cách trao đổi một lượng nhỏ dữ liệu với máy chủ ở chế độ nền. Điều này có nghĩa là có thể cập nhật một phần của trang web mà không cần tải lại toàn bộ trang.

Nhiều ứng dụng web hiện đại thực sự áp dụng kỹ thuật này để làm mới trang hoặc lấy dữ liệu từ máy chủ.

Tương tác cấp cao với máy chủ sử dụng $resource

Angular cung cấp hai API khác nhau để xử lý các yêu cầu Ajax. họ đang

  • tài nguyên $
  • $http

Chúng ta sẽ xem xét thuộc tính “$resource” trong Angular, thuộc tính này được sử dụng để tương tác với các máy chủ ở mức cao.

Khi chúng ta nói về việc tương tác ở cấp độ cao hơn, điều đó có nghĩa là chúng ta sẽ chỉ bận tâm về những gì máy chủ cung cấp liên quan đến chức năng chứ không phải về chính xác những gì máy chủ thực hiện chi tiết liên quan đến chức năng này.

Ví dụ, nếu máy chủ đang lưu trữ một ứng dụng quản lý thông tin nhân viên của một công ty nào đó, máy chủ có thể cung cấp chức năng cho các máy khách như GetEmployeeDetails, SetEmployeeDetails, v.v.

Vì vậy, ở cấp độ cao, chúng ta biết hai hàm này có thể làm gì và chúng ta có thể gọi chúng bằng thuộc tính $resource. Nhưng sau đó chúng ta không biết chính xác chi tiết của các hàm "GetEmployeeDetails" và "SetEmployeeDetails" và cách chúng được triển khai.

Lời giải thích ở trên giải thích về kiến ​​trúc dựa trên REST.

  • REST được gọi là Representational State Transfer, đây là một kiến ​​trúc được sử dụng trong nhiều hệ thống dựa trên web hiện đại.
  • Điều đó có nghĩa là bạn có thể sử dụng các động từ HTTP thông thường như GET, POST, PUT và DELETE để làm việc với một ứng dụng dựa trên web.

Vì vậy, giả sử chúng ta có một ứng dụng web duy trì một danh sách Sự kiện.

Nếu chúng ta muốn xem danh sách tất cả các sự kiện,

  • Ứng dụng web có thể hiển thị một URL như http://example/events và
  • Chúng ta có thể sử dụng động từ “GET” để lấy toàn bộ danh sách sự kiện nếu ứng dụng đang sử dụng kiến ​​trúc dựa trên REST.

Ví dụ, nếu có Sự kiện có ID là 1, thì chúng ta có thể lấy thông tin chi tiết về sự kiện này thông qua URL. http://example/events/1

Đối tượng tài nguyên $ là gì

Đối tượng $resource trong Angular giúp làm việc với các máy chủ phục vụ ứng dụng trên kiến ​​trúc dựa trên REST.

Cú pháp cơ bản của câu lệnh @resource cùng với các hàm khác nhau được đưa ra dưới đây

Cú pháp của câu lệnh @resource

var resource Object = $resource(url);

Khi đã có sẵn ResourceObject, bạn có thể sử dụng các hàm bên dưới để thực hiện các lệnh gọi REST cần thiết.

1. get([params], [success], [error]) – Điều này có thể được sử dụng để thực hiện lệnh gọi GET tiêu chuẩn.

2. save([params], postData, [success], [error]) – Điều này có thể được sử dụng để thực hiện lệnh gọi POST tiêu chuẩn.

3. query([params], [success], [error]) – Điều này có thể được sử dụng để thực hiện lệnh gọi GET tiêu chuẩn, nhưng một mảng được trả về như một phần của phản hồi.

4. Remove([params], postData, [success], [error]) – Điều này có thể được sử dụng để thực hiện lệnh gọi DELETE tiêu chuẩn.

Trong tất cả các hàm được đưa ra bên dưới, tham số 'params' có thể được sử dụng để cung cấp các tham số bắt buộc cần được chuyển vào URL.

Ví dụ,

  • Giả sử bạn chuyển một giá trị của Chủ đề: 'Angular' dưới dạng 'param' trong hàm get dưới dạng
  • lấy('http://example/events' ,'{ Chủ đề: 'Góc' }')
  • URL http://example/events?Topic=Angular được gọi như một phần của hàm get.

NHỮNG BÀI VIẾT LIÊN QUAN

Cách sử dụng thuộc tính tài nguyên AngularJS $

Để sử dụng thuộc tính $resource, cần thực hiện theo các bước sau:

Bước 1) Cần phải tải xuống tệp “angular-resource.js” từ trang Angular.JS và phải đặt vào ứng dụng.

Bước 2) Mô-đun ứng dụng phải khai báo sự phụ thuộc vào mô-đun “ngResource” để sử dụng $resource.

Trong ví dụ sau, chúng tôi đang gọi mô-đun “ngResource” từ ứng dụng 'DemoApp' của mình.

angular.module(DemoApp,['ngResource']); //DemoApp is our main module

Bước 3) Gọi hàm $resource() bằng điểm cuối REST của bạn, như được hiển thị trong ví dụ sau.

Nếu bạn làm điều này thì đối tượng $resource sẽ có khả năng gọi chức năng cần thiết được hiển thị bởi các điểm cuối REST.

Ví dụ sau đây gọi URL điểm cuối: http://example/events/1

angular.module('DemoApp.services').factory('Entry', function($resource) 
{
     return $resource('/example/Event/:1); // Note the full endpoint address
});

Trong ví dụ trên, những điều sau đây đang được thực hiện

  1. Khi xác định ứng dụng Angular, một dịch vụ sẽ được tạo bằng cách sử dụng câu lệnh 'DemoApp.services' trong đó DemoApp là tên được đặt cho ứng dụng Angular của chúng tôi.
  2. Phương thức .factory được sử dụng để tạo thông tin chi tiết cho dịch vụ mới này.
  3. 'Mục nhập' là tên chúng tôi đặt cho dịch vụ của mình, có thể là bất kỳ tên nào bạn muốn cung cấp.
  4. Trong dịch vụ này, chúng tôi đang tạo một hàm sẽ gọi API $resource
  5. $resource('/example/Event/:1). Hàm $resource là một dịch vụ được sử dụng để gọi một điểm cuối REST. Điểm cuối REST thường là một URL. Trong hàm trên, chúng ta sử dụng URL (/example /Event/:1) làm điểm cuối REST của chúng ta. Điểm cuối REST của chúng ta(/example /Event/:1) biểu thị rằng có một ứng dụng Sự kiện nằm trên trang web chính của chúng ta “example”. Ứng dụng Sự kiện này được phát triển bằng cách sử dụng kiến ​​trúc dựa trên REST.
  6. Kết quả của lệnh gọi hàm là một đối tượng lớp tài nguyên. Đối tượng tài nguyên bây giờ sẽ có các hàm ( get() , query() , save() , Remove(), delete() ) có thể được gọi.

Bước 4) Bây giờ chúng ta có thể sử dụng các phương thức được trả về ở bước trên (đó là get() , query() , save() , Remove(), delete() ) trong bộ điều khiển của chúng ta.

Trong đoạn mã bên dưới, chúng tôi đang sử dụng hàm get() làm ví dụ

Hãy xem mã có thể sử dụng hàm get().

angular.module('DemoApp.controllers',[]);
angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {
  var obj = MyFunction.get({ 1: $scope.id }, function() {
    console.log(obj);
  });

Ở bước trên,

  • Hàm get() trong đoạn mã trên đưa ra yêu cầu GET tới /example /Event/:1.
  • Tham số:1 trong URL được thay thế bằng $scope.id.
  • Hàm get() sẽ trả về một đối tượng trống được điền tự động khi dữ liệu thực tế đến từ máy chủ.
  • Đối số thứ hai của get() là một lệnh gọi lại được thực thi khi dữ liệu đến từ máy chủ. Đầu ra có thể có của toàn bộ mã sẽ là một đối tượng JSON sẽ trả về danh sách Sự kiện được hiển thị từ trang web "ví dụ". Ví dụ về những gì có thể được trả về được hiển thị bên dưới 
    {
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}

Tương tác máy chủ cấp thấp với $http

$http là một dịch vụ Angular JS khác được sử dụng để đọc dữ liệu từ các máy chủ từ xa. Dạng dữ liệu phổ biến nhất được đọc từ máy chủ là dữ liệu ở định dạng JSON.

Giả sử rằng chúng ta có một PHP trang ( http://example/angular/getTopics.PHP ) trả về dữ liệu JSON sau

"Topics": [
  {
    "Name" : "Controllers",
    "Description" : "Controllers in action"
  },
  {
    "Name" : "Models",
    "Description" : "Binding data using Models"
  },
  {
    "Name" : "Directives",
    "Description" : "Using directives in Angular"
  }
]

Hãy xem mã AngularJS sử dụng $http, có thể được sử dụng để lấy dữ liệu trên từ máy chủ

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example/angular/getTopics.PHP")
    .then(function(response) 
{
$scope.names = response.data.records;});
});
</script>

Trong ví dụ trên

  1. Chúng tôi đang thêm dịch vụ $http vào chức năng Bộ điều khiển để có thể sử dụng chức năng “get” của dịch vụ $http.
  2. Chúng tôi hiện đang sử dụng hàm get từ dịch vụ HTTP để lấy các đối tượng JSON từ URL http://example /angular/getTopics.PHP
  3. Dựa trên đối tượng 'response', chúng tôi đang tạo một hàm gọi lại sẽ trả về các bản ghi dữ liệu và sau đó chúng tôi sẽ lưu trữ chúng trong đối tượng $scope.
  4. Sau đó, chúng ta có thể sử dụng biến $scope.names từ bộ điều khiển và sử dụng nó trong chế độ xem của mình để hiển thị các đối tượng JSON tương ứng.

Cách lấy dữ liệu từ SQL và MySQL Máy chủ sử dụng AngularJS

Angular cũng có thể được sử dụng để lấy dữ liệu từ máy chủ đang chạy MySQL hoặc SQL.

Ý tưởng là nếu bạn có một trang PHP kết nối với một MySQL cơ sở dữ liệu hoặc một Asp.Net trang kết nối với MS SQL cơ sở dữ liệu máy chủ, thì bạn cần đảm bảo cả trang PHP và trang ASP.Net đều hiển thị dữ liệu ở định dạng JSON.

Sau đây là Quy trình từng bước về Cách lấy dữ liệu từ SQL và MySQL Máy chủ sử dụng AngularJS.

Giả sử chúng ta có một trang web PHP (http://example /angular/getTopics.PHP) cung cấp dữ liệu từ một MySQL hoặc cơ sở dữ liệu SQL.

Bước 1) Lấy dữ liệu từ một MySQL cơ sở dữ liệu
Bước đầu tiên là đảm bảo rằng trang PHP lấy dữ liệu từ một MySQL cơ sở dữ liệu và phục vụ dữ liệu ở định dạng JSON.

Bước 2) Nhận dữ liệu JSON bằng dịch vụ $http
Viết mã tương tự được hiển thị ở trên để sử dụng dịch vụ $http để lấy dữ liệu JSON.

Hãy xem mã AngularJS sử dụng $http có thể được sử dụng để lấy dữ liệu trên từ máy chủ

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example /angular/getTopics.PHP")
    .then(function(response) 
{
	$scope.topics = response.data.records;});
});
</script>

Bước 3) Kết xuất dữ liệu trong chế độ xem của bạn bằng cách sử dụng chỉ thị ng-repeat

Dưới đây chúng tôi đang sử dụng lệnh ng-repeat để đi qua từng cặp khóa-giá trị trong các đối tượng JSON được trả về bởi phương thức “get” của dịch vụ $http.

Đối với mỗi đối tượng JSON, chúng tôi đang hiển thị khóa là “Tên” và giá trị là “Description”.

<div ng-app="myApp" ng-controller="AngularCtrl"> 
<table>
  <tr ng-repeat="x in topics">
    <td>{{ x.Name }}</td>
    <td>{{ x.Description }}</td>
  </tr>
</table>
</div>

Tổng kết

  • Hình thức đầy đủ của AJAX là Asynchronous JavaScript và XML.
  • Chúng tôi đã xem xét những gì TUYỆT VỜI Kiến trúc là một chức năng được các ứng dụng web thể hiện dựa trên các động từ HTTP thông thường là GET, POST, PUT và DELETE.
  • Đối tượng $resource được sử dụng với Angular để tương tác với các ứng dụng web RESTFUL ở mức cao, điều đó có nghĩa là chúng ta chỉ gọi chức năng mà ứng dụng web hiển thị mà không bận tâm đến cách triển khai chức năng đó.
  • Chúng tôi cũng đã xem xét dịch vụ $http có thể được sử dụng để lấy dữ liệu từ một ứng dụng web. Điều này có thể thực hiện được vì dịch vụ $http có thể hoạt động với các ứng dụng web ở mức độ chi tiết hơn.
  • Do sức mạnh của dịch vụ $http, dịch vụ này có thể được sử dụng để lấy dữ liệu từ một MySQL hoặc MS SQL Server thông qua ứng dụng PHP. Dữ liệu sau đó có thể được hiển thị trong một bảng bằng cách sử dụng lệnh ng-repeat.

Bạn có thể thích: