jQuery.getScript()

jQuery.getScript( url [, success ] )Возвращает: jqXHR

Описание: Загрузка JavaScript-файла с сервера с помощью HTTP-запроса GET, а затем его выполнение.

версия добавлена: 1.0jQuery.getScript( url [, success ] )
- url
  
  Тип: Строка
  
  Строка, содержащая URL-адрес, к которому отправляется запрос.
- success
  
  Тип: Функция( Строка script, Строка textStatus, jqXHR jqXHR )
  
  Функция обратного вызова, которая выполняется, если запрос успешен.

Это функция-псевдоним для 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" ).on( "ajaxError", function( e, jqxhr, settings, exception ) {
  if ( settings.dataType == "script" ) {
    $( this ).text( "Triggered ajaxError handler." );
  }
} );

До версии jQuery 3.5.0 неудачные HTTP-ответы со скриптом Content-Type все еще выполнялись.

Кэширование ответов

По умолчанию $.getScript() устанавливает параметр кэширования в false. Это добавляет временной отметки параметр запроса в URL-адрес, чтобы гарантировать, что браузер загружает скрипт каждый раз, когда он запрашивается. Вы можете переопределить эту функцию, установив свойство cache глобально с помощью $.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 Color 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-3.7.0.js"></script>
</head>
<body>
 
<button id="go">&raquo; Run</button>
<div class="block"></div>
 
<script>
var url = "https://code.jquery.com/color/jquery.color-2.1.2.js";
$.getScript( url, function() {
  $( "#go" ).on( "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>