AngularJS AJAX – โทร AJAX โดยใช้ $http

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

เชิงมุมJS AJAX

AJAX เป็นรูปแบบย่อของ Asynchronous Javaสคริปต์และ XML AJAX ได้รับการออกแบบมาโดยเฉพาะเพื่ออัปเดตส่วนต่างๆ ของเว็บเพจโดยไม่ต้องโหลดหน้าเพจทั้งหมดซ้ำ

เหตุผลในการออกแบบเทคโนโลยีนี้คือเพื่อลดจำนวนการเดินทางไปกลับระหว่างไคลเอนต์และเซิร์ฟเวอร์ และจำนวนการรีเฟรชเพจทั้งหมดซึ่งเคยเกิดขึ้นเมื่อผู้ใช้ต้องการข้อมูลบางอย่าง

AJAX อนุญาตให้อัปเดตหน้าเว็บแบบอะซิงโครนัสโดยแลกเปลี่ยนข้อมูลจำนวนเล็กน้อยกับเซิร์ฟเวอร์เบื้องหลัง ซึ่งหมายความว่าสามารถอัปเดตบางส่วนของหน้าเว็บได้โดยไม่ต้องโหลดหน้าเว็บทั้งหมดซ้ำ

เว็บแอปพลิเคชันสมัยใหม่จำนวนมากปฏิบัติตามเทคนิคนี้ในการรีเฟรชหน้าเว็บหรือรับข้อมูลจากเซิร์ฟเวอร์

การโต้ตอบระดับสูงกับเซิร์ฟเวอร์โดยใช้ $resource

Angular มี API ที่แตกต่างกันสองตัวเพื่อจัดการคำขอ Ajax พวกเขาคือ

  • $ทรัพยากร
  • $http

เราจะดูคุณสมบัติ “$resource” ใน Angular ซึ่งใช้เพื่อโต้ตอบกับเซิร์ฟเวอร์ในระดับสูง

เมื่อเราพูดถึงการโต้ตอบในระดับที่สูงกว่า นั่นหมายความว่าเราจะสนใจเฉพาะสิ่งที่เซิร์ฟเวอร์นำเสนอเกี่ยวกับฟังก์ชันการทำงานเท่านั้น ไม่ใช่เกี่ยวกับสิ่งที่เซิร์ฟเวอร์ทำโดยละเอียดเกี่ยวกับฟังก์ชันการทำงานนี้

ตัวอย่างเช่น หากเซิร์ฟเวอร์กำลังโฮสต์แอปพลิเคชันที่บำรุงรักษาข้อมูลพนักงานของบริษัทแห่งหนึ่ง เซิร์ฟเวอร์อาจเปิดเผยฟังก์ชันการทำงานต่างๆ ให้แก่ไคลเอนต์ เช่น GetEmployeeDetails, SetEmployeeDetails เป็นต้น

ดังนั้นในระดับสูง เรารู้ว่าฟังก์ชันทั้งสองนี้สามารถทำอะไรได้บ้าง และเราสามารถเรียกใช้งานฟังก์ชันเหล่านี้ได้โดยใช้คุณสมบัติ $resource แต่เราไม่ทราบรายละเอียดที่แน่ชัดของฟังก์ชัน “GetEmployeeDetails” และ “SetEmployeeDetails” และวิธีการใช้งาน

คำอธิบายข้างต้นอธิบายถึงสิ่งที่เรียกว่าสถาปัตยกรรมที่ใช้ REST

  • REST เป็นที่รู้จักกันในชื่อ Representational State Transfer ซึ่งเป็นสถาปัตยกรรมที่ใช้ในระบบบนเว็บที่ทันสมัยหลายแห่ง
  • หมายความว่าคุณสามารถใช้กริยา HTTP ปกติของ GET, POST, PUT และ DELETE เพื่อทำงานกับแอปพลิเคชันบนเว็บได้

สมมติว่าเรามีเว็บแอปพลิเคชันที่เก็บรักษารายการของ อีเวนต์.

หากเราต้องการดูรายการเหตุการณ์ทั้งหมด

  • เว็บแอปพลิเคชันสามารถเปิดเผย URL เช่น http://example/events และ
  • เราสามารถใช้คำกริยา “GET” เพื่อรับรายการเหตุการณ์ทั้งหมดได้ หากแอปพลิเคชันปฏิบัติตามสถาปัตยกรรมที่ใช้ REST

ตัวอย่างเช่น หากมีกิจกรรมที่มี ID 1 เราก็สามารถรับรายละเอียดของกิจกรรมนั้นได้ผ่าน URL http://example/events/1

วัตถุ $resource คืออะไร

วัตถุ $resource ใน Angular ช่วยในการทำงานกับเซิร์ฟเวอร์ที่ให้บริการแอปพลิเคชันบนสถาปัตยกรรมที่ใช้ REST

ไวยากรณ์พื้นฐานของคำสั่ง @resource พร้อมด้วยฟังก์ชันต่างๆ มีดังต่อไปนี้

ไวยากรณ์ของคำสั่ง @resource

var resource Object = $resource(url);

เมื่อคุณมี ResourceObject อยู่ในมือแล้ว คุณสามารถใช้ฟังก์ชันด้านล่างเพื่อทำการเรียก REST ที่จำเป็นได้

1. get([params], [success], [error]) – สามารถใช้โทร GET มาตรฐานได้

2. save([params], postData, [success], [error]) – สามารถใช้เพื่อทำการเรียก POST มาตรฐาน

3. query([params], [success], [error]) – สามารถใช้เพื่อทำการเรียก GET มาตรฐานได้ แต่อาร์เรย์จะถูกส่งกลับเป็นส่วนหนึ่งของการตอบกลับ

4. Remove([params], postData, [success], [error]) – สามารถใช้เพื่อทำการเรียก DELETE มาตรฐาน

ในฟังก์ชันทั้งหมดที่ระบุด้านล่าง พารามิเตอร์ 'params' สามารถใช้เพื่อจัดเตรียมพารามิเตอร์ที่จำเป็น ซึ่งจำเป็นต้องส่งผ่านใน URL

ตัวอย่างเช่น

  • สมมติว่าคุณส่งค่า Topic: 'Angular' เป็น 'param' ในฟังก์ชัน get as
  • รับ('http://example/events' ,'{ หัวข้อ: 'เชิงมุม' }')
  • URL http://example/events?Topic=Angular ได้รับการเรียกใช้เป็นส่วนหนึ่งของฟังก์ชัน get

บทความที่เกี่ยวข้อง

วิธีใช้คุณสมบัติ $resource ของ AngularJS

เพื่อที่จะใช้คุณสมบัติ $resource จำเป็นต้องปฏิบัติตามขั้นตอนต่อไปนี้:

ขั้นตอน 1) จำเป็นต้องดาวน์โหลดไฟล์ “angular-resource.js” จากไซต์ Angular.JS และต้องวางไว้ในแอปพลิเคชัน

ขั้นตอน 2) โมดูลแอปพลิเคชันควรประกาศการพึ่งพาโมดูล “ngResource” เพื่อที่จะใช้ $resource

ในตัวอย่างต่อไปนี้ เราเรียกใช้โมดูล “ngResource” จากแอปพลิเคชัน 'DemoApp' ของเรา

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

ขั้นตอน 3) การเรียกใช้ฟังก์ชัน $resource() ด้วยจุดสิ้นสุด REST ของคุณ ดังที่แสดงในตัวอย่างต่อไปนี้

หากคุณทำเช่นนี้ ออบเจ็กต์ $resource จะสามารถเรียกใช้ฟังก์ชันที่จำเป็นซึ่งเปิดเผยโดยตำแหน่งข้อมูล REST ได้

ตัวอย่างต่อไปนี้จะเรียก URL จุดสิ้นสุด: http://example/events/1

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

ในตัวอย่างข้างต้นมีการดำเนินการสิ่งต่อไปนี้

  1. เมื่อกำหนดแอปพลิเคชัน Angular บริการจะถูกสร้างขึ้นโดยใช้คำสั่ง 'DemoApp.services' โดยที่ DemoApp เป็นชื่อที่กำหนดให้กับแอปพลิเคชัน Angular ของเรา
  2. ใช้วิธีการ .factory เพื่อสร้างรายละเอียดของบริการใหม่นี้
  3. 'รายการ' คือชื่อที่เรามอบให้กับบริการของเรา ซึ่งสามารถเป็นชื่อใดก็ได้ที่คุณต้องการระบุ
  4. ในบริการนี้ เรากำลังสร้างฟังก์ชันที่จะเรียกใช้ $resource API
  5. $resource('/example/Event/:1) ฟังก์ชัน $resource เป็นบริการที่ใช้เรียกจุดสิ้นสุด REST จุดสิ้นสุด REST มักจะเป็น URL ในฟังก์ชันด้านบน เราใช้ URL (/example /Event/:1) เป็นจุดสิ้นสุด REST จุดสิ้นสุด REST (/example /Event/:1) ของเราบ่งบอกว่ามีแอปพลิเคชัน Event อยู่ในไซต์หลัก "example" ของเรา แอปพลิเคชัน Event นี้ได้รับการพัฒนาโดยใช้สถาปัตยกรรมที่ใช้ REST
  6. ผลลัพธ์ของการเรียกใช้ฟังก์ชันคือวัตถุคลาสทรัพยากร ขณะนี้วัตถุทรัพยากรจะมีฟังก์ชัน ( get() , query() , save() , Remove(), Delete() ) ซึ่งสามารถเรียกใช้ได้

ขั้นตอน 4) ตอนนี้เราสามารถใช้วิธีการที่ถูกส่งกลับมาในขั้นตอนข้างต้น (ซึ่งได้แก่ get() , query() , save() , Remove(), Delete() ) ในคอนโทรลเลอร์ของเรา

ในตัวอย่างโค้ดด้านล่าง เราใช้ฟังก์ชัน get() เป็นตัวอย่าง

มาดูโค้ดที่สามารถใช้ฟังก์ชัน 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);
  });

ในขั้นตอนข้างต้น

  • ฟังก์ชัน get() ในตัวอย่างด้านบนจะส่งคำขอ GET ไปที่ / example /Event/:1
  • พารามิเตอร์:1 ใน URL จะถูกแทนที่ด้วย $scope.id
  • ฟังก์ชัน get() จะส่งคืนออบเจ็กต์ว่างซึ่งจะถูกเติมโดยอัตโนมัติเมื่อข้อมูลจริงมาจากเซิร์ฟเวอร์
  • อาร์กิวเมนต์ที่สองที่จะได้รับ () คือการเรียกกลับซึ่งจะดำเนินการเมื่อข้อมูลมาถึงจากเซิร์ฟเวอร์ ผลลัพธ์ที่เป็นไปได้ของโค้ดทั้งหมดจะเป็นออบเจ็กต์ JSON ซึ่งจะส่งคืนรายการเหตุการณ์ที่เปิดเผยจากเว็บไซต์ "ตัวอย่าง" ตัวอย่างของสิ่งที่สามารถส่งคืนได้แสดงอยู่ด้านล่าง 
    {
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}

การโต้ตอบของเซิร์ฟเวอร์ระดับต่ำกับ $http

$http เป็นอีกหนึ่งบริการ Angular JS ที่ใช้ในการอ่านข้อมูลจากเซิร์ฟเวอร์ระยะไกล รูปแบบข้อมูลที่ได้รับความนิยมมากที่สุดที่อ่านจากเซิร์ฟเวอร์คือข้อมูลในรูปแบบ JSON

สมมติว่าเรามี PHP หน้า ( http://example/angular/getTopics.PHP ) ที่ส่งคืนข้อมูล JSON ต่อไปนี้

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

มาดูโค้ด AngularJS ที่ใช้ $http ซึ่งสามารถใช้เพื่อรับข้อมูลข้างต้นจากเซิร์ฟเวอร์

<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>

ในตัวอย่างข้างต้น

  1. เรากำลังเพิ่มบริการ $http ให้กับฟังก์ชัน Controller ของเรา เพื่อให้เราสามารถใช้ฟังก์ชัน "get" ของบริการ $http ได้
  2. ขณะนี้เรากำลังใช้ฟังก์ชัน get จากบริการ HTTP เพื่อรับออบเจ็กต์ JSON จาก URL http://example /angular/getTopics.PHP
  3. ขึ้นอยู่กับวัตถุ 'ตอบสนอง' เรากำลังสร้างฟังก์ชันการโทรกลับซึ่งจะส่งคืนบันทึกข้อมูลและต่อมาเราจะจัดเก็บไว้ในวัตถุ $scope
  4. จากนั้นเราสามารถใช้ตัวแปร $scope.names จากคอนโทรลเลอร์และใช้ในมุมมองของเราเพื่อแสดงออบเจ็กต์ JSON ตามลำดับ

วิธีดึงข้อมูลจากจาก SQL และ MySQL เซิร์ฟเวอร์ที่ใช้ AngularJS

Angular ยังสามารถใช้เพื่อดึงข้อมูลจากเซิร์ฟเวอร์ที่ทำงานอยู่ MySQL หรือ SQL

แนวคิดก็คือถ้าคุณมีหน้า PHP ที่เชื่อมต่อกับ MySQL ฐานข้อมูลหรือ Asp.Net หน้าเชื่อมต่อกับ MS SQL ฐานข้อมูลเซิร์ฟเวอร์ คุณต้องแน่ใจว่าทั้งหน้า PHP และ ASP.Net แสดงผลข้อมูลในรูปแบบ JSON

ต่อไปนี้เป็นกระบวนการทีละขั้นตอนในการดึงข้อมูลจาก SQL และ MySQL เซิร์ฟเวอร์ที่ใช้ AngularJS

สมมติว่าเรามีไซต์ PHP (http://example /angular/getTopics.PHP) ให้บริการข้อมูลจาก a MySQL หรือฐานข้อมูล SQL

ขั้นตอน 1) นำข้อมูลจาก ก MySQL ฐานข้อมูล
ขั้นตอนแรกคือต้องแน่ใจว่าหน้า PHP นำข้อมูลจากไฟล์ MySQL ฐานข้อมูลและให้บริการข้อมูลในรูปแบบ JSON

ขั้นตอน 2) รับข้อมูล JSON โดยใช้บริการ $http
เขียนโค้ดที่คล้ายกันที่แสดงด้านบนเพื่อใช้บริการ $http เพื่อรับข้อมูล JSON

มาดูโค้ด AngularJS โดยใช้ $http ซึ่งสามารถใช้เพื่อรับข้อมูลข้างต้นจากเซิร์ฟเวอร์

<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>

ขั้นตอน 3) แสดงผลข้อมูลในมุมมองของคุณโดยใช้ คำสั่ง ng-ซ้ำ

ด้านล่างนี้ เราใช้คำสั่ง ng-repeat เพื่อดูคู่คีย์-ค่าแต่ละคู่ในออบเจ็กต์ JSON ที่ส่งคืนโดยเมธอด "get" ของบริการ $http

สำหรับออบเจ็กต์ JSON แต่ละรายการ เรากำลังแสดงคีย์ซึ่งก็คือ "ชื่อ" และค่าคือ "Descriptไอออน".

<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>

สรุป

  • รูปแบบเต็มของ AJAX คือ Asynchronous Javaต้นฉบับ และ XML
  • เรามาดูกันว่ามีอะไรบ้าง สงบ สถาปัตยกรรมคือสิ่งที่เป็นเพียงฟังก์ชันการทำงานที่เปิดเผยโดยแอปพลิเคชันเว็บโดยอิงตามคำกริยา HTTP ทั่วไป ได้แก่ GET, POST, PUT และ DELETE
  • อ็อบเจ็กต์ $resource ใช้กับ Angular เพื่อโต้ตอบกับเว็บแอปพลิเคชัน RESTFUL ในระดับสูง ซึ่งหมายความว่าเราจะเรียกใช้ฟังก์ชันที่เปิดเผยโดยเว็บแอปพลิเคชันเท่านั้น แต่ไม่สนใจว่าฟังก์ชันจะถูกนำไปใช้อย่างไร
  • นอกจากนี้เรายังดูบริการ $http ซึ่งสามารถใช้เพื่อรับข้อมูลจากเว็บแอปพลิเคชัน สิ่งนี้เป็นไปได้เนื่องจากบริการ $http สามารถทำงานกับเว็บแอปพลิเคชันได้ในระดับที่มีรายละเอียดมากขึ้น
  • เนื่องจากประสิทธิภาพของบริการ $http จึงสามารถใช้เพื่อรับข้อมูลจาก MySQL หรือ MS SQL Server ผ่านแอปพลิเคชัน PHP ข้อมูลสามารถแสดงผลในตารางโดยใช้คำสั่ง ng-repeat

สรุปโพสต์นี้ด้วย: