AngularJS AJAX - $ http
http $ هي خدمة AngularJS لقراءة البيانات من الخوادم البعيدة.
AngularJS $ http
تقدم خدمة AngularJS $httpطلبًا إلى الخادم ، وتقوم بإرجاع استجابة.
مثال
قم بتقديم طلب بسيط إلى الخادم ، واعرض النتيجة في رأس:
<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 وعنوان url وما يجب فعله عند النجاح وما يجب فعله عند الفشل.
الخصائص
الاستجابة من الخادم هي كائن بهذه الخصائص:
.configالكائن المستخدم في إنشاء الطلب..dataسلسلة أو كائن يحمل الاستجابة من الخادم..headersدالة لاستخدامها للحصول على معلومات الرأس..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 هي طريقة رائعة لنقل البيانات ، وهي سهلة الاستخدام داخل AngularJS أو أي JavaScript آخر.
مثال: لدينا على الخادم ملف يقوم بإرجاع كائن JSON يحتوي على 15 عميلًا ، وكلهم ملفوف في مصفوفة تسمى records.
انقر هنا لإلقاء نظرة على كائن JSON.
مثال
التوجيه ng-repeatمثالي للتكرار الحلقي عبر مصفوفة:
<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وحدة التحكم ، مع
كائن $scopeوكائن
$http.
$httpهو كائن XMLHttpRequest لطلب البيانات الخارجية.
$http.get()يقرأ بيانات JSON من
https://www.w3schools.com/angular/customers.php .
عند النجاح ، تنشئ وحدة التحكم خاصية ، myDataفي النطاق ، ببيانات JSON من الخادم.