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


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


الصفحة السابقة
سيتناول هذا الفصل موضوعًا غالبًا ما يكون مخيفًا لمبرمجي الويب: AJAX . سترى كيف يسهل jQuery تبادل بيانات AJAX وهو رهان آمن ستستخدمه دون أي تخوف من كل ما سيتم كتابته في هذا الفصل للحصول على صفحات ويب ديناميكية ، سريعة الاستجابة وتخفف بطريقة كبيرة التبادلات مع الخادم.

ما هو أجاكس؟


عندما تنتقل من صفحة إلى أخرى على موقع ويب تقليدي (بمعنى غير AJAX ) ، تؤدي إجراءات المستخدم إلى الإجراءات التالية:
  1. إرسال طلب إلى الخادم للحصول على صفحة جديدة.
  2. انشاء الصفحة الجديدة بواسطة الخادم وإرسال بيانات HTML / CSS المقابلة.
  3. عرض هذه البيانات في المتصفح.
تعمل هذه التقنية بشكل جيد للغاية في معظم الحالات ، ولكن في بعض الأحيان يلزم تحديث جزء فقط من الصفحة. هذا هو المكان الذي يأتي فيه AJAX :
  1. كخطوة أولى ، أرسل طلبًا إلى الخادم للحصول على البيانات التي سيتم عرضها في جزء معين من الصفحة الحالية.
  2. انشاء البيانات المطلوبة من قبل الخادم وإرسال هذه البيانات إلى المستعرض بتنسيق XML .
  3. استلام البيانات المرسلة من قبل البرنامج (وتسمى أيضا المحرك) AJAX التي طلبت منهم وعرضها في مكان معين من الصفحة الحالية دون لمس بقية الصفحة.
الشكل التالي يلخص هذين الوضعين من العملية.
jQuery web
وضعان تشغيل موقع الويب: عميل خادم و AJAX
إذا كانت العملية التقليدية مرضية تمامًا في معظم الحالات ، يمكن تحسين أداء العرض بشكل كبير في بعض الحالات الخاصة ، مثل عرض البيانات المحدثة على فترات منتظمة (سعر السهم في سوق الأوراق المالية) على سبيل المثال) ، حفظ البيانات أثناء إدخال نموذج أو تحديث و / أو التحقق من حقول النموذج ديناميكيًا وفقًا للبيانات التي أدخلها المستخدم ، إدخال تنبؤي (كما تفعل Google في تقديم الإجابات عند بدء كتابة بعض الأحرف في مربع البحث) ، وما إلى ذلك.
لكن بالمناسبة ، هل تعرف معنى مصطلح أجاكس؟ . أجاكس هو اختصار لجافا سكريبت و XML غير متزامن . يمكن فهم جميع هذه المصطلحات بسهولة: يتم استخدام لغة JavaScript لطلب البيانات من الخادم. يتم إرجاع هذه البيانات إليها بشكل غير متزامن في نموذج XML .
خادم الويب المحلي وخادم الويب البعيد
أنت تعرف الآن معنى مصطلح أجاكس وما يمكن أن يجلب لك في برمجة الويب الخاصة بك. أنت مستعد لكتابة الأسطر الأولى. ومع ذلك ، لن نبدأ على الفور ...
حتى الآن ، تمت جميع التطورات في jQuery محليًا ، على جهاز الكمبيوتر الخاص بك ، وكان يكفي عرض صفحة HTML في متصفح الويب لاختبار عملها. في الواقع ، كان كل شيء يحدث على مستوى العميل ، أي في المتصفح: لم يكن من الضروري وجود رحلة ذهابًا وإيابًا مع خادم ويب. تحت خطر خيبة أملك ، لكي تعمل أكواد AJAX ، سيتعين عليك استخدام خادم. هناك احتمالان متاحان لك. تستطيعون :
  1. تثبيت خادم الويب على جهاز الكمبيوتر الخاص بك.
  2. انشر صفحاتك على خادم الويب البعيد.
تثبيت واستخدام خادم APACHE
إذا كنت تقوم بعمل PHP ، فمن المحتمل أن يكون لديك بالفعل خادم Apache على جهازك. في الواقع ، برامج مثل WAMP ، MAMP ، XAMPP ، إلخ. لديك بالفعل واحدة. إذا كان خادم Apache مثبتًا بالفعل على جهاز الكمبيوتر الخاص بك ، فيمكنك تخطي هذه الخطوة.
تثبيت خادم Apache على جهاز الكمبيوتر الخاص بك ليس علم الصواريخ: إنه يتألف من تنزيل ملف وتنفيذه. انتقل إلى موقع Apache الرسمي وقم بتنزيل أحدث إصدار من ملف Apache for Windows. بمجرد التنزيل ، انقر نقرًا مزدوجًا فوق هذا الملف لتثبيت خادم Apache . يجب أن تصل بسرعة إلى النافذة الموضحة في الشكل التالي.
jQuery web
اكتملت المعلومات حول الخادم
بعض التفاصيل حول إعداد مربع الحوار هذا:
  • يشير "المضيف المحلي" إلى الكمبيوتر المحلي ؛
  • "127.0.0.1" هو عنوان IP الداخلي للكمبيوتر ؛
  • "Admin @ localhost" هو عنوان مسؤول خادم الويب. في هذه الحالة ، أنت.
  • يقوم "لجميع المستخدمين ، على المَنفذ 80 ، كخدمة" بتثبيت Apache لجميع حسابات المستخدمين باستخدام المنفذ 80 ، وهو منفذ الاتصال التلقائي المستخدم للاتصال بخادم الويب.
انقر فوق Next، اختيار التثبيت النموذجي. انقر فوق Next واختيار مجلد التثبيت. أخيرًا ، انقر Install لمتابعة التثبيت. بعد لحظات ، تم تثبيت خادم الويب على جهاز الكمبيوتر الخاص بك ويمكن استخدامه. لإقناع نفسك ، افتح متصفح الويب الخاص بك ، واكتب http://localhost في شريط العناوين واضغط على المفتاح Enter. يجب أن تحصل على شيء مشابه للشكل التالي.
jQuery web
خادم الويب قيد التشغيل
ربما لاحظت رمزًا جديدًا في منطقة الإعلام ، كما هو موضح في الشكل التالي. هذا هو جهاز APACHE . ستستخدمه لبدء خدمة Apache وإيقافها وإعادة تشغيلها.
jQuery web
بدء خدمة Apache وإيقافها وإعادة تشغيلها ببضع نقرات بالماوس الآن بعد أن أصبح خادم الويب قيد التشغيل ، سيتعين عليك وضع ملفات HTML في مكان محدد. مجلد العمل الافتراضي الذي تستخدمه Apache هو المجلد الفرعي htdocs للمجلد الذي تم تثبيت Apache عليه:
C:/Program Files/Apache Software Foundation/Apache2.2/htdocs
إذا حافظت على المسار المعروض في معالج التثبيت.
إذا كنت ترغب في استخدام مجلد آخر لسبب ما ، فافتح الملف C:/Program Files/Apache Software Foundation/Apache2.2/conf/httpd.conf في أي محرر نصوص ، وابحث عن المصطلح "DocumentRoot" ، واستبدل المسار الافتراضي بمسار آخر يناسبك بشكل أفضل.
الآن لاختبار صفحاتك في مجلد Apache ، فقط افتح المستعرض وانتقل إلى الصفحة http://localhost/name-file.html .
باستخدام خادم بعيد
إذا كنت تقرأ هذه الدورة التدريبية ، فمن المحتمل أنك استضفت بالفعل مواقع ويب على خادم بعيد يقدمه أي مضيف. لذلك يجب أن تعرف كيفية القيام بذلك. وإذا لم يكن الأمر كذلك ، فأنا أدعوك لقراءة هذا الفصل من دورة HTML5 .

تحميل ملف


سأوضح لك كيفية تحميل المعلومات المخزنة على الخادم وتحديث عنصر من الصفحة الحالية (وهذا العنصر فقط) بهذه المعلومات. لذلك ، سوف نستخدم الطريقة load() التي يكون بناء جملتها كما يلي:

$('sel').load('page', function() {
  //التعليمات 
}); 
... حيث:
  • Sel هو أي محدد jQuery يحدد العنصر (أو العناصر) المراد تحديثه ؛
  • page: هو اسم أي صفحة ويب سيتم استخدام محتواها للتحديث ؛
  • إذا تم تحديد ذلك ، يتم تنفيذ وظيفة رد الاتصال ، كما هو الحال دائمًا ، عند تنفيذ الطريقة ، أي عند تحديث العنصر (العناصر).
دعنا نذهب مباشرة إلى الممارسة. في هذا المثال الأول ، يعرض المستند زري أمر وأربعة علامات <div> . ثلاثة منهم تحتوي على نص واحد يحتوي على صورة. سيقوم الزر الأول بتحديث محتوى العلامة الأولى <div> والثاني محتوى العلامة الثانية. وهذا ، بالطبع ، دون لمس بقية المستند. هنا هو الكود المستخدم:

<style type="text/css">
  div { width: 400px; height: 300px; float: left; margin: 5px; }
  #premier { background-color: #F6E497; }
  #troisieme { background-color: #CAF1EC; }
  #quatrieme { background-color: #F1DBCA; }
</style>

<button id="majPremier"> تحديث المنطقة الأولى</button>
<button id="majDeuxieme"> تحديث المنطقة الثانية</button><br /><br />
<div id="premier">
  Lorem ipsum dolor sit amet, consectetur adipisicing 
  elit, sed do eiusmod tempor incididunt ut labore et 
  dolore magna aliqua. Ut enim ad minim veniam, quis 
  nostrud exercitation ullamco laboris nisi ut aliquip 
  ex ea commodo consequat.
</div>

<div id="deuxieme">
  <img src="image1.jpg">
</div>

<div id="troisieme">
  Duis aute irure dolor in reprehenderit in voluptate 
  velit esse cillum dolore eu fugiat nulla pariatur. 
  Excepteur sint occaecat cupidatat non proident, 
  sunt in culpa qui officia deserunt mollit anim id 
  est laborum.
</div>

<div id="quatrieme">
  Sed ut perspiciatis unde omnis iste natus error 
  sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore 
  veritatis et quasi architecto beatae vitae dicta 
  sunt explicabo. 
</div>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#majPremier').click(function() {
      $('#premier').load('maj1.html', function() {
        alert('تم تحديث المنطقة الأولى');
      });
    });

    $('#majDeuxieme').click(function() {
      $('#deuxieme').load('maj2.html', function() {
        alert('تم تحديث المنطقة الثانية);
      });
    });
  });
</script> 
دعنا نلقي نظرة على كود jQuery . عند النقر فوق الزر الأول ، يتم تحديث علامة المعرّف #premier (بمعنى آخر ، العلامة الأولى <div> ) بمحتويات المستند maj1.html :

$('#premier').load('maj1.html', function() { 
يتم استخدام وظيفة رد الاتصال للطريقة load() للإشارة إلى نهاية التحديث:

alert('تم تحديث المنطقة الأولى'); 
إليك الكود الموجود في الملف maj1.html :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  
  <body>
    Ut enim ad minima veniam, quis nostrum exercitationem ullam 
    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
    consequatur? Quis autem vel eum iure reprehenderit qui in ea 
    voluptate velit esse quam nihil molestiae consequatur, vel 
    illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  </body>
</html> 
النص بين العلامات <body> و </body> سيتم استخدامه لتحديث الكود <div> الأولى من الصفحة. سيصبح النص الأصلي "Lorem ipsum dolor sit amet ..." "Ut enim ad minima veniam ...".
عند النقر فوق الزر الثاني ، تقوم التقنية نفسها بتحديث محتويات العلامة <div> الثانية ، للصفحة maj2.html :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  
  <body>
    <img src="image2.jpg">
  </body>
</html> 
جرب الكود

تحميل جزء من الملف


من خلال تعديل بناء جملة الطريقة load()قليلاً ، من الممكن استخدام جزء فقط من البيانات التي يتيح طلب AJAX الوصول إليها. لهذا ، يكفي جعل اسم الملف يتبع بمسافة وبواسطة محدد jQuery :

$('sel').load('page sel2', function() {
  //التعليمات
}); 
... حيث:
  • Sel هو أي محدد jQuery يحدد العنصر (أو العناصر) المراد تحديثه ؛
  • Page هو اسم أي صفحة ويب سيتم استخدام محتواها للتحديث ؛
  • sel2 هو أي محدد jQuery ، بدون علامة $ أو الأقواس ، والذي سيعزل بعض البيانات في الصفحة page؛
  • إذا تم تحديد ذلك ، يتم تنفيذ وظيفة رد الاتصال ، كما هو الحال دائمًا ، عند تنفيذ الطريقة ، أي عند تحديث العنصر (العناصر).
على سبيل المثال، لقد جمعت تحديث البيانات التي كانت في ملفات maj1.html و maj2.html في المثال السابق، ووضعها في ملف maj.html وI المخصصة لهم ID لهم أسهل لعزل في jQuery:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  
  <body>
    <div id="modif1">
      Ut enim ad minima veniam, quis nostrum exercitationem ullam 
      corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
      consequatur? Quis autem vel eum iure reprehenderit qui in ea 
      voluptate velit esse quam nihil molestiae consequatur, vel 
      illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
    <img id="modif2" src="paysage2.jpg">
  </body>
</html> 
وبالتالي ، يمكن تعريف النص الذي سيتم استخدامه لتحديث العلامة الأولى بسهولة بواسطة المعرّف #modif1 ، كما يمكن تعريف الصورة التي يتم استخدامها لتحديث العلامة الثانية بسهولة بواسطة المعرّف #modif2 . فيما يلي كيفية تعديل طريقتي الحدث في المثال السابق لاستخدام جزء فقط من الملف أثناء التحديث:

$('#majPremier').click(function() {
  $('#premier').load('maj.html #modif1', function() {
    alert(' تم تحديث المنطقة الأولى ');
  });
});

$('#majDeuxieme').click(function() {
  $('#deuxieme').load('maj.html #modif2', function() {
    alert(' تم تحديث المنطقة الثانية ');
  });
}); 

تمرير المُدخلات إلى برنامج PHP


لم أستطع تجاهل احتمالات تمرير مٌدخلات الى الطريقة load() . هذه التقنية مناسبة بشكل خاص إذا كنت تقوم بالبرمجة في PHP . باستخدام jQuery لإنشاء عناوين URL تحتوي على مٌدخل واحد أو أكثر ( http://site.fr/page.php?id=10&p=2) ، يمكنك الاستعلام عن قاعدة بيانات في PHP وإرجاع المعلومات التي تعتمد على المٌدخلات التي تم تمريرها في URL .
النموذج الأول من الطريقةLOAD()
لتمرير المٌدخلات بعد عنوان URL بالطريقة load() ، إليك بناء الجملة المطلوب استخدامه:

$('sel').load(url,param); 
... حيث:
  • Sel هو أي محدد jQuery يحدد العنصر (أو العناصر) المراد تحديثه ؛
  • url هو اسم صفحة PHP التي سيتم استخدامها للتحديث ؛
  • Param هي سلسلة تحتوي على واحد أو أكثر من أزواج المٌدخل / القيمة. على سبيل المثال ، إذا كان الأمر param مساو ل « id=5, p=14 » وكان url يساوي http://site.fr/page.php، ستكون الصفحة المستخدمة في التحديث http://site.fr/page.php?id=5&p=14.
والآن ، أقترح لمعرفة كيفية استخدام هذا الإصدار من الطريقة load() في حالة ملموسة. ماذا عن عرض الأمثال الصينية باستخدام بضعة أسطر من jQuery المرتبطة ببرنامج مكتوب بلغة PHP ؟ إليك كود HTML / jQuery المستخدم:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax - Load</title>
  </head>
  
  <body>
    <input type="text" id="ref">
    <button id="action">Afficher</button><br />
    <div id="r"> أدخل رقمًا ما بين 1 و 10 لعرض المثل الصيني </div>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('#action').click(function() {
          var param = 'l=' + $('#ref').val();
          $('#r').load('http://www.proverbs.php',param);
        });  
      });
      </script>
  </body>
</html> 
عند النقر فوق الزر ، تتم قراءة محتويات مربع النص باستخدام طريقة jQuery val() المطبقة على مربع النص #ref . يتم تخزين القيمة التي تم الحصول عليها بهذه الطريقة في المتغير param، مسبوقة بالنص : « l= »

var param = 'l=' + $('#ref').val();
على سبيل المثال ، إذا كتبت "5" في مربع النص ، param فسيحتوي المتغير على السلسلة "l = 5" بعد تنفيذ هذه العبارة.
يمرر السطر التالي المٌدخل الذي أدخلتها للبرنامج proverbs.php ويقوم بتحديث العلامة <div id="r">وفقًا لذلك:

$('#r').load('proverbs.php',param); 
كل ما تحتاجه هو معالجة PHP . سأقدم لك ذلك ، لكنني لن أشرح ذلك ، إنه ليس غرض هذه الدورة حقًا. دون مزيد من اللغط ...

  <?php

$proverbe = arrayنحن لا نشبع الإبل عن طريق إطعامها بملعقة")." ،
        "معرفة جهله هو أفضل جزء من المعرفة." ،
        "منزل من القش حيث نضحك أفضل من قصر نبكي فيه." ،
        "المسافر الحقيقي لا يعرف إلى أين يذهب"،
        "ليست هناك حاجة لرفع صوتك عندما تكون على حق"،
        "الصديق هو طريق ، العدو هو الجدار"،
        "يبقى القليل من العطر دائمًا على اليد التي تمنحك الورود." ،
        "بقدر ارتفاع الشجرة ، تسقط أوراقها دائمًا على الأرض." ،
        "إذا كان ما لديك لتقوله ليس أجمل من الصمت ، فأسكت".،
        "ثلاثة أكواب من النبيذ تجعل المرء يستولي على عقيدة عميقة."	
		) ;
$l=$_GET["l"];
if (($l != "") && ($l>0) && ($l<11))
{
  echo "<u>Proverb chinois N° ".$l."</u><br><br>";
  echo "<b>".$proverbe[$l-1]."</b>";
}    
else{
  echo "<font color=red> أدخل رقمًا ما بين 1 و 10 لعرض المثل الصيني 
  </font>";
} 
?>
كن حذرًا فقط ، كما قلت لك من قبل ، يجب وضع PHP على خادم ، محلي أو بعيد. لكي تعمل صفحتك ، ضع كلا الملفين على خادم.
لا يمكنك عرض المعلومات من موقع آخر. يجب أن تكون معالجة PHP على نفس استضافة كود jQuery ، وإلا فلن يعمل شيء.
الشكل الثاني للطريقةLOAD()
من الممكن أيضًا تمرير كائن كوسيطة ثانية إلى الطريقة load() . على سبيل المثال ، يمكنك تمرير اثنين من أزواج المٌدخلات / القيمة باستخدام العبارة التالية:

$('sel').load('http://www.arabclassroom.com/page.php',
{ id:50, nom: 'durand'}); 
لكن كن حذرًا ، في هذه الحالة ، يتم تمرير القيم من خلال طلب HTTP POST . سيتعين استردادها بهذه الطريقة بواسطة برنامج PHP .
طلب HTTP POST ؟ ولكن ما هو ؟
مع كل معالجة يقوم بها المستخدم ، يرسل المستعرض طلبًا إلى الخادم يحتوي على إشارة إلى صفحة ويب ( http://www.arabclassroom.com/page.php?param1=15¶m2=rougeعلى سبيل المثال). يقوم الخادم بإجراء العمليات الحسابية اللازمة وإرجاع النتيجة إلى المستعرض كصفحة ويب. يمكن أن تكون الطلبات من النوع GET (مرئية في عنوان URL ) أو POST (غائبة من عنوان URL ) . اعتمادًا على الطريقة المستخدمة ، ستكون التعليمات لاسترداد البيانات من جانب الخادم مختلفة.

الطلبات GET و POST


الوظيفة$.GET()
بالتوازي مع الأسلوب load()، يمكنك استخدام وظيفة jQuery $.get() للحصول على البيانات المرسلة من قبل الخادم باستخدام طلب HTTP GET . فيما يلي بناء جملة هذه الوظيفة:

$.get(adress, data, function() {
  // التعليمات
}); 
... حيث:
  • Adress هو اسم أي صفحة ويب يتم استرداد محتواها بواسطة الوظيفة get()؛
  • data يمثل البيانات المراد تمريرها إلى صفحة الويب بواسطة طلب HTTP GET ؛
  • إذا تم تحديد ذلك ، يتم تنفيذ وظيفة رد الاتصال ، كما هو الحال دائمًا ، عند تنفيذ الطريقة ، أي عند تحديث العنصر (العناصر).
دعنا ننتقل إلى الممارسة. باستخدام الوظيفة get() ، سنقوم بتعديل الكود السابق لاسترداد رمز HTML الذي تم إرجاعه بواسطة صفحة PHP وعرضه في مربع رسالة. فيما يلي التعليمات المستخدمة:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax - Get</title>
  </head>
  
  <body>
    <button id="action"> بدء الاستعلام HTTP GET</button><br />

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('#action').click(function() {
          $.get('proverbs.php?l=9', function(data) {
            alert(data);
          });    
        });  
      });
      </script>
  </body>
</html> 
يحتوي نص المستند على زر أمر بسيط يؤدي إلى تنفيذ الطريقة get() .
عند النقر على هذا الزر ، get() يتم تنفيذ الوظيفة . تحتوي المٌدخل الأول للوظيفة على عنوان الصفحة المراد تنفيذها ( هنا ، صفحة PHP ) . والثاني يتوافق مع وظيفة رد الاتصال التي سيتم استرجاعها بفضل البيانات التي يتم إرجاعها بواسطة صفحة PHP :

$.get('proverbs.php?l=9', function(data) { 
تم تمرير المٌدخل Data كوسيطة لوظيفة رد الاتصال ، فقط استخدمها لاسترداد البيانات المعروضة بواسطة صفحة PHP . ثم يتم عرض هذه البيانات في مربع رسالة مع وظيفة alert() .
يوضح الشكل التالي النتيجة.
jQuery web
استعادة البيانات وعرضها
الوظيفة $.POST()
تكون الوظيفة $.post() مثالية إذا كنت ترغب في إرسال بيانات كبيرة و / أو حساسة (أي ، تحتوي على كلمات مرور أو بيانات أخرى من نفس النوع) إلى الخادم. على سبيل المثال ، سوف تستخدم الوظيفة post() لإرسال البيانات المدخلة في نموذج ، والتي يجب تخزينها في قاعدة بيانات الموقع. إليك نوع التعليمات التي يمكنك استخدامها:

$.post('traiteFormulaire.php', { nom: 'Pierre34', heure: '2pm', 
  post: 'تم استرداد بعض النص في نموذج HTML والمقصود نشره في المنتدى.' },
   function(data) {
     alert(data);
   }); 
هنا يتم تنفيذ البرنامج traiteFormulaire.php . يتم إرسال البيانات التي تم إدخالها في النموذج إليها ، ويتم عرض العناصر المعروضة بواسطة برنامج PHP في مربع رسالة.

اطلب من المستخدم الانتظار باستعمال الرسوم المتحركة


قد تستغرق بعض طلبات أجاكس بضع ثوانٍ للتنفيذ. لإبقاء الشخص في الأصل ، من الشائع استخدام GIF متحركة ، مثل تلك الموضحة في الشكل التالي

jQuery web

الصورة تخبر الزائر بأنه يجب عليه الانتظار بضع ثوانٍ
إذا كنت تريد صورة مختلفة ، فإنني أنصحك بالانتقال إلى موقع الويب ajaxload.info للحصول على صورة بتنسيق GIF في اتفاق تام مع رسم موقعك.
لإدارة عرض هذه الصورة ، ما عليك سوى الرجوع إليها عند تشغيل طلب AJAX ، ثم حذفها عند اكتمال طلب AJAX .
على سبيل المثال ، فيما يلي كيفية تعديل الكود في المثال السابق لعرض صورة انتظار بين بداية ونهاية طلب AJAX :


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax - Load</title>
  </head>
  
  <body>
    <input type="text" id="ref">
    <button id="action"> عرض </button><br />
    <div id="r"> أدخل رقمًا ما بين 1 و 10 لعرض المثل الصيني </div>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('#action').click(function() {
          $('#r').html('<img src="http://www.mediaforma.com/sdz/jquery/
                        ajax-loader.gif">');
          var param = 'l=' + $('#ref').val();
        $('#r').load('http://www.mediaforma.com/sdz/jquery/data.php',param);
        });  
      });
      </script>
  </body>
</html>

ما الذي تغير ، وفقا لك؟
كود HTML هو نفسه تماما. في جانب jQuery ، يجب أن نبحث عن الاختلافات ، أو بالأحرى الفرق ، حيث تمت إضافة تعليمة واحدة فقط ، السطر 17:

$('#r').html('<img src="http://www.mediaforma.com/sdz/jquery/
                        ajax-loader.gif">'); 
عندما يقوم المستخدم بالنقر فوق الزر ، يعرض هذا الخط الرسوم المتحركة في العلامة <div> . يقوم السطور 18 و 19 بتشغيل طلب AJAX بتحديث محتويات العلامة <div> وبالتالي مسح صورة GIF المتحركة.
  • لتحديث مساحة من المستند بصفحة ويب (مكتوبة بلغة HTML أو PHP على سبيل المثال) ، فإن أسهل طريقة هي استخدام الطريقة load() ، وتحديد اسم الصفحة بين قوسين ، وربما تتبعها دالة. إذا تم تحديد ذلك ، فسيتم استدعاء هذه الوظيفة عند تحميل البيانات.
  • من خلال تعديل بناء جملة الطريقة load() قليلاً ، من الممكن استخدام جزء فقط من البيانات التي يتيح طلب AJAX الوصول إليها. لذلك ، يكفي أن تتبع اسم الملف بمسافة وبواسطة محدد jQuery ، بدون علامة $ ، وبدون أقواس وبدون علامة اقتباس أحادية.
  • يمكن تمرير واحد أو أكثر من أزواج المٌدخل / القيمة إلى الطريقة load() . أشر إليهم كسلسلة في المٌدخل الثاني للدالة.
  • ستتيح لك العديد من وظائف jQuery المضي قدمًا في طلبات AJAX . يمكنك إرسال طلبات HTTP محددة GET و POST الى الخادم مع وظائف $.get() و $.post() ، تحميل وتنفيذ السيناريو جافا سكريبت مع وظيفة $.getScript() والبيانات JSON مع وظيفة $.getJSON() .