أحدث البرامج التعليمية وتطوير الشبكة
 

AngularJS أجاكس - $ 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 الخدمة.

طريقة. احصل هي طريقة الاختصار الخدمة $ 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 mySucces(response) {
        $scope.myWelcome = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});
انها محاولة لنفسك »

في المثال أعلاه ينفذ خدمة HTTP $ مع كائن كحجة. الكائن هو تحديد طريقة HTTP، عنوان الموقع، ما يجب القيام به على النجاح، وماذا تفعل على الفشل.

الخصائص

رد من الخادم هو كائن مع هذه الخصائص:

  • .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 البيانات التي تحصل عليها من الاستجابة.

JSON هو وسيلة رائعة لنقل البيانات، وأنه من السهل استخدام داخل AngularJS، أو أي جافا سكريبت الآخرين.

مثال: على خادم لدينا ملف بإرجاع كائن JSON تحتوي على 15 الزبائن، كل ملفوفة في مجموعة تسمى records .

نلقي نظرة على وجوه JSON.

×

customers.php 

 {{معلومات | سلمان}}

مثال

و 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 هو كائن مدعوم لطلب البيانات الخارجية.

$http.get() يقرأ البيانات JSON من http://www.w3ii.com/angular/customers.php .

على النجاح، وحدة تحكم يخلق الممتلكات، myData ، في نطاق، مع بيانات جسون من الخادم.


❮ السابق التالي الفصل ❯