Ajax запрос HTML-данных

Материал из JQuery

Перейти к: навигация, поиск
.load()

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

.load(url,[data],[callback],[dataType]):jQuery1.0

url — url-адрес, по которому будет отправлен запрос.
data — данные, которые будут отправлены на сервер. Они должны быть представлены в форме объекта, например: {fName1:value1, fName2:value2, ...}.
callback(data, textStatus, XMLHttpRequest) — пользовательская функция, которая будет вызвана после того, как присланный сервером html-текст будет помещен в выбранные элементы страницы.

data — данные, присланные с сервера.
textStatus — статус того, как был выполнен запрос.
XMLHttpRequestобъект XMLHttpRequest

dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос (подробности тут).

Замечание 1: существует одноименный метод .load(), позволяющий обрабатывать завершение загрузки элементов страницы. jQuery различает вызовы этих методов по заданным аргументам.

Замечание 2: большинство браузеров не позволяют проводить ajax-запросы на ресурсы с доменами, поддоменами и протоколами, отличными от текущего.

.load() является наиболее простым средством для подгрузки и вставки недостающего содержимого с сервера. Он делает ajax-запрос к серверу и вставляет полученные данные в элементы страницы, к которым применялся метод:

// поместим содержимое страницы <tt>http://hostname.ru/ajax/test.html</tt>
// внутрь элемента с id = result
$("#result").load("ajax/test.html");

Если .load() будет применен к объекту jQuery, который представляет 0 элементов, то запрос на сервер выполняться не будет.

Частичная вставка данных

.load() имеет особенность, позволяющую вставлять лишь часть присланных сервером данных. Она заключается в особенных условиях задания параметра url. Если в нем присутствуют пробелы, то вся часть после первого из них рассматривается как селектор, который будет применен для фильтрации данных от сервера:

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

В данном примере, jQuery найдет в полученных данных элемент с id = container и поместит его в элемент с id = result.

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

Пример

Организуем ajax-запрос с передачей параметров, а так же обработаем завершение выполнения запроса выведя на экран соответствующее сообщение:

$("#result").load(
  "ajax/test.php",
  {
    param1: "param1",
    param2: 2
  },
  function(){alert("Получен ответ от сервера.")}
);

На сервере, обработка ajax-запроса ничем не отличается от обработки обычного запроса (как когда вызывается главная страница сайта):

  На сервер были отправлены следующие параметры:
  <ul>
    <li><?php $_GET["param1"]; ?></li>
    <li><?php $_GET["param2"]; ?></li>
  </ul>

В результате этого запроса, на странице, в элемент с идентификатором result будет вставлен сгенерированный на сервере html-текст (список с отправленными параметрами), а так же, на экран будет выведено сообщение "Получен ответ от сервера.".

Ссылки

Поисковые ключи:
  • асинхронный запрос html-текста
  • ajax-запрос html-текста
  • получение html-данных без перезагрузки страницы
  • .load()
  • load()