Ajax запрос HTML-данных
Осуществляет запрос к серверу без перезагрузки страницы. Полученные от сервера данные будут автоматически помещены внутрь выбранных элементов. Функция имеет несколько необязательных параметров.
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-текст (список с отправленными параметрами), а так же, на экран будет выведено сообщение "Получен ответ от сервера.".
