jQuery функция $.getScript()

Определение и применение

jQuery функция $.getScript() позволяет загрузить JavaScript файл с сервера с помощью HTTP запроса методом GET, а затем выполнить его.

jQuery синтаксис:

Синтаксис 1.0:

JavaScript
$.getScript( url, success );

url - String

success - Function( PlainObject data, String textStatus, jqXHR jqXHR )

Добавлен в версии jQuery

1.0

Значения параметров

Параметр Описание
url Строка, содержащая URL адрес, на который отправляется AJAX запрос. Обязательный параметр.
success Функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно. Необязательный параметр.
Функция принимает следующие параметры:
  • data - данные возвращенные с сервера.
  • textStatus - строка описывающая статус запроса.
  • jqXHR - объект jqXHR (до версии jQuery 1.4.x объект XMLHttpRequest).

Совместимость с jQuery 4.0

Метод явно запрашивает выполнение JavaScript и остаётся доступным в 4.0. Скрипт должен быть разрешён политикой CSP страницы. Начиная с 3.5 неуспешный HTTP-ответ не выполняется как JavaScript.

Пример использования

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Использование функции $.getScript()</title>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
    <script>
      $(document).ready(function () {
        $("button").click(function () {
          // задаем функцию при нажатиии на элемент <button>
          $.getScript("greeting.js", function () {
            // загружаем и выполняем скрипт
            $("p").css("color", "red"); // изменяем цвет текста на красный
          });
        });
      });
    </script>
  </head>
  <body>
    <button>Клик</button>
    <p></p>
  </body>
</html>

В этом примере с использованием jQuery функции $.getScript() мы при нажатии на элемент <button> (кнопка) выполняем асинхронный AJAX запрос, который загружает скрипт JavaScript и выполняет его. Запрос имеет следующие параметры:

  • url - файл, к которому мы обращаемся ("greeting.js"), он содержит следующий JavaScript код:
    JavaScript
    $( "p" ).text( "Hello" ); // находим элемент <p> и добавляем текстовое содержимое
  • success - функция обратного вызова, которая с помощью метода .css() изменяет цвет текста у элемента <p>. Функция будет выполнена только в том случае, если AJAX запрос выполнится успешно, в нашем случае если будет загружен скрипт. Обратите внимание, что параметр success не является обязательным.

Пример использования jQuery функции .getScript()

Исходный код для изучения. Запуск на этой странице недоступен.

index.html
HTML
<button>Клик</button>
<p></p>
main.js
JavaScript
$(document).ready(function () {
    $('button').click(function () {
        $.getScript('greeting.js', function () {
            $('p').css('color', 'red')
        })
    })
})