Урок - jQuery.getScript()

Группа вКонтакте
Лицензия: Лицензия Creative Commons.

Метод jQuery.getScript() загружает JavaScript-файл с сервера используя GET HTTP-запрос и выполняет его.

Синтаксиси метода jQuery.getScript()

jQuery.getScript( url [, success(script, textStatus, jqXHR) ] )

где

  • url - строка, содержит URL запроса, для отправки данных.
  • success(script, textStatus, jqXHR) - функция обратного вызова, вызывается если запрос успешен.

Пример ниже, эквивалент jQuery.getScript() в исполнении jQuery.ajax():

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

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

Функция обратного вызова Success.

Обратный вызов происходит единожды, когда скрипт загружен, но не выполнен.

Для подключения и запуска скрипта необходимо указать путь к скрипту:

jQuery.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
    console.log(data);
    console.log(textStatus);
    console.log(jqxhr.status);
    console.log('Load was performed.');
});

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

Начиная с версии JQuery 1.5 при обработке ошибок необходимо использовать функцию jXHR.fail():

jQuery.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 для этого использовался глобальный метод jQuery.ajaxError():

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

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

По умолчанию, jQuery.ajaxScript() устанавливает параметр cache в fasle. При этом в параметры URL-запроса добавляется временная метка, что бы заставить браузер загружать каждый раз новый сценарий при новом запросе. Для изменения парметра cache необходимо воспользоваться методом jQuery.ajaxSetup().

jQuery.ajaxSetup({
    cache: true
});

Альтернативой может служить создание нового метода успользующего более гибкий метод jQuery.ajax().

Примеры:

Пример: определение метода jQuery.cachedScript() для получения кэшуруемых скриптов:

jQuery.cachedScript = function(url, options) {
    //    разрешаем пользователю изменять все настройки кроме dataType, cache и url
    options = $.extend(options || {}, {
        dataType: "script",
        cache: true,
        url: url
    });
    // Используем jQuery.ajax() т.к. он более гибкий чем jQuery.getScript().
    // Возвращаем jqXHR-объект для добавления обратных вызовов, если нужно.
    return jQuery.ajax(options);
};


//    Использование
jQuery.cachedScript("ajax/test.js").done(function(script, textStatus) {
    console.log( textStatus );
});

Пример: Загружаем официальный плагин jQuery Color Animation и используем цвета при анимации.

<!DOCTYPE html>
<html>
<head>
    <style>
        .block {
            background-color: blue;
            width: 150px;
            height: 70px;
            margin: 10px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <button id="go">&raquo; Run</button>
    <div class="block"></div>
    <script>
        (function() {
            var url = "https://raw.github.com/jquery/jquery-color/master/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>