تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: اذهب أبعد من ذلك مع أجاكس


الصفحة السابقة
في هذه المرحلة من الدورة التدريبية ، تعرف كيفية تحديث جزء من صفحة ويب باستخدام الطريقة load() . سننظر الآن في وظائف jQuery إضافية.
تختلف الطرق عن الوظائف لأنها تنطبق على العناصر التي تم الحصول عليها من خلال محدد jQuery . في $('selector').meth(parameters); ، meth هي طريقة ، بينما في $.fonc(parameters); ، fonc هي وظيفة.

قم بتحميل سكريبت وبيانات JSON


تحميل سكريبت
تتيح لك الوظيفة $.getScript() تحميل (بشكل غير متزامن) ثم تنفيذ ملف JavaScript . في أبسط صيغه ، فقط حدد عنوان URL للملف المراد تحميله:

$.getScript('adress'); 
في بناء الجملة الثاني ، يتم تحديد دالة الإرجاع كمٌدخل ثاني للدالة. يتم تنفيذ هذه الوظيفة عند تحميل شفرة JavaScript وتنفيذها:

$.getScript('adress', function() {
  // تعليمات
}); 
تحميل البيانات المشفرة في JSON
JavaScript Object Notation (JSON ) عبارة عن تنسيق بيانات نصي يمكن استخدامه لتمثيل المعلومات المنظمة. فيما يلي مثال للبيانات بتنسيق JSON :

{ 
  'menu': 'File', 
  'command': [ 
      {
          'nomCde': 'New', 
          'action':'CreateDoc'
      }, 
      {
          'nomCde': 'Open', 
          'action': 'OpenDoc'
      }, 
      {
          'nomCde': Save as',
          'action': 'SaveAs'
      }
      {
          'nomCde': 'Close',
          'action': 'CloseDoc'
      }
   ] 
} 
كما ترون من هذا الرمز ، يتكون ملف JSON من مجموعة من الأزواج 'name':'value' مرتبة ترتيبًا هرميًا. هنا على سبيل المثال، أسماء menu و commandهي على نفس المستوى. أما بالنسبة للأسماء nomCde، و action هذا هو اسم الطفل command .
في حياة مبرمج jQuery ، قد يضطر إلى معالجة البيانات بتنسيق JSON . لهذا ، سوف تقوم بتحميل ملف بيانات JSON مع الوظيفة $.getJSON() ، ثم ستعمل على البيانات المختلفة التي تقوم بتكوينها باستخدام وظيفة رد الاتصال.
لفهم كيفية الوصول إلى البيانات من ملف مشفر JSON تمامًا ، سنناقش مثالًا بسيطًا يتضمن أربعة أزواج 'name':'value' من نفس المستوى:

{
  "name": "Pierre Durand",
  "age": "27",
  "town": "Paris",
  "domain": "HTML5, CSS3, JavaScript"
} 
وفي ما يلي شفرة HTML / jQuery المستخدمة لمعالجة هذه البيانات:

<button id="charger">تحميل ومعالجة البيانات</button>
<div id="r"> انقر فوق "تحميل ومعالجة البيانات" لبدء قراءة ومعالجة بيانات JSON </div>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#charger').click(function() {
        $.getJSON('fichier.json', function(data) {
        $('#r').html('<p><b>الاسم</b> : ' + data.name + '</p>');
        $('#r').append('<p><b>العمر</b> : ' + data.age + '</p>');
        $('#r').append('<p><b>المدينة</b> : ' + data.town + '</p>');
        $('#r').append('<p><b>الاختصاص</b> : ' + data.domain + '</p>');
      });
    });  
  });
</script> 
عند النقر فوق الزر ، getJSON() يتم تنفيذ الوظيفة لتحميل ملف البيانات fichier.json :

$.getJSON('fichier.json', function(data) { 
المُدخل الثاني للدالة getJSON() يتوافق مع وظيفة رد الاتصال. يتم تنفيذ هذه الوظيفة عند تحميل ملف البيانات بالكامل. لاحظ الكلمة data التي تم تمريرها كمُدخل وظيفة رد الاتصال. من خلالها ستكون بيانات JSON متاحة.
في البداية ، data.nameيتم استخراج القيمة المطابقة للاسم ( html()) من ملف البيانات ووضعها في نموذج HTML ( ) في العلامة <div> #r . بما أننا نمر بالطريقة html() لتعبئة العلامة <div>، من الممكن استخدام سمات التنسيق. هنا ، كلمة "الاسم" بالخط العريض مع علامة HTML <b> :

$('#r').html('

الاسم : ' + data.name + '

');
ثم يتم استخراج بيانات العمُر( data.age) من ملف البيانات ووضعها بعد الاسم ، في فقرة جديدة. هنا أيضًا ، يتم كتابة اسم الحقل بخط عريض باستخدام علامة HTML <b> .
تعليمتين مماثلتين لاستخراج البيانات المدينة و الاختصاص من ملف البيانات JSON ويعرض اسم والفئات العمرية التالية:

$('#r').append('

المدينة : ' + data.town + '

'); $('#r').append('

الاختصاص : ' + data.domain + '

');
يوضح الشكل التالي عرض هذا الرمز في المتصفح.
jQuery web
استعادة البيانات في ملف JSON

الدالة $.AJAX ()


تركت الأفضل للأخير: الوظيفة $.ajax() ! نظرًا لأن طرق ووظائف AJAX التي تمت دراستها حتى الآن ، $.ajax() تتيح إرسال طلبات AJAX HTTP إلى خادم ويب. ما يميزها عن "زملائها" هو دقة المُدخلات التي يمكن استعمالها فيها . لا تقلق ، سأشرح لك كل شيء وستعرف ما إذا كنت بحاجة لهذه الميزة أم لا . هنالك طريقتين ممكنتين لبناء الجملة:

$.ajax(adress, {options});
$.ajax({options}); 
... أين adress هو العنوان الذي يجب إرسال الطلب إليه ، أما options فتتوافق مع واحد أو أكثر من الخيارات التالية:
  • Type : نوع الطلب ، GET أو POST ( تلقائيا GET ) .
  • url : العنوان الذي يجب إرسال الطلب إليه.
  • data : البيانات لإرسالها إلى الخادم.
  • dataType : نوع البيانات التي يجب إرجاعها من قبل الخادم : xml ، html، script، json، text .
  • success : وظيفة للاتصال إذا نجح الاستعلام.
  • Error : وظيفة للاتصال إذا لم ينجح الطلب.
  • Timeout : الحد الأقصى للوقت (بالمللي ثانية) لتشغيل الاستعلام. إذا تم تجاوز هذه المهلة ، سيتم تنفيذ الوظيفة المحددة في المُدخل error .
يمكن استخدام العديد من الخيارات الأخرى. للحصول على قائمة شاملة ، راجع الوثائق الرسمية .
ماذا عن الذهاب للتدرب لمعرفة كيفية استخدام هذه الميزة؟ أقترح أخذ مثال الفصل السابق واستبدال الوظيفة $.get() بـ $.ajax() . هنا هو الكود المستخدم:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax :ajax()</title>
  </head>
  
  <body>
    <button id="action"> قم بتشغيل طلب أجاكس </button><br />

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('#action').click(function() {
          $.ajax({
            type: 'GET',
            url: 'proverbs.php?l=7',
            timeout: 3000,
            success: function(data) {
              alert(data); },
            error: function() {
              alert('لم ينجح الطلب '); }
          });    
        });  
      });
      </script>
  </body>
</html> 
يحتوي نص المستند على زر أمر سيتم استخدامه لتنفيذ طلب أجاكس. عند النقر على هذا الزر ، يتم تشغيل الوظيفة $.ajax() لتنفيذ طلب أجاكس. هذا الطلب من النوع GET ( هذا المُدخل قد تم حذفه ، لأنه هو التلقائي) . يتم تعريف الصفحة التي تم استدعاءها في المُدخل url والحد الأقصى لوقت التنفيذ في المُدخل timeout . هنا ، يتم منح تأخير قدره 3000 مللي ثانية لبرنامج PHP لتوفير ما هو مطلوب منه.
إذا نجح الاستعلام ، يتم عرض البيانات التي يتم إرجاعها بواسطة برنامج PHP في مربع رسالة. خلاف ذلك ، يتم عرض رسالة خطأ.
فيما يلي مثال لتنفيذ هذه الصفحة:
jQuery web
تشغيل الدالة $.ajax () لاسترداد البيانات من الخادم
ما رأيك في الوظيفة $.ajax() ؟ شخصيا، أنا أميل إلى تفضيل أسلوب load() ووظائف $.get() ، $.post() ، $.getScript() و $.getJSON() . ولكن هذه ليست سوى مسألة ذوق! قد ترغب في التركيز على وظيفة واحدة فقط لجميع استفسارات AJAX بدلاً من تعلم استخدام طرق ووظائف متعددة.

الأحداث المرتبطة بطلب AJAX


في القسم السابق ، تعلمت كيفية استخدام الوظيفة success() لتنفيذ تعليمات برمجية عندما يكون طلب AJAX ناجحًا ، ووظيفة error() تنفيذ التعليمات البرمجية عند فشل طلب AJAX . في هذا القسم ، سوف تكتشف تقنية أخرى لتنفيذ التعليمات البرمجية في مراحل مختلفة من تنفيذ استعلام AJAX . تعتمد هذه التقنية على تنفيذ أساليب إدارة الأحداث. يقدم الجدول التالي نظرة عامة على الطرق التي يمكن استخدامها:
طريقة حدث
$(document).ajaxSend(function(ev, req, options)) الاستعلام على وشك أن يرسل
$(document).ajaxStart(function()) بداية تنفيذ الاستعلام
$(document).ajaxStop(function()) نهاية الطلب
$(document).ajaxSuccess(function(ev, req, options)) كان الطلب ناجحا
$(document).ajaxComplete(function(ev, req, options)) الطلب كامل
$(document).ajaxError(function(ev, req, options, erreur)) لم ينجح الطلب
... حيث:
  • Ev يمثل الحدث ؛
  • Req يمثل الطلب ؛
  • Options يحتوي على المُدخلات التي تم تمريرها إلى الطلب ؛
  • Erreur هو اسم الخطأ الذي تم اكتشافه بواسطة jQuery .
فيما يلي بعض التعليمات البرمجية لمساعدتك في فهم كيفية استخدام أساليب الأحداث هذه وبأي ترتيب يتم تنفيذها:

<button id="action"> قم بتشغيل طلب أجاكس </button><br /><br />
<div id="donnees" style="background-color: yellow"></div><br />
<div id="message"></div>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#action').click(function() {
      $(document).ajaxStart(function() {
        $('#message').html('طريقة AjaxStart قيد التشغيل <br>');
      });
      $(document).ajaxSend(function(ev, req, options){
        $('#message').append('طريقة ajaxSend قيد التشغيل, ');
        $('#message').append('إسم الملف : ' + options.url + '<br>');
      });
      $(document).ajaxStop(function(){
        $('#message').append(' طريقة AjaxStop قيد التشغيل <br>');
      });
      $(document).ajaxSuccess(function(ev, req, options){
        $('#message').append(' طريقة AjaxSuccess قيد التشغيل <br>');
      });
      $(document).ajaxComplete(function(ev, req, options){
        $('#message').append(' طريقة AjaxComplete قيد التشغيل <br>');
      });
      $(document).ajaxError(function(ev, req, options, erreur){
        $('#message').append(' طريقة AjaxError قيد التشغيل, ');
        $('#message').append('error : ' + error + '<br>');
      });
      $('#donnees').load('affiche.htm');
    });  
  });
</script> 
عند النقر فوق الزر #action ، يتم وضع العديد من أساليب إدارة الأحداث في مكانها. على سبيل المثال ، ajaxStart() تلتقط الطريقة حدث "بدء تنفيذ الاستعلام":

$(document).ajaxStart(function() {  
عند إطلاق هذا الحدث ، يتم عرض نص في العلامة <div id="message"> :

$('#message').html('Méthode ajaxStart exécutée
');
طرق أخرى لإدارة الأحداث قابلة للمقارنة. لاحظ فقط عرض اسم الملف في الطريقة ajaxSend() :

$('#message').append('إسم الملف : ' + options.url + '
');
وعرض رسالة الخطأ في الطريقة ajaxError() :

$('#message').append('error : ' + error + '
');
بمجرد تحديد أساليب إدارة الأحداث ، يتم تحميل محتويات الوثيقة affiche.htm وإدراجها في العلامة <div id="donnees"> :

$('#donnees').load('affiche.htm'); 
المستند affiche.htm أساسي: يعرض بعض النص في المستند فقط:

يتم عرض هذا النص من خلال الصفحة affiche.htm 
يجب أن تحصل على شيء مشابه للشكل التالي.
jQuery web
يوضح هذا التنفيذ الترتيب الذي يتم به رفع الأحداث المتعلقة بطلب AJAX
دعنا نحاول تغيير اسم الملف للإشارة إلى ملف غير موجود:

$('#donnees').load('inexistant.htm'); 
تؤدي النقر فوق زر الأمر إلى تنفيذ أحداث مختلفة قليلاً ، كما هو موضح في الشكل التالي.
jQuery web
لم يتم العثور على الملف notExist.htm ، مما أدى إلى تشغيل الحدث ajaxError
  • ستتيح لك العديد من وظائف jQuery المضي قدمًا في طلبات AJAX . يمكنك إرسال طلبات HTTP محددة GET و POST الخادم مع وظائف $.get() و $.post() ، تحميل وتنفيذ السيناريو جافا سكريبت مع وظيفة $.getScript() والبيانات JSON مع وظيفة $.getJSON() .
  • يمكن أن تكون الوظيفة $.ajax() مفيدة إذا كنت ترغب في ضبط طلبات AJAX الخاصة بك. يتيح لك تحديد العديد من وظائف رد الاتصال للرد على الأحداث المختلفة المتعلقة بالطلب.
  • وأخيرا، يمكنك إعداد أساليب إدارة الحدث لالتقاط الأحداث: ajaxSend() ، ajaxStart() ، ajaxStop()، ajaxSuccess() ، ajaxComplete() و ajaxError() .