Осуществляет запрос к серверу без перезагрузки страницы. Получает HTML-данные от сервера и помещает их внутрь выбранных элементов.

По умолчанию выполняется как запрос типа GET, однако, если будут переданы дополнительные данные в форме объекта, пар ключ/значение, то операция выполнится как запрос типа POST. Дополнительные параметры, указанные как строка, НЕ приведут к запросу типа POST. Функция имеет несколько необязательных параметров.

.load( url [, data ] [, complete ] )

• url — url-адрес, по которому будет отправлен запрос.
• data — данные, которые будут отправлены на сервер. Они должны быть представлены в форме объекта, в формате: {fName1:value1, fName2:value2, …}.
• complete (data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
  • data — данные, присланные с сервера.
  • textStatus — статус того, как был выполнен запрос.
  • jqXHR — объект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest)

Этот метод является самым простым способом извлечения данных с сервера. Он представляет из себя альтернативу использования метода $.get(url, data, success). В случае успешного запроса, метод .load() формирует HTML содержание, которое может быть вставлено на страницу. Это значит, что мы можем делать запросы следующим образом:

$("#result").load("ajax/test.html");

Если селектора не существует — в нашем случае, если в документе нет блока с id=”result” — Ajax запрос не будет выполнен.

Функция обратного действия

Если задана функция обратного действия “complete”, она будет выполнена после того как сформируется и вставится на страницу HTML содержимое. Она запускается для каждого объекта коллекции jQuery.

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

В случае, если блока с id=”result” не существует, запрос не будет выполнен.

Загрузка фрагмента страницы

Метод .load() позволяет загружать в выбранный элемент только часть страницы ( чего нельзя сделать с $.get() ). Для этого необходимо после адреса файла указать селектор той области страницы, которую нужно извлечь.

$( "#result" ).load( "ajax/test.html #container" );

В этом примере со страницы test.html будет загружен HTML фрагмент из блока с id=”container”. Сначала метод извлекает содержимое файла ajax/test.html, в потом jQuery парсит результат и, благодаря селектору, находит тот фрагмент, который нужен. Найденный фрагмент будет вставлен на страницу, всё остальное будет опущено.

Выполнение скрипта

При использовании метода .load() с указанием селектора, контент будет пропущен через метод .html(), таким образом все скрипты будут удалены. При загрузке без селектора, все скрипты будут загружены в соответствии с приоритетом.

В данном примере весь JavaScript, загруженный в элемент #a, как часть документа, будет успешно выполнен.

$( "#a" ).load( "article.html" );

Но, в следующем случае, скрипты загруженного документа, прикреплённого к элементу #b не будут выполнены:

$( "#b" ).load( "article.html #target" );