jQuery ajax - طريقة getScript()

دليل مرجع jQuery Ajax

مثال

الحصول على وتشغيل ملف الجافا سكربت باستخدام طلب AJAX:

$("button").click(function(){
  $.getScript("demo_ajax_script.js");
});

جرب بنفسك

التعريف والاستخدام

يستخدم طريقة getScript() لتحميل وتنفيذ ملف الجافا سكربت عبر طلب HTTP GET.

اللغة

jQuery.getScript(url,success(الاستجابة,الحالة});
المتغيرات الوصف
url الرابط الذي سيتم الطلب منه كنص.
success(response,status)

اختياري. يحدد الدالة التلقائية التي سيتم تنفيذها بعد نجاح الطلب.

المتغيرات الإضافية:

  • الاستجابة - تحتوي على بيانات النتيجة من الطلب
  • الحالة - تحتوي على حالة الطلب ("نجاح", "غير مستحدث", "خطأ", "وقت انتهاء" أو "خطأ في تحليل النص")

تفاصيل

هذه الدالة هي طريقة مختصرة لـ Ajax، وتشبه:

$.ajax({
  url: url,
  dataType: "script",
  نجاح: نجاح
});

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

يتم تنفيذ السكربت المحمّل في البيئة الكونية، لذا يمكنه الاستعانة بالمتغيرات الأخرى واستخدام وظائف jQuery.

مثلاً تحميل ملف test.js يحتوي على الكود التالي:

$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");

من خلال إشارة إلى هذا الاسم الملف، يمكنك تحميل وتشغيل هذا النص:

$.getScript("ajax/test.js", function() {
  alert("تم تنفيذ التحميل.");
});

ملاحظة:قبل إصدار jQuery 1.2، كان getScript يستطيع استدعاء ملفات JS في نفس النطاق فقط. في إصدار 1.2، يمكنك استدعاء ملفات JavaScript عبر النطاق. ملاحظة: لا يمكن تنفيذ سكربتات في نطاق الكوني في إصدارات Safari 2 أو أقدم. إذا تم إضافة سكربت باستخدام getScript، يجب إضافة دالة تأخير.

مزيد من الأمثلة

مثال 1

تحميل وتنفيذ test.js:

$.getScript("test.js");

مثال 2

تحميل وتنفيذ test.js، ثم عرض المعلومات:

$.getScript("test.js", function(){
  alert("تم تحميل النص وتنفيذه.");
});

مثال 3

تحميل إضافة الألوان الرسمية لـ jQuery التحكم في تغيير الألوان بنجاح:

كود HTML:

<button id="go">تشغيل</button>
<div class="block"></div>

jQuery كود:

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
 function(){
  $("#go").click(function(){
    $(".block").animate( { لون الخلفية: 'وردي' }, 1000)
      .animate( { لون الخلفية: 'ازرق' }, 1000);
  });
});

دليل مرجع jQuery Ajax