jQuery 3.3

jQuery.getScript()




jquery

jQuery.getScript (url [، success]) الإرجاع: jqXHR

الوصف: قم بتحميل ملف JavaScript من الخادم باستخدام طلب GET HTTP ، ثم قم بتنزيله.

هذه اختصار دالة Ajax ، وهو ما يعادل:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

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

رد الاتصال بنجاح

يتم تشغيل رد الاتصال بمجرد تحميل البرنامج النصي ولكن لا يتم تنفيذه بالضرورة.

يتم تضمين البرامج النصية وتشغيلها عن طريق الرجوع إلى اسم الملف:

$.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( "Triggered ajaxError handler." );
});

قبل jQuery 1.5 ، كان يجب استخدام حدث الاستدعاء .ajaxError() العالمي لمعالجة أخطاء $.getScript() :

$( "div.log" ).ajaxError(function( e, jqxhr, settings, exception ) {
  if ( settings.dataType == "script" ) {
    $( this ).text( "Triggered ajaxError handler." );
  }
});

الردود التخزين المؤقت

بشكل افتراضي ، $.getScript() إعداد ذاكرة التخزين المؤقت إلى false . يؤدي هذا إلى إلحاق معلمة طلب بحث مطوَّلة بطلب عنوان URL للتأكد من تنزيل المتصفح للبرنامج النصي في كل مرة يطلب فيها ذلك. يمكنك تجاوز هذه الميزة عن طريق تعيين خاصية التخزين المؤقت على مستوى العالم باستخدام $.ajaxSetup() :

$.ajaxSetup({
  cache: true
});

بدلاً من ذلك ، يمكنك تعريف طريقة جديدة تستخدم طريقة $.ajax() الأكثر مرونة.

أمثلة:

تحديد طريقة $ .cachedScript () تسمح بجلب النص البرمجي المخبأ:

jQuery.cachedScript = function( url, options ) {
 
  // Allow user to set any option except for dataType, cache, and url
  options = $.extend( options || {}, {
    dataType: "script",
    cache: true,
    url: url
  });
 
  // Use $.ajax() since it is more flexible than $.getScript
  // Return the jqXHR object so we can chain callbacks
  return jQuery.ajax( options );
};
 
// Usage
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
  console.log( textStatus );
});

قم بتحميل الملحق jQuery Colour Animation الرسمي بشكل ديناميكي وقم بربط بعض الرسوم المتحركة الملونة بمجرد تحميل الوظيفة الجديدة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getScript demo</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; Run</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>

عرض: