jQuery.getScript()


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

Описание: Загружает JavaScript файл с сервера при помощи GET HTTP запроса и затем исполняет его.

  • Добавлен в версии: 1.0jQuery.getScript( url [, success ] )

    • url
      Тип: String
      Строка с URL адресом, на который будет отправлен запрос.
    • success
      Тип: Function( String script, String textStatus, jqXHR jqXHR )
      Функция, которая вызывается если запрос будет успешно выполнен.

Это сокращенная функция Ajax эквивалентна коду:

1
2
3
4
5
$.ajax({
url: url,
dataType: "script",
success: success
});

Скрипт выполняется в глобальном контексте, поэтому он может ссылаться на другие переменные и использовать функции JQuery. Подключенный сценарий может иметь определенное влияние на текущую страницу.

Успешная функция обратного вызова

Функция обратного вызова исполняется после того как он будет загружен, но необязательно до выполнения.

Скрипты подключаются и выполняются по имени файла:

1
2
3
4
5
6
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
console.log( data ); // Данные с сервера
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Загрузка была выполнена." );
});

Обработка ошибок

Начиная с jQuery 1.5, Вы можете использовать .fail() для учета ошибок:

1
2
3
4
5
6
7
$.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, только глобальный обработчик ошибок Ajax запросов .ajaxError() можно использовать для обработки ошибок метода $.getScript():

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

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

По умолчанию, $.getScript() устанавливает настройку cache в значение false. Это добавит метку времени к строке запроса в URL адрес для гарантированного предотвращения кэширования браузером. Вы можете переопределить это поведение, при помощи глобального метода $.ajaxSetup():

1
2
3
$.ajaxSetup({
cache: true
});

В качестве альтернативы, Вы можете определить новый более гибкий метод, при помощи $.ajax().

Примеры:

Определение функции $.cachedScript(), которая разрешает кэширование полученного скрипта:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
jQuery.cachedScript = function( url, options ) {
// Позволяет пользователю установить любую опцию для dataType, cache и url
options = $.extend( options || {}, {
dataType: "script",
cache: true,
url: url
});
// Используем метод $.ajax() так как он более гибкий чем $.getScript
// Возвращаем объект jqXHR для последующей обработки событий
return jQuery.ajax( options );
};
// Пример использования
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
console.log( textStatus );
});

Динамически загружает плагин jQuery Color Animation и запускает некоторые цветовые анимации после того как функционал плагина будет загружен.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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; Запустить</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>

Демонстрация: