JavaScript. Подробное руководство, 6-е издание, стр. 316

19.6. Реализация Ajax в библиотеке jQuery

Ajax - популярное название комплекса приемов разработки веб-приложений, в которых применяются возможности использования протокола HTTP (глава 18) для загрузки данных по мере необходимости без перезагрузки страниц. Приемы Ajax оказались настолько полезны в современных веб-приложениях, что в библиотеку jQuery были включены вспомогательные функции, реализующие и упрощающие их использование. Библиотека jQuery определяет один высокоуровневый вспомогательный метод и четыре высокоуровневые вспомогательные функции. Все они основаны на одной низкоуровневой функции,

<b>jQuery.ajax().</b>
В следующих подразделах мы сначала познакомимся с высокоуровневыми утилитами, а затем детально рассмотрим функцию
<b>jQuery.ajax().</b>
Понимание принципов действия функции
<b>jQuery.ajax()</b>
совершенно необходимо, чтобы до конца понять, как действуют высокоуровневые утилиты, даже если вам никогда не придется использовать ее явно.

19.6.1. Метод load()

Метод

<b>load()</b>
является самой простой из всех утилит в библиотеке jQuery: он принимает URL-адрес, асинхронно загружает его содержимое и затем вставляет это содержимое в каждый из выбранных элементов, заменяя любое имеющееся содержимое. Например:

<b>// Загружать и отображать последнюю информацию о состоянии каждые 60 сек.</b>

<b>setInterval(function() { $(&quot;#stats&quot;).load(”status_report.html&quot;); }, 60000);</b>

Коды состояния Ajax, генерируемые библиотекой jQuery

Все утилиты поддержки архитектуры Ajax в библиотеке jQuery, включая метод

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

«success»

Указывает, что запрос выполнен успешно.

«notmodified»

Эта строка говорит о том, что запрос выполнен нормально, но сервер вернул НТТР-ответ 304 «Not Modified», сообщая, что запрошенный документ не изменился с момента предыдущего запроса. Этот код состояния возвращается, только когда параметр

<b>ifModified</b>
имеет значение true (подробнее об этом в разделе 19.6.3.1.). Версия jQuery 1.4 интерпретирует код «notmodified* как успех, но в более ранних версиях он интерпретировался как ошибка.

«error»

Указывает, что запрос завершился неудачей из-за возникновения какой-либо HTTP-ошибки. Чтобы получить более подробную информацию об ошибке, можно проверить код состояния HTTP в объекте

<b>XMLHttpRequest</b>
, который также передается функции.

«timeout»

Если Ajax-запрос не завершился в течение указанного вами интервала времени, функции обратного вызова будет передан этот код состояния. По умолчанию Ajax-запросы в библиотеке jQuery не имеют ограничений по времени выполнения. Этот код состояния может быть получен, только если был установлен параметр

<b>timeout</b>
(раздел 19.6.3.1).

«parsererror»

Этот код состояния говорит о том, что HTTP-запрос завершился успешно, но библиотека jQuery не смогла разобрать ответ. Этот код возвращается, например, когда сервер отправляет XML-документ или JSON-текст, сформированный с ошибками. Обратите внимание, что строка имеет значение «parsererror», а не «parseerror».

************************************************

Мы уже встречались с методом

load()
в разделе 19.4.1, где использовали его для регистрации обработчика события «load». Если в первом аргументе этому методу передать функцию, а не строку, он будет играть роль метода регистрации обработчика события, а не метода поддержки архитектуры Ajax.

Если вам потребуется просто отобразить фрагмент загруженного документа, добавьте в конец URL-адреса пробел и селектор jQuery. Когда содержимое URL-адреса будет загружено, указанный селектор будет использован для выбора фрагмента загруженного HTML-документа и его отображения:

<b>// Загрузить и отобразить температуру из документа со сводкой погоды </b>

<b>$('#temp‘).load(&quot;weather_report.html #temperature&quot;);</b>

Обратите внимание, что селектор в конце этого URL-адреса похож на идентификатор фрагмента (части URL-адресов, начинающиеся с символа решетки, описывались в разделе 14.2). Пробел в данном случае является обязательной частью, если необходимо, чтобы библиотека jQuery вставила лишь выбранный фрагмент (или фрагменты) загруженного документа.

В дополнение к обязательному URL-адресу метод

<b>load()</b>
принимает два необязательных аргумента. Первый - данные, добавляемые в URL-адрес или отправляемые вместе с запросом. Если в этом аргументе передать строку, она будет добавлена в конец URL (при необходимости после ? или &). Если передать объект, он будет преобразован в строку пар имя/значение, разделенных амперсандами, и отправлен вместе с запросом. (Описание особенностей преобразования объекта в строку для использования в составе запроса Ajax приводится во врезке в разделе 19.6.2.2). Обычно метод
<b>load()</b>
выполняет HTTP-запрос методом GET, но, если передать объект с данными, будет выполнен запрос методом POST. Например:

<b>// Загрузить сводку погоды для населенного пункта с указанным почтовым индексом </b>

<b>$('#temp').load(&quot;us_weather_report.html&quot;, &quot;zipcode=02134&quot;);</b>

<b>// Здесь данные передаются в виде объекта, в котором дополнительно указывается,</b>

<b>// что температура должна возвращаться в градусах по шкале Фаренгейта </b>

<b>$('#temp').load(&quot;us_weather_report.html&quot;. { zipcode:02134, units:'F' }):</b>

В другом необязательном аргументе методу

<b>load()</b>
можно передать функцию, которая будет вызвана в случае завершения Ajax-запроса, успешного или нет, и (в случае успеха) после того, как содержимое URL-адреса будет загружено и вставлено в выбранные элементы. Если методу не передаются никакие дополнительные данные, эту функцию обратного вызова можно передать во втором аргументе. Иначе она должна передаваться в третьем аргументе. Указанная функция будет вызвана как метод для каждого элемента, находящегося в объекте jQuery, и ей будет передано три аргумента: полное содержимое, загруженное с указанного URL-адреса, строка с кодом состояния и объект
<b>XMLHttpRequest</b>
, использовавшийся для загрузки содержимого. Аргумент с кодом состояния - это код состояния, созданный библиотекой jQuery, а не возвращаемый протоколом HTTP, и он может быть строкой, такой как «success», «error» или «timeout».