مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. در این آموزش قصد داریم به چگونگی استفاده از سرویس http به عنوان AJAX در AngularJS ، بپردازیم. ما در آموزش بخش قبل، به اهمیت سرویس http$ اشاره کردیم و گفتیم که این سرویس پرکاربردترین سرویس آنگولار است. که برای درخواست داده ها از سرور استفاده می شود. اما در این بخش قصد داریم به بررسی بیشتر این سرویس پرداخته و کاربردهایی نظیر استفاده از AJAX را با استفاده از سرویس $http توضیح دهیم.
استفاده از http$ به عنوان AJAX در AngularJS
همانطور که اشاره شده، $http یک سرویس AngularJS برای خواندن داده ها از سرورهای راه دور است.
این سرویس ابتدا یک درخواست را به سرور ارسال کرده و سپس پاسخ را دریافت کرده و برمی گرداند.
مثال :
| <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$ هستند:
مثال :
| 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 است.
مثال :
| 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 اضافه کنید:
مثال :
| 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 باشد.
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 و متدهای آن، آشنا کردیم. امیدواریم که مطال فوق مورد توجه و استفاده ی شما قرار گرفته باشد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
