AngularJS AJAX – إجراء مكالمة AJAX باستخدام $http

من قبل: فريق التحرير فريق التحرير
Hours تحديث

أنجولار جي إس أجاكس

AJAX هو الشكل المختصر لـ Asynchronous Javaتم تصميم AJAX في المقام الأول لتحديث أجزاء من صفحة الويب، دون إعادة تحميل الصفحة بأكملها.

كان السبب في تصميم هذه التقنية هو تقليل عدد الرحلات ذهابًا وإيابًا التي تتم بين العميل والخادم وعدد تحديث الصفحة بالكامل والذي كان يتم عندما يطلب المستخدم معلومات معينة.

سمح AJAX بتحديث صفحات الويب بشكل غير متزامن من خلال تبادل كميات صغيرة من البيانات مع الخادم خلف الكواليس. وهذا يعني أنه كان من الممكن تحديث أجزاء من صفحة الويب، دون إعادة تحميل الصفحة بأكملها.

تتبع العديد من تطبيقات الويب الحديثة هذه التقنية لتحديث الصفحة أو الحصول على البيانات من الخادم.

تفاعلات عالية المستوى مع الخوادم باستخدام $resource

يوفر Angular واجهتي برمجة تطبيقات مختلفتين للتعامل مع طلبات Ajax. هم

  • $ الموارد
  • $http

سنلقي نظرة على خاصية "$resource" في Angular، والتي تُستخدم للتفاعل مع الخوادم على مستوى عالٍ.

عندما نتحدث عن التفاعل على مستوى أعلى، فهذا يعني أننا سننزعج فقط بشأن ما يقدمه الخادم فيما يتعلق بالوظائف، وليس بشأن ما يفعله الخادم بالضبط بالتفصيل فيما يتعلق بهذه الوظيفة.

على سبيل المثال، إذا كان الخادم يستضيف تطبيقًا يحتفظ بمعلومات الموظفين في شركة معينة، فقد يعرض الخادم وظائف للعملاء مثل GetEmployeeDetails، وSetEmployeeDetails، وما إلى ذلك.

لذا، على مستوى عالٍ، نعلم ما يمكن لهاتين الوظيفتين فعله، ويمكننا استدعاؤهما باستخدام خاصية $resource. ولكننا لا نعرف على وجه التحديد تفاصيل الوظيفتين "GetEmployeeDetails" و"SetEmployeeDetails"، وكيفية تنفيذهما.

يوضح التوضيح أعلاه ما يعرف بالهندسة المعمارية القائمة على REST.

  • يُعرف REST باسم نقل الحالة التمثيلية، وهو عبارة عن بنية تتبع في العديد من أنظمة الويب الحديثة.
  • هذا يعني أنه يمكنك استخدام أفعال HTTP العادية مثل GET وPOST وPUT وDELETE للعمل مع تطبيق قائم على الويب.

لنفترض أن لدينا تطبيق ويب يحتفظ بقائمة من الفعاليات.

إذا أردنا الوصول إلى قائمة بجميع الأحداث،

  • يمكن لتطبيق الويب أن يعرض URL مثل http://example/events و
  • يمكننا استخدام الفعل "GET" للحصول على القائمة الكاملة للأحداث إذا كان التطبيق يتبع بنية تعتمد على REST.

فعلى سبيل المثال، إذا كان هناك حدث برقم تعريف 1، فيمكننا الحصول على تفاصيل هذا الحدث عبر URL. http://example/events/1

ما هو كائن الموارد $

يساعد كائن $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. إزالة ([params]، postData، [success]، [error]) - يمكن استخدام هذا لإجراء استدعاء DELETE القياسي.

في جميع الدوال المذكورة أدناه، يمكن استخدام المعامل 'params' لتوفير المعاملات المطلوبة، والتي يجب تمريرها في URL.

على سبيل المثال،

  • لنفترض أنك قمت بتمرير قيمة Topic: 'Angular' كـ 'param' في دالة get as
  • يحصل('http://example/events'،'{ الموضوع: 'الزاوي' }')
  • استخدم URL http://example/events?Topic=Angular يتم استدعاؤه كجزء من وظيفة get.
لا تفوت:

كيفية استخدام خاصية الموارد AngularJS $

لكي تتمكن من استخدام الخاصية $resource، يجب اتباع الخطوات التالية:

الخطوة 1) يجب تنزيل الملف "angular-resource.js" من موقع Angular.JS ووضعه في التطبيق.

الخطوة 2) يجب أن تعلن وحدة التطبيق عن تبعيتها لوحدة "ngResource" حتى تتمكن من استخدام المورد $.

في المثال التالي، نقوم باستدعاء وحدة "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)` لاستدعاء نقطة نهاية 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() كائنًا فارغًا يتم ملؤه تلقائيًا عندما تأتي البيانات الفعلية من الخادم.
  • الوسيطة الثانية لـ 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 إلى وظيفة وحدة التحكم لدينا حتى نتمكن من استخدام وظيفة "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 قاعدة بيانات أو أسب.نت صفحة متصلة بـ MS SQL قاعدة بيانات الخادم، فأنت بحاجة إلى التأكد من أن كلاً من PHP وصفحة ASP.Net يعرضان البيانات بتنسيق JSON.

فيما يلي عملية خطوة بخطوة حول كيفية جلب البيانات من SQL و MySQL الخادم باستخدام AngularJS.

لنفترض أن لدينا موقع PHP (http://example /angular/getTopics.PHP) تقديم البيانات من أي منهما أ 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-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 هو غير متزامن Javaسيناريو و XML.
  • لقد ألقينا نظرة على ما أ مريح الهندسة المعمارية هي عبارة عن وظيفة يتم توفيرها بواسطة تطبيقات الويب استنادًا إلى أفعال HTTP العادية GET وPOST وPUT وDELETE.
  • يتم استخدام كائن $resource مع Angular للتفاعل مع تطبيقات الويب RESTFUL على مستوى عالٍ مما يعني أننا نستدعي فقط الوظيفة التي يعرضها تطبيق الويب ولكن لا نهتم بكيفية تنفيذ الوظيفة.
  • لقد نظرنا أيضًا إلى خدمة $http التي يمكن استخدامها للحصول على البيانات من تطبيق ويب. وهذا ممكن لأن خدمة $http يمكنها العمل مع تطبيقات الويب على مستوى أكثر تفصيلاً.
  • نظرًا لقوة خدمة $http، يمكن استخدامها للحصول على البيانات من ملف MySQL أو MS SQL Server عبر تطبيق PHP. يمكن بعد ذلك عرض البيانات في جدول باستخدام توجيه ng-repeat.

تلخيص هذه التدوينة بـ: