.load()

> >

Содержание:

.load( url [, data ] [, complete ] )Возвращает: jQuery

Описание: Загрузка данных с сервере и размещение полученного HTML в указанный элемент.

  • Добавлен в версии: 1.0.load( url [, data ] [, complete ] )

    • url
      Тип: String
      Строка содержащая URL-адрес куда будет отправлен запрос.
    • data
      Тип: PlainObject or String
      Плоский объект или строка, которая будет отправлена на сервер с запросом.
    • complete
      Тип: Function( String responseText, String textStatus, jqXHR jqXHR )
      Функция, которая будет вызвана когда запрос будет выполнен.

Примечание: обработчик события окончания загрузки также называется .load(). jQuery определяет какой именно метод вызван, на основании того какие аргументы передаются в метод.

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

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

Если не будет найден элемент соотвествующий заданному селектору, то, в этом случае, Ajax запрос не будет отправлен.

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

Если функция "complete" задана, то она выполняется после обработки и вставки HTML. Эта функция будет вызвана для каждого элемента в коллекции jQuery и this внутри нее будет указывать на DOM элемент.

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

В этих примерах выше, если текущий документ не содержит элемента с ID равным "result," то метод .load() не выполнится.

Метод запроса

Метод POST будет исползован если в метод .load() передан объект, иначе будет использован GET.

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

Метод .load(), в отличие от $.get(), позволяет указать часть удаленного документа для вставки. Это доступно при помощи специального синтаксиса в параметре url. Если один или несколько символов пробела включены в строку, то первое слово, после первого пробела, будет предполагать jQuery селектор, который определит какая часть будет вставлена.

Мы можем изменить код из примера выше, так чтобы использовалась только часть полученного документа:

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

Когда этот методы выполняется, извлекается содержимое ajax/test.html, но затем jQuery разбирает полученный документ и ищет элемент с ID равным container. Этот элемент, со всем своим содержимым, будет вставлен в элемент с ID равным result и остальная часть загруженного документа будет проигнорирована.

jQuery используется свойство браузера .innerHTML, чтобы проанализировать полученный документ и вставить его в текущий документ. Во время этого процесс, браузре часто отфильтровывает такие элементы из документа как: <html>, <title> или <head>. В результате, элемент полученный при помощи метода .load() может быть не таким же, как если получить этот документ в браузере напрямую.

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

Когда вызван .load() при помощи URL без выражения селектора, содержание передается в .html() до удаления скриптов. Это выполняется блоки скриптов, до их удаления. Если .load() вызван с выражением селектора в URL, то скрипты скрипты будут удалены до обновления DOM и поэтому не будут выполнены. Пример для обоих случае приведен ниже:

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

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

В следующем случае, блоки скрипта перед вставкой в #b будут удалены и не будут выполнены:

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

Дополнительные примечания:

  • Из-за ограничений безопасности браузера, большинство "Ajax" запросов подверждено политике того же происхождения, запросы не могут быть выполнены к другим доменам, поддоменам, порту или протоколу.

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