با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. در این آموزش قصد داریم به چگونگی استفاده از سرویس http به عنوان AJAX در AngularJS ، بپردازیم. ما در آموزش بخش قبل، به اهمیت سرویس http$ اشاره کردیم و گفتیم که این سرویس پرکاربردترین سرویس آنگولار است. که برای درخواست داده ها از سرور استفاده می شود. اما در این بخش قصد داریم به بررسی بیشتر این سرویس پرداخته و کاربردهایی نظیر استفاده از AJAX را با استفاده از سرویس $http
توضیح دهیم.
همانطور که اشاره شده، $http
یک سرویس AngularJS برای خواندن داده ها از سرورهای راه دور است.
این سرویس ابتدا یک درخواست را به سرور ارسال کرده و سپس پاسخ را دریافت کرده و برمی گرداند.
$http
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div ng-app="myApp" ng-controller="myCtrl"> <p>Today's welcome message is:</p> <h1>{{myWelcome}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm") .then(function(response) { $scope.myWelcome = response.data; }); }); </script> |
متدها
در مثال بالا از متد .get
در سرویس $http
، استفاده شده است.
تابع .get
، یک تابع کوتاه از$http
است. متدهای دیگری نیز وجود دارد:
.delete()
.get()
.head()
.jsonp()
.patch()
.post()
.put()
روش های بالا همه میانبرهای فراخوانی سرویس http$ هستند:
1 2 3 4 5 6 7 8 9 10 11 | var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http({ method : "GET", url : "welcome.htm" }).then(function mySuccess(response) { $scope.myWelcome = response.data; }, function myError(response) { $scope.myWelcome = response.statusText; }); }); |
مثال فوق سرویس $http
را با یک شی به عنوان یک آرگومان اجرا می کند. هدف این است که مشخص کنیم در متد HTTP، چه وقت با موفقیت انجام می شود، و چه وقت به شکست می انجامد.
پاسخ دریافتی از سرور، شامل خصوصیات زیر می شود:
.config
:این شی برای تولید درخواست استفاده می شود..data
: پاسخ دریافتی از سرور را نگه داری می کند..headers
: تابعی برای استفاده از اطلاعات header است..status
: عددی است که وضعیت http را مشخص می کند..statusText
: رشته ی تعریف وضعیت http است.1 2 3 4 5 6 7 8 9 | var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm") .then(function(response) { $scope.content = response.data; $scope.statuscode = response.status; $scope.statustext = response.statusText; }); }); |
برای مدیریت خطاها، یکی دگیر از توابع را به متد .then
اضافه کنید:
1 2 3 4 5 6 7 8 9 10 11 | var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("wrongfilename.htm") .then(function(response) { //First function handles success $scope.content = response.data; }, function(response) { //Second function handles error $scope.content = "Something went wrong"; }); }); |
انتظار می رود داده هایی که از پاسخ سرور دریافت می کنید در قالب JSON باشد.
JSON یک راه عالی برای انتقال داده ها است و از AngularJS یا هر JavaScript دیگر استفاده می شود.
مثال:در سرور ما یک پرونده داریم که شی JSON را که حاوی ۱۵ مشتری است را بازگرداند،و همه در آرایه ای به نام records
قرار می گیرند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div ng-app="myApp" ng-controller="customersCtrl"> <ul> <li ng-repeat="x in myData"> {{ x.Name + ', ' + x.Country }} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("customers.php").then(function(response) { $scope.myData = response.data.records; }); }); </script> |
شرح مثال فوق:
برنامه یک کنترلر customersCtrl
را با یک شی$scoop
و$http
تعریف می کند.
سرویس $http
در واقع یک شی XMLHttpRequest object برای درخواست داده های اضافه است.
متد $http.get()
داده ها را از صفحه سرور customers.php
، می خواند.
کنترلر ویژگی myData
را در scope ، با استفاده از داده های JSON در سرور ایجاد می کند.
در مطالب فوق، که به منظور استفاده از http$ به عنوان AJAX در AngularJS برای شما ارائه گردید. شما را با بیشتر عملکرد سرویس $http
و متدهای آن، آشنا کردیم. امیدواریم که مطال فوق مورد توجه و استفاده ی شما قرار گرفته باشد.