AJAX là dạng ngắn của JavaScript và XML không đồng bộ. 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 vòng lặp được thực hiện giữa máy khách và máy chủ và 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 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ủ phía sau. Điều này có nghĩa là có thể 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.
Nhiều ứng dụng web hiện đại thực sự tuân theo kỹ thuật này để làm mới trang hoặc lấy dữ liệu từ máy chủ.
Trong hướng dẫn này, bạn sẽ học-
- Tương tác cấp cao với máy chủ sử dụng $ resource
- Tương tác máy chủ cấp thấp với $ http
- Tìm nạp dữ liệu từ máy chủ chạy SQL và MySQL
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, được sử dụng để tương tác với các máy chủ ở cấp độ cao.
Khi chúng ta nói về 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ề những gì chính xác máy chủ làm 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 lưu trữ thông tin nhân viên của một công ty nhất định, máy chủ có thể hiển thị chức năng cho các máy khách như GetEaffeeDetails, SetEustingeeDetails, 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 về "GetEaffeeDetails" và "các hàm của SetEaffeeDetails", cũng như cách nó được triển khai.
Giải thích trên giải thích những gì được gọi là kiến trúc dựa trên REST.
- REST được gọi là Truyền trạng thái đại diện, là một kiến trúc được theo sau trong nhiều hệ thống dựa trên web hiện đại.
- Nó có nghĩa là bạn có thể sử dụng các động từ HTTP thông thường là 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ì danh sách Sự kiện.
Nếu chúng tôi 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 chẳng hạn như http: // example / sự kiện và
- Chúng ta có thể sử dụng động từ "GET" để lấy toàn bộ danh sách các sự kiện nếu ứng dụng đang tuân theo kiến trúc dựa trên REST.
Vì vậy, ví dụ: nếu có một Sự kiện có ID là 1, thì chúng tôi có thể lấy thông tin chi tiết của sự kiện này qua URL. http: // example / events / 1
Đối tượng $ resource là gì
Đối tượng $ resource trong Angular giúp làm việc với các máy chủ phục vụ các ứ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 bên dưới
Cú pháp của câu lệnh @resource
var resource Object = $resource(url);
Khi bạn đã có resourceObject trong tay, bạn có thể sử dụng các hàm dưới đây để 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 cuộc 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 cuộc 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 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 cung cấp 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
- get (' http: // example / events ', '{Topic:' Angular '}')
- URL http: // example / events? Topic = Angular được gọi như một phần của hàm get.
Cách sử dụng thuộc tính $ resource
Để sử dụng thuộc tính $ resource, cần làm theo các bước sau:
Bước 1) Tệp "angle-resource.js" cần được tải xuống từ trang Angular.JS và phải đặt trong ứng dụng.
Bước 2) Mô-đun ứng dụng phải khai báo phụ thuộc vào mô-đun "ngResource" để sử dụng tài nguyên $.
Trong ví dụ sau, chúng tôi đang gọi mô-đun "ngResource" từ ứng dụng 'DemoApp' của chúng tôi.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Bước 3) Gọi hàm $ resource () với điểm cuối REST của bạn, như thể hiện 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 các chức năng cần thiết được hiển thị bởi các điểm cuối REST.
Ví dụ sau 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
-
Khi xác định ứng dụng Angular, một dịch vụ đang đượ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.
-
Phương thức .factory được sử dụng để tạo các chi tiết của dịch vụ mới này.
-
'Entry' là tên mà 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.
-
Trong dịch vụ này, chúng tôi đang tạo một hàm sẽ gọi API $ resource
-
$ 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 tôi đang sử dụng URL (/ example / Event /: 1) làm điểm cuối REST của chúng tôi. Điểm cuối REST của chúng tôi (/ example / Event /: 1) biểu thị rằng có một ứng dụng Sự kiện trên trang web chính của chúng tôi "ví dụ". Ứ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.
-
Kết quả của lời 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ã dưới đây, chúng tôi đang sử dụng hàm get () làm ví dụ
Hãy xem đoạn 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);});
Trong 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 đến từ máy chủ.
- Đối số thứ hai để 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ả lại đượ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 trang PHP ( 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ủ
Trong ví dụ trên
- Chúng tôi đang thêm dịch vụ $ http vào chức năng Bộ điều khiển của mình để chúng tôi có thể sử dụng chức năng "lấy" của dịch vụ $ http.
- Bây giờ chúng tôi đ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
- 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.
- Sau đó, chúng tôi 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 chúng tôi để hiển thị các đối tượng JSON cho phù hợp.
Tìm nạp dữ liệu từ máy chủ chạy SQL và MySQL
Angular cũng có thể được sử dụng để tìm nạp dữ liệu từ máy chủ chạy MySQL hoặc SQL.
Ý tưởng là nếu bạn có một trang PHP kết nối với cơ sở dữ liệu MySQL hoặc trang Asp.Net kết nối với cơ sở dữ liệu máy chủ MS SQL, thì bạn cần đảm bảo cả PHP và trang ASP.Net đều hiển thị dữ liệu ở định dạng JSON.
Giả sử, chúng ta có một trang web PHP ( http: // example /angular/getTopics.PHP ) cung cấp dữ liệu từ cơ sở dữ liệu MySQL hoặc SQL.
Bước 1) Bước đầu tiên là đảm bảo rằng trang PHP lấy dữ liệu từ cơ sở dữ liệu MySQL và cung cấp dữ liệu ở định dạng JSON.
Bước 2) 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ủ
Bước 3) Hiển thị dữ liệu trong chế độ xem của bạn bằng cách sử dụng lệnh ng-repeat.
Dưới đây, chúng tôi đang sử dụng lệnh ng-repeat để xem 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à "Mô tả".
{{x.Name}} {{x.Description}}
Tóm lược:
- Chúng tôi đã xem xét kiến trúc RESTFUL là gì, không là gì ngoài một chức năng được các ứng dụng web hiển thị 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, có nghĩa là chúng tôi chỉ gọi chức năng được hiển thị bởi ứng dụng web nhưng không quan tâm đến cách chức năng được triển khai.
- 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ừ MySQL hoặc MS SQL Server thông qua ứng dụng PHP. Sau đó, dữ liệu có thể được hiển thị trong một bảng bằng cách sử dụng lệnh ng-repeat.