الدالة ‎‎jQuery.getScript()‎‎ في jQuery

من موسوعة حسوب
< jQuery‏ | jQuery
اذهب إلى: تصفح، ابحث

jQuery.getScript( url [, success ] )‎

القيم المعادة

تعيد كائنًا من النوع jqXHR.

الوصف

تجلب هذه الدالة ملف JavaScript من الخادم باستعمال طلب HTTP عبر الطريقة GET ثمَّ يُنفِّذه.

jQuery.getScript( url [, success ] )‎

أُضيفت مع الإصدار: 1.0.

url

سلسلة نصية تحتوي على الرابط URL الذي سيُرسَل الطلب إليه.

success

دالةٌ من الشكل Function( String script, String textStatus, jqXHR jqXHR )‎ يراد تنفيذها إن نجح الطلب.

هذه الدالة هي اختزالٌ للدالة jQuery.ajax()‎، إذ تكافئ:
$.ajax({
  url: url,
  dataType: "script",
  success: success
});
يُنفَّذ السكربت في السياق العام (global context)، لذا يمكن الإشارة إلى متغيِّرات أخرى واستعمال دوال jQuery. يمكن أن يكون للسكربتات المضمَّنة تأثيرًا على الصفحة الحاليَّة.

رد النداء success

يُطلَق رد النداء متى ما جُلِبَ السكربت وليس بالضرورة أن يكون قد نٌفِّذَ آنذاك.

تُضمَّن السكربتات وتنفَّذ بالإشارة إلى اسم الملف:
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});

معالجة الأخطاء

بدءًا من الإصدار jQuery 1.5، تستطيع استعمال التابع ‎.fail()‎ لوضع احتمالية حدوث أي خطأ في الحسبان:
 $.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "استُدعِي معالج الأخطاء." );
});
كان يُستخدَم قبل الإصدار jQuery 1.5 حدث رد النداء ‎.ajaxError()‎ العام من أجل معالجة أخطاء التابع ‎$.getScript()‎:
$( "div.log" ).ajaxError(function( e, jqxhr, settings, exception ) {
  if ( settings.dataType == "script" ) {
    $( this ).text( "ajaxError استُدعِي معالج الأخطاء." );
  }
});

تخزين الردود

يعيِّن التابع ‎$.getScript()‎ قيمة الضبط cache إلى false افتراضيًّا. هذا يضيف معامل استعلام بصمة وقت (timestamped query) إلى العنوان URL للتأكد من أنَّ المتصفح قد نَزَّل السكربت في كلِّ مرةٍ أُرسِل طلبٌ بذلك. يمكنك تجاهل هذه الميِّزة عبر تغيير قيمة الضبط cache إلى القيمة true على الصعيد العام باستعمال ‎$.ajaxSetup()‎:
$.ajaxSetup({
 cache: true
});
يمكنك تعريف تابع جديد أكثر مرونة يرتكز على ‎$.ajax()‎ بدلًا استعمال التابع ‎$.getScript()‎ عند الاضطرار إليه مع عدم الرغبة بذلك.

أمثلة

تعريف التابع ‎$.cachedScript()‎ الذي يسمح لنا بجلب السكربت المخزَّن:
jQuery.cachedScript = function( url, options ) {
 
  // url و cache و dataType السماح للمستخدم بتعيين قيمة أي ضبط باستثناء 
  options = $.extend( options || {}, {
    dataType: "script",
    cache: true,
    url: url
  });
 
  // $.getScript() فهي أكثر مرونة من $.ajax استعمال
  // وبذلك يمكننا ربطه بردود نداء jqXHR إعادة الكائن  
  return jQuery.ajax( options ); 
};
 
// كيفية استعمال التابع الجديد
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
  console.log( textStatus );
});
جلب إضافة تحريك الألوان الرسمية من jQuery ديناميكيًّا وربط بعض حركات الألوان لتنفيذها متى ما حصلنا على الوظيفة الجديدة:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getScript مثالٌ عن استعمال التابع</title>
  <style>
  .block {
     background-color: blue;
     width: 150px;
     height: 70px;
     margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="go">&raquo; ابدأ</button>
<div class="block"></div>
 
<script>
var url = "https://code.jquery.com/color/jquery.color.js";
$.getScript( url, function() {
  $( "#go" ).click(function() {
    $( ".block" )
      .animate({
        backgroundColor: "rgb(255, 180, 180)"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "olive"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "#00f"
      }, 1000 );
  });
});
</script>
 
</body>
</html>

مصادر