↑ Ajax | ||||
Урок - jQuery.getScript() | ||||
← Предыдущий урок Урок - jQuery.getJSON()
|
Следующий урок → Урок - jQuery.param()
|
Метод 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">» 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>
↑ Ajax | ||||
Урок - jQuery.getScript() | ||||
← Предыдущий урок Урок - jQuery.getJSON()
|
Следующий урок → Урок - jQuery.param()
|