AJAX в jQuery


Содержание

Ajax-запрос к серверу через jQuery

В этой статье примеры кода, которые я использую, для отправки ajax-запросов к серверу через jQuery. Их задачи могут быть разными, поэтому под них можно использовать разные функции, которые упрощают написание кода.

Запрос html-данных с помощью функции Load

Это самый простой ajax-запрос через jQuery с получением html-данных и их вставкой в dom-элемент с (содержимое элемента заменяется):

Более продвинутый вариант использования load:

В этом примере серверу так же передаются параметры, а после получения ответа проверяется не было ли ошибки (например, ответ от сервера не был получен) и выполнение различных действий.

Ajax-запросы функциями GET и POST

Эти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.

Передача данных не обязательна, как и выполнение каких-либо действий после получения ответа от сервера, т.е. в этом случае, строчки 3 и 4-6 можно удалить при необходимости и таким образом еще сократить код.

Тип получаемых от сервера данных можно указать, добавив dataType (см.ниже) — по-умолчанию определяется автоматически.

Использование post аналогично, но в следующем примере использую вызов функции после получения ответа от сервера.

На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.

Получение json-данных с помощью getJSON

getJSON — укороченный вариант ajax-запроса методом GET и получением данных в виде json. Способ удобен, например, для получения какого-то массива с данными и последующей работы с ним.

На стороне сервера программа формирует массив и преобразовывает его в json-строку, например, так:

Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.

Простой ajax-запрос через jQuery с помощью функции AJAX

Теперь приведу пример простого get запроса функцией ajax и получением html-данных.

Запрос к серверу происходит get-методом, т.к. параметр, отвечающий за тип запроса, type по-умолчанию равен GET.

Более сложный пример ajax-запроса через jQuery

Пример выполнения запроса функцией ajax с передачей данных post методом и обработкой событий. Ниже опишу дополнительные параметры, которые чаще всего применяются.

Кнопка отправки данных:

В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на «Отправка. » и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на «Отправить», становится активной). Ответ получается в виде json-данных.

Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:

url Адрес отправки ajax-запроса
type Способ отправки запроса GET или POST
data Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&. объект jQuery, например, $(‘input[type=»text»]’) или другие данные.
dataType Тип получаемых от сервера данных. Может быть html, json, text, script и xml.
cache Кэширование браузером запроса (false — не кэшировать).
async Асинхронное выполнение запроса, т.е. программа продолжает выполняться не дожидаясь ответа сервера. Если указать false, то запрос будет выполнен синхронно, при этом страница не будет ни на что реагировать, пока не будет получен ответ от сервера.
processData Преобразование отправляемых данных в url-формат. Если нужно чтобы данные не преобразовывались, установить в false. Например, при отправке изображения на сервер или xml-данных.
contentType Тип передаваемых данных, по умолчанию «application/x-www-form-urlencoded; charset=UTF-8». Если указать false, то в заголовке не будет передаваться тип, что может быть необходимо, например, при отправке изображения на сервер.
beforeSend Функция, выполняемая перед отправкой ajax-запроса.
complete Функция, выполняемая после получения ответа от сервера (любого, успешного или нет).
success Функция, выполняемая при удачном выполнении запроса.
error Функция, выполняемая в случае ошибки.

Ниже приведу еще несколько примеров использования ajax-запросов.

Отправка формы со всеми данными ajax-запросом через jQuery

Примерный код html-формы:

Для того чтобы страница не перезагружалась при нажатии на кнопку «submit», сначала отменяем стандартые действия браузера использовав e.preventDefaults() .

В параметре data мы передаем все поля формы использовав $(this).serialize() — эта функция преобразует все input-ы и select-ы в строку, пригодную для отправки на сервер.

Так же, здесь использован параметр async: false , чтобы пока форма не отправится на сервер больше ничего нельзя было нажать или сделать.

Отправка изображения или файла ajax-запросом через jQuery

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

html-код будет такой:

Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.

Теперь javascript код отправки файла на сервер с отображением прогресса:

При загрузке файла на сервер в кнопке будет показываться сколько % уже передано на сервер. После завершения загрузки название кнопки возвращается как было, а значение input-а с файлом устанавливается пустым, чтобы можно было снова выбирать новый файл.

Пример серверной части на php (по просьбе Евгения):

Информация о загруженном изображении будет содержаться в $_FILES[‘upload’] , т.к. скриптом файл добавлялся так: form.append(‘upload’, files[0]); Соответственно, всё что требуется от php-программы — это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);

Ситуаций, в которых можно и даже нужно использовать ajax-запросы, очень много и все их здесь не разобрать. Тем не менее, если есть предложения, какие еще примеры имеет смысл сюда добавить, пишите в комментариях.

jQuery для начинающих. Часть 3. AJAX

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов…

Что такое AJAX я думаю рассказывать не стоит, ибо с приходом веб-два-нуля большинство пользователей уже воротят носом от перезагрузок страниц целиком, а с появлением jQuery реализация упростилась в разы…

Примечание: Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)
jQuery(..).load

Начнем с самого простого — загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. функция которой будет скормлен результат (необязательный параметр)

Приведу пример JavaScript кода:

Пример подгружаемых данных (содержимое файла example.html):

Пример работы
jQuery.ajax

Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр — объект включающий в себя все настройки (выделены параметры которые стоит запомнить):

* async — асинхронность запроса, по умолчанию true
* cache — вкл/выкл кэширование данных браузером, по умолчанию true
* contentType — по умолчанию “application/x-www-form-urlencoded”
* data — передаваемые данные — строка иль объект
* dataFilter — фильтр для входных данных
* dataType — тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)
* global — тригер — отвечает за использование глобальных AJAX Event’ов, по умолчанию true
* ifModified — тригер — проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false
* jsonp — переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)
* processData — по умолчанию отправляемые данный заворачиваются в объект, и отправляются как “application/x-www-form-urlencoded”, если надо иначе — отключаем
* scriptCharset — кодировочка — актуально для JSONP и подгрузки JavaScript’ов
* timeout — время таймаут в миллисекундах
* type — GET либо POST
* url — url запрашиваемой страницы

Локальные AJAX Event’ы:

* beforeSend — срабатывает перед отправкой запроса
* error — если произошла ошибка
* success — если ошибок не возникло
* complete — срабатывает по окончанию запроса

Для организации HTTP авторизации (О_о):

* username — логин
* password — пароль

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. callback функция, которой будет скормлен результат (необязательный параметр)
4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а. Может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. callback функция, которой будет скормлен результат (необязательный параметр)
4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

Пример работы
jQuery.getJSON

Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. callback функция, которой будет скормлен результат (необязательный параметр)

Пример работы
jQuery.getScript

данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры:

1. url запрашиваемого скрипта
2. callback функция, которой будет скормлен результат (необязательный параметр)

Пример работы
Отправка Формы

Для отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства “сбора” данных из формы лучше использовать плагин jQuery Form
Отправка Файлов

Для отправки файлов посредством jQuery можно использовать плагин Ajax File Upload иль One Click Upload
Взаимодействие с PHP

Для организации работы с PHP использую бибилотеку jQuery-PHP, удобно если Вам нравится jQuery ;), подробней читаем в статье PHP библиотека для jQuery
Примеры использования JSONP

Отдельно стоит отметить использование JSONP — ибо это один из способов осуществления кросс-доменной загрузки данных. Если немного утрировать — то это подключение удаленного JavaScript’a, содержащего необходимую нам информациию в формате JSON, а так же вызов нашей локальной функции, имя которой мы указываем при обращении к удаленному серверу (обычно это параметр callback). Чуть более наглядно это можно продемонстрировать следующая диаграмма (кликабельно):

При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос ввида:

Вместо последнего знака вопроса (?) будет подставлено имя callback функции. Если же Вы не хотите использовать данный способ, то Вам необходимо будет явно указать имя callback функции, используя опцию jsonp при вызове метода jQuery.ajax().
Google Поиск

Пример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье “jQuery + AJAX + (Google Search API || Yahoo Search API)“
Yahoo Поиск

Пример получения и обработки результатов поиска используя Yahoo, более подробную информацию найдете в статье “jQuery + AJAX + (Google Search API || Yahoo Search API)“
JSONP API

Приведу так же небольшой список открытых API с поддержкой JSONP:

* Google — поиск и большинство сервисов
* Yahoo — поиск и большинство сервисов
* Flickr
* MediaWiki — соответственно и все производные — Wikipedia, Wiktionary и т.д.
* Digg
* CNET
* aideRSS

Для удобства разработки, на AJAX запросах висит несколько event’ов, их можно задавать для каждого AJAX запроса в отдельности, либо глобально. На все event’ы можно повесить свою функцию.

Пример для отображения элемента с >

Для локальных событий — вносим изменения в опции метода ajax():

Для большей наглядности, приведу следующую диаграмму (кликабельно):

Ну и собственно список всех event’ов:

* ajaxStart — Данный метод вызывается в случае когда побежал AJAX запрос, и при этом других запросов нету
* beforeSend — Срабатывает до отправки запроса, позволяет редактировать XMLHttpRequest. Локальное событие
* ajaxSend — Срабатывает до отправки запроса, аналогично beforeSend
* success — Срабатывает по возвращению ответа, когда нет ошибок ни сервера, ни вернувшихся данных. Локальное событие
* ajaxSuccess — Срабатывает по возвращению ответа, аналогично success
* error — Срабатывает в случае ошибки. Локальное событие
* ajaxError — Срабатывает в случае ошибки
* complete — Срабатывает по завершению текущего AJAX запроса (с ошибкои или без — срабатывает всегда).Локальное событие
* ajaxComplete — Глобальное событие, аналогичное complete
* ajaxStop — Данный метод вызывается в случае когда больше нету активных запросов

Введение в AJAX

История и текущее состояние популярного подхода к разработке Web-приложений

За последние несколько лет язык JavaScript прошел путь от «вечно отстающего» и объекта насмешек до ключевого языка Web-программирования. Если попытаться выделить ключевой фактор, способствовавший росту популярности JavaScript, то это появление приложений на основе технологии AJAX.

Наработка навыков использования JavaScript

Эта статья является частью курса по развитию навыков использования JavaScript. Дополнительную информацию можно найти в полном руководстве по JavaScript.

Попросту говоря, AJAX – это подход к проектированию и разработке, позволяющий Web-приложениям обновлять экраны свежими данными без перезагрузки страниц. Такая функциональность позволяет создавать более дружественный интерфейс пользователя, похожий на обычные оконные приложения.

Краткая история AJAX

История технологии AJAX, которая, казалось бы, мгновенно завоевала огромную популярность, похожа на историю других прорывных технологий. Хотя кажется, что эта технология появилась из ниоткуда, на самом деле для этого потребовалось определенное время. Несколько лет исследований в области Web-разработки привели к созданию инструментов и подходов, которые распространялись под «брендом» AJAX. Начиная с эры DHTML в период первоначального Интернет-бума и на протяжении «темных» лет после массового краха доткомов разработчики по всему миру открывали для себя неожиданные возможности JavaScript, открывающие новые пути для разработки Web-приложений.

XMLHttpRequest

Первый и самый важный компонент технологии AJAX – это XMLHttpRequest (XHR) API. XHR – это JavaScript API для передачи данных в виде сообщений между Web-браузером и Web-сервером. Этот API позволяет использовать HTTP POST -запросы (для передачи данных на сервер) и GET -запросы (для загрузки данных с сервера в фоновом режиме). XHR – это «ядро» большинства AJAX-вызовов и одна из важнейших технологий в современном Web-программировании.

Наконец, XHR — это лучший подарок Интернет-сообществу, сделанный командой Microsoft® Internet Explorer®.

Это действительно так. XHR впервые появился в пятой версии Internet Explorer в 2000 г. Изначально написанный Алексом Хопманном (Alex Hopmann) в виде элемента управления Microsoft® ActiveX®, XHR был создан для использования в Microsoft Outlook® Web Access и предназначался для «сглаживания» взаимодействия между передовым для того времени пользовательским интерфейсом и Microsoft Exchange Server.

Хотя пакет от Microsoft нельзя считать скромным началом, но XHR определенно переросл рамки исходного продукта. С тех времен XHR был интегрирован во все основные Web-браузеры и даже был признана W3C в качестве стандарта.

Первооткрыватели

Помимо реализации от Microsoft, другие компании также предпринимали попытки развития в направлении AJAX. Хотя с подобными технологиями экспериментировали многие, стоит особо отметить два проекта: первый, потому он стал интересной и часто упоминаемой вехой в истории развития AJAX, и второй, который сделал технологию AJAX действительно массовой.

Oddpost

Oddpost — это функционально насыщенный Web-клиент для электронной почты, выпущенный в 2002 году. В нем использовались многие подходы, сохранившие популярность и по сей день. По стилю и функциональности он напоминал стандартный клиент для работы с электронной почтой. Но в его реализации применялась технология DataPacks, позволяющая передавать небольшие фрагменты данных между сервером и Web-браузером. В то время такое решение считалось инновационным.

В дальнейшем Oddpost был куплен компанией Yahoo! и использовался в качестве основы при создании обновленной версии Yahoo! Mail.

Google Maps, Google Suggest, Gmail и одна важная статья

Видимые изменения начались несколько лет назад с появления Gmail, Google Suggest и Google Maps. Все эти проекты интенсивно использовали AJAX-подход и радикально изменили область разработки Web-приложений. Их отзывчивость и интерактивность поразили рядовых пользователей, и продукты Google быстро завоевали популярность у активной части Интернет-сообщества.

Хотя не все об этом знали, но область разработки Web-приложений ожидали еще более значительные изменения. Пользователи понимали, что Web-приложения меняются и приобретают новые замечательные возможности, но в чем конкретно заключаются эти изменения, было неизвестно.

Однако хватило одной статьи, чтобы «открыть глаза» Интернет-сообществу на суть происходящих изменений.

18 февраля 2005 года Джесси Джеймс Гаррет (Jesse James Garrett), сооснователь и президент компании Adaptive Path, написал статью «Ajax: A New Approach to Web Applications» (см. ссылку в разделе Ресурсы). В этой статье он описал подход к разработке Web-приложений, который уже использовался в таких приложениях, как Gmail и GoogleMaps. Он назвал это «фундаментальным сдвигом в возможностях, доступных Web-приложениями».

Также он дал название данному подходу. Это важно, так как новый термин сфокусировал внимание сообщества на самом тренде и стал отправной точкой для обсуждения новых возможностей разработки Web-приложений. В статье Гаррета термин AJAX описывался следующими словами.

Определение AJAX
AJAX — это не технология. На самом деле AJAX — это новое объединение нескольких технологий, каждая из которых сильна в своей области. AJAX включает в себя:

  • стандартное представление с помощью XHTML и CSS;
  • динамическое отображение и интерактивность благодаря DOM;
  • обмен и манипулирование данными с помощью XML и XSLT;
  • асинхронное получение данных с помощью XMLHttpRequest;
  • использование JavaScript для интеграции вышеперечисленных технологий.

Хотя это техническое описание несколько устарело, основная идея сохранилась: HTML и CSS представляют данные и стиль; DOM и связанные с ней методы позволяют обновлять страницу в режиме реального времени, XHR отвечает за общение с сервером, а JavaScript управляет процессом в целом.

Цукерберг рекомендует:  Вакансии Hemmersbach

Общий эффект от этой статьи был ошеломительным. Она представляла собой редкий случай, когда рекламные обещания, объединившись с огромной креативной энергией, действительно привели к революции. Подхваченная новым поколением стартапов, которые начали появляться по всему миру, технология AJAX быстро оказалась на передовой линии Web-разработки. Эта технология прошла путь от тренда с неясной маркетинговой перспективой до ключевого компонента современных Web-дизайна и Web-разработки.

Библиотеки


Одним из ключевых факторов, способствовавших развитию Web-разработки на основе AJAX, стало появление и внедрение нескольких высокофункциональных JS-библиотек. За исключением опытных JS-разработчиков мало кто в действительности понимал, как работают технологии, формирующие AJAX. Поэтому, хотя многие аспекты интерактивности и анимации внутри Web-браузера в эпоху DHTML были доведены почти до предела возможного, сложность использования AJAX привела к большому разрыву между потребностями в Web-сайтах с AJAX-возможностями и количеством людей, способных создавать такие интерфейсы с нуля. Библиотеки, подобные Prototype, Dojo и jQuery, помогли преодолеть этот разрыв, предоставив готовую функциональность, которая позволила реализовать анимацию и интерактивность, преодолеть различия между Web-браузерами и сгладить недостатки базового JavaScript API.

Асинхронный JavaScript и не только

Одним из крупнейших изменений в мире AJAX с момента его зарождения и до сегодняшнего дня стало появление JSON — протокола для обмена данными на основе JavaScript. JSON, благодаря небольшому объему передаваемой информации и удобному доступу с помощью родного JavaScript API (в отличие от сложных методов и свойств, основанных на DOM и XML), был быстро принят разработчиками в качестве стандартного транспортного протокола. С момента своего появления JSON также успел попасть в последнюю 5-ую версию спецификации ECMAScript.

JSON+Padding

Стоит также упомянуть одно важное усовершенствование исходной спецификации JSON — JSON+Padding (JSONP). Как будет показано, объект XMLHttpRequest обладает строгой моделью безопасности, которая допускает взаимодействие только в рамках того же домена и протокола, которые использовались при запросе страницы. JSONP предоставляет элегантный способ обойти это ограничение, поместив JSON-отклик в callback-функцию или переменную, объявленную пользователем. После того, как JSON сценарий будет добавлен в документ, доступ к данным, лежащим в объекте, можно будет получить через этот метод. Сегодня этот подход стал фактически стандартом. Например, крупные Web-сервисы используют его для объединения и связывания информации из разных источников.

Но, несмотря на свою популярность, JSONP обладает очевидной уязвимостью, которой могут воспользоваться злоумышленники. Возможность «инъекции» тега script со стороны позволяет выполнить на базовой странице любое действие, что создает невероятные возможности для нанесения вреда пользователям, если источник данных был скомпрометирован или основной Web-сайт не интересуется происхождением ресурсов, добавляемых на его страницы.

Теперь, после изучения истории, можно переходить к изучению самой технологии. Так как базовый JavaScript API находится «в тени» библиотек, то даже для опытных разработчиков будет интересно узнать, как всё это работает на самом деле.

XMLHttpRequest API и его возможности

Хотя помимо XHR существуют и другие подходы для получения данных с сервера, именно XHR остается «ядром» большинства AJAX-приложений. Взаимодействие на основе XHR строится на двух компонентах: запрос и ответ. Ниже будут рассмотрены обе эти составляющие.

Модель безопасности

Как уже говорилось, исходный объект XMLHttpRequest обладает четкой моделью безопасности. Политика «same-origin» (объекты, происходящие из одного места) позволяет взаимодействовать только с тем хостом, протоколом и портом, которые использовались запрошенной страницей. Это означает, что общение между различными доменами (example.com и example2.com), различными хостами (my.example.com и www.example.com) и различными протоколами (http://example.com и https://example.com) запрещено и приводит к возникновению ошибки.

Однако благодаря разработке консорциумом W3C второй версии XHR-объекта и нового протокола Cross-origin Request Protocol и реализации этих концепций в большинстве Web-браузеров, включая InternetExplorer 8+, Mozilla Firefox 3.5+, Apple Safari 4+ и Google Chrome, появилась возможность выполнять запросы между доменами. Хотя для этого и потребовалось время, но теперь, указав в запросе специальный заголовок Origin :

и настроив сервер отправлять обратно соответствующий заголовок Access-Control-Allow-Origin :

стало возможным осуществлять дуплексное взаимодействие между доменами с помощью XHR-объектов.

Запрос (request)

Со стороны запроса доступны следующие четыре метода:

  • open() – открывает подключение к серверу и принимает несколько аргументов:
    • method — используемый HTTP-метод (допускается POST или GET )
    • url — запрошенный URL-адрес.
    • async — необязательный Boolean -параметр, сигнализирующий о том является ли запрос асинхронным или нет (по умолчанию равен True ).
    • user – необязательный параметр, содержащий имя пользователя для аутентификации.
    • password – необязательный параметр, содержащий пароль, используемый для аутентификации.
  • setRequestHeader() – устанавливает заголовки запроса и принимает два аргумента: header (имя заголовка) и value (значение заголовка).
  • send() – отправляет запрос и может принимать необязательный параметр, содержащий тело POST -запроса.
  • abort() – прерывает отправку запроса.

Ответ (response)

Объект response также обладает определенными атрибутами и методами:

  • status – стандартный HTTP-статус запроса (например, в случае успешного выполнения запроса будет возвращено значение 200 ).
  • statusText – строка, содержащая полное описание статуса, возвращенного Web-сервером (например, 304 Not Modified ).
  • getResponseHeader() – возвращает значение определенного заголовка ответа; в качестве параметра принимает имя запрашиваемого заголовка.
  • getAllResponseHeaders() – возвращает текстовое содержание всех заголовков ответа.
  • responseText – атрибут, в котором хранится текстовое представление тела запроса.
  • responseXML – атрибут, содержащий XML-представление тела запроса – фрагмент документа с DOM и всеми соответствующими методами.

Состояние readyState

После создания объект XMLHttpRequest может находиться в одном из пяти состояний, перечисленных ниже:

  • 0: UNSENT – объект только что был создан.
  • 1: OPENED – был успешно вызван метод open() данного объекта.
  • 2: HEADERS_RECEIVED – заголовки ответа были успешно загружены.
  • 3: LOADING – тело ответа загружается.
  • 4: DONE – запрос был выполнен, но неизвестно – успешно или нет (информацию о результате выполнения запроса можно получить с помощью стандартных статусов и заголовков HTTP-ответа).

Пример, использующий базовый JavaScript API

Прежде чем переходить к рассмотрению популярных библиотек, стоит изучить несколько примеров на «чистом» JavaScript, чтобы разобраться, как работает базовая технология. Все представленные примеры можно найти в разделе «Материалы для скачивания» и запустить на любом Web-сервере с поддержкой PHP. Все примеры работают с документом, представленным в листинге 1.

Листинг 1. Пример HTML-документа

В листинге 2 представлен простой GET -запрос, обрабатывающий объект responseXML . Этот пример AJAX-вызова выполнен в духе первых лет этой технологии, но он работает во всех современных Web-браузерах, включая Internet Explorer версий 7 и 8.

Листинг 2. Базовая AJAX-функция

В листинге 3 используется оригинальный ActiveX объект. В случае, если его реализация отсутствует, с помощью блока try … catch выполняется поиск потенциальных ссылок на этот объект в других версиях Internet Explorer. Этот пример полностью совместим с различными версиями Web-браузера Internet-Explorer начиная с версии 5.

Листинг 3. AJAX-сценарий, совместимый с различными Web-браузерами семейства IE

В листинге 4 приведен подход, чаще всего используемый сегодня: получение объекта responseText в формате JSON и преобразование его в «родной» JS-объект. Как видно из примера, работать с JSON-данными очень просто. Если сравнить этот листинг с порой неочевидными и многословными методами обработки XML-данных, станет ясно, почему большинство разработчиков в качестве транспортного протокола выбрали именно JSON.

Листинг 4. Использование JSON

Во всех последующих листингах (с 5 по 11) используются JSON-данные.

В листинге 5 приведен простой пример JSONP. Как можно заменить, в нем полностью игнорируется XHR, а к сценарию просто добавляется callback-аргумент. Когда callback-вызов срабатывает (сервер возвращает ответ), полученный объект с данными помещается в исполняемый JS-код.

Листинг 5. Пример использования JSONP

Использование AJAX-библиотек

Для большинства программистов внутренняя структура AJAX-запроса интересна только с академической точки зрения, так как основная часть их работы выполняется в контексте одной или нескольких JS-библиотек. Кроме решения проблем совместимости между различными Web-браузерами, библиотеки также предоставляют функциональность, надстроенную над базовым API. В следующих примерах показывается, как выполнять GET — и POST — запросы с помощью API трех наиболее популярных библиотек.

jQuery

Сначала рассмотрим пример, использующий популярную библиотеку jQuery. Поддержка AJAX в jQuery была не так давно переписана, чтобы добавить новую функциональность, описание которой выходит за рамки данной статьи. Однако общей чертой всех AJAX-запросов в jQuery является наличие объекта с конфигурацией, передаваемого функции в качестве аргумента. Стоит отметить, что в jQuery есть несколько удобных методов, таких как $.post и $.get, служащих для быстрого доступа к конфигурации стандартных запросов.

В листинге 6 приведен исходный код, выполняющий загрузку данных с помощью jQuery.

Листинг 6. Реализация GET-запроса в jQuery

В листинге 7 показано, как использовать POST -запрос для получения JSON-объекта. В данном случае для «разбора» полученных данных используется «родной» объект JSON. В документации jQuery говорится о том, что неподдерживающие Web-браузеры необходимо дополнить сценарием JSON2.js.

Добавление специального обработчика для ошибок позволяет обрабатывать как удачные, так и неудачные запросы. В jQuery для описания ошибки используются три аргумента, включая сам XHR-объект, что позволяет наладить надежную обработку ошибок.

Листинг 7. Реализация POST-запроса в jQuery

Как будет видно из следующих примеров, библиотека Dojo способна на большее, нежели простое манипулирование DOM-объектом и отправка AJAX-запросов. Её возможности позволяют создавать самые сложные приложения, но все равно стоит изучить её API и с такой «начальной» позиции.

В Dojo есть две специальные AJAX-функции: xhrGet и xhrPost . Кроме того, для разбора полученных данных используется JSON-утилита, входящая в Dojo. В листинге 8 приведен пример создания GET -запроса.

Листинг 8. Реализация GET-запроса в Dojo

В листинге 9 приведен пример обработки POST -запроса с конфигурацией обработчика ошибок.

Листинг 9. Реализация POST-запроса в Dojo

Yahoo! User Interface (YUI)

В библиотеке YUI используется немного другой подход, отличающийся от рассмотренных ранее. При использовании YUI всегда возвращается XHR-объект полностью, а не только «разобранные данные», что обеспечивает лучший доступ к данным, хранящимся в запросе, и позволяет более гибко манипулировать ими. Также это значит, что программист должен знать особенности внутренней реализации XHR-объекта. В виде отступления от основной темы в примерах показывается, как использовать загрузочный модуль YUI.use() , который хотя и не относится непосредственно к AJAX (за исключением загрузки модуля io ), но заслуживает отдельного упоминания. В листинге 10 этот модуль в качестве аргументов принимает список из других YUI-модулей и callback-функцию. После запуска он создает пакет, в котором все необходимые модули содержатся в одном CDN-артефакте, загружаемом с Web-портала Yahoo! Content Delivery Network.

Листинг 10. Реализация GET-запроса в YUI

В листинге 11 приведен пример реализации POST -запроса, в котором используется интересный приём: выделение функций для обработки запроса в отдельный объект on .

Листинг 11. Реализация POST-запроса в YUI

Как можно видеть, базовые принципы, применяемые во всех листингах, в целом совпадают. За исключением поддержки ActiveX-компонентов и JSONP, все примеры охватывают одну и ту же область, отличаясь реализацией конкретных API, основанных на базовых возможностях JavaScript для создания интерактивных приложений.

Важно учитывать, что все эти библиотеки предлагают гораздо больше возможностей, не ограничиваясь стандартной реализации AJAX, описанной в статье. Хотя большинство задач, связанных с использованием AJAX, обычно решаются с помощью обычных GET и POST -запросов, все равно полезно знать, какие ещё возможности может предложить выбранная библиотека.

Заключение

После изучения основ и некоторых аспектов внутренней реализации AJAX можно уверенно переходить к созданию AJAX-сценариев для собственных Web-сайтов и приложений. Как и в случае с любой технологией, лучший способ изучить AJAX – это использовать его для решения практических задач, так что не стесняйтесь использовать или изменять примеры, представленные в этой статье. За последние несколько лет выяснилось, что изучение AJAX – это крайне выгодное вложение ресурсов и времени.

Ресурсы для скачивания

  • этот контент в PDF
  • примеры кода для этой статьи (sample-ajax-code.zip | 18KB)

Похожие темы

  • An introduction to Ajax: оригинал статьи (EN).
  • The Story of XMLHttp (Alex Hopmann) (EN): статья об истории XMLHttp.
  • Ajax: A New Approach to Web Applications (Jesse James Garret) (EN): статья-манифест, в которой впервые был подробно описан AJAX-подход.
  • JSON.org: Web-сайт, посвященный JSON.
  • ECMA-262 ECMAScript Language Specification 5th edition (декабрь 2009) (EN): информация о стандартизированной версии JSON.
  • Спецификация XMLHttpRequest 2 (EN).
  • Cross-origin Resource Sharing: публикация W3C, посвященная обмену информацией между различными доменами.
  • Исследование Николаса Закаса (Nicholas Zakas), посвященное организации AJAX-взаимодействия между различными доменами..
  • Ajax with Dojo: дополнительная информация о Dojo.
  • YUI3: IO: дополнительная информация о YUI3.
  • Присоединяйтесь к автору статьи в Твиттере.
  • Следите за публикациями developerWorks в Твиттере или подпишитесь на канал твитов по Linux на developerWorks.
  • Загрузить JSONP.
  • Дополнительная информация о методе jQuery.ajax() , входящем в jQuery API.
  • Дополнительная информация о JavaScript-библиотеке jQuery.
  • Загрузить Dojo Toolkit.
  • Загрузить библиотеку YUI.

Комментарии

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии или подписаться на них.

Создание AJAX запросов в jQuery

С помощью JavaScript Вы можете создавать асинхронные запросы и отправлять их на сервер.

Использование асинхронных запросов позволяет значительно ускорить загрузку страниц, так как в этом случае обновляться будет только та часть страницы, которая содержит новые данные, а не страница целиком.

Техника использования асинхронных запросов называется AJAXAsynchronous JavaScript And XML (Асинхронный JavaScript и XML).

Создание AJAX запросов на «чистом» JavaScript имеет несколько недостатков:

  • Код даже самого простого AJAX запроса получается достаточно громоздким и сложным для понимания без специального ознакомления.
  • Необходимо добавлять дополнительный код для поддержки старых версий браузеров.

AJAX запрос созданный с помощью jQuery занимает всего одну строчку кода, и уже оптимизирован для использования и с новыми и старыми версиями браузеров.

селектор выбирает элемент, в котором будет отображен результат запроса.

url адрес файла, который будет запрошен у сервера с помощью AJAX.

данные которые будут переданы запрошенному файлу. Если Вы хотите запросить файл, при этом не передавать никаких данных, оставьте данный параметр пустым.

функция имя функции, которая будет вызвана после выполнения запроса.

Теперь приведем пример запроса, который пересылает данные.

В примере ниже мы пересылаем скрипту add.php переменную x со значением 4 и переменную y со значением 5 скрипт в свою очередь принимает эти переменные, производит их сложение и отправляет результат обратно.

Сопровождающие функции

Сопровождающие функции позволяют выполнять различный код в зависимости от состояния выполнения AJAX запроса.

Метод ajaxSend() выполняет переданный в него код во время отправления AJAX запроса.

Метод ajaxComplete выполняет переданный в него код после завершения выполнения AJAX запроса (при этом неважно произошла ошибка или нет).


Метод ajaxSuccess выполняет переданный в него код, если выполнение AJAX запроса завершается успешно.

Метод ajaxError выполняет переданный в него код, если выполнение AJAX запроса завершается с ошибкой.

Методы ajaxStart и ajaxStop используются для сопровождения группы AJAX запросов.

Метод ajaxStart выполняет переданный в него код при отправлении первого запроса из группы.

Метод ajaxStop выполняет переданный в него код при завершении последнего запроса из группы.

Низкоуровневые AJAX запросы

Высокоуровневые методы создания AJAX запросов (т.е. методы которые были разобраны ранее в данной главе) подходят для создания большей части запросов, но иногда их функциональности становится недостаточно.

Низкоуровневые AJAX запросы предоставляют более широкую функциональность, но более сложны в использовании.

Синтаксис высокоуровневого AJAX запроса:

Синтаксис аналогичного низкоуровневого AJAX запроса:

Обратите внимание: полный список всех существующих методов jQuery для создания AJAX запросов с примерами использования Вы найдете в нашем jQuery справочнике.

Шпаргалка по jQuery функциям работающим с Ajax

Отредактировано: 23 Октября 2020

Asynchronous Javascript And Xml — полное название технологии AJAX. Это технология обращения к серверу без перезагрузки страницы.

jQuery функции работающие с технологией Ajax:

    $.ajax() — детальная настройка ajax параметров. Эта функция лежит в основе всех Ajax jQ запросов.

settings — объект с настройками, заданный в формате

  • url — url-адрес, по которому будет отправлен запрос.
  • data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: .
  • callback(data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
    • data — данные, присланные с сервера.
    • textStatus — статус того, как был выполнен запрос.
    • jqXHR — объект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest)
  • dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос.
  • url — url-адрес, по которому будет отправлен запрос.
  • data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: .
  • callback(data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
    • data — данные, присланные с сервера.
    • textStatus — статус того, как был выполнен запрос.
    • jqXHR — объект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest)
  • dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос.
  • url — url-адрес, по которому будет отправлен запрос.
  • data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: .
  • callback(data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
    • data — данные, присланные с сервера.
    • textStatus — статус того, как был выполнен запрос.
    • jqXHR — объект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest)
  • dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос.

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

Если в url адресе установлен селектор, то код будет вставлен частично.

  • url — url-адрес, по которому будет отправлен запрос.
  • data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: .
  • callback(data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
    • data — данные, присланные с сервера.
    • textStatus — статус того, как был выполнен запрос.
    • jqXHR — объект jqXHR (до jQuery 1.5, использовался XMLHttpRequest).

jQuery.getScript(url, [success(data, textStatus)])

  • url — url-адрес, url-адрес js-файла.
  • success(data, textStatus) — пользовательская функция, которая будет вызвана после удачного выполнения загруженного js-файла.
    • data — данные, присланные с сервера.
    • textStatus — статус того, как был выполнен запрос.
  • $.param() — преобразует объект, массив или массив объектов в строку, пригодную для передачи через url.
  • $().serialize() — преобразует данные формы в строку, пригодную для передачи через url.
  • $().serializeArray() — преобразует данные формы в массив объектов, содержащий данные элементов формы.

Функция $.ajax()

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

jQuery.ajax( url [, settings] ) — запись для JQ начиная с версии 1.5

jQuery.ajax( [settings] ) — запись для JQ начиная с версии 1.0

url — URL адрес, на который будет отправлен Ajax запрос. Тип: Строка.
settings — набор параметров вида «ключ: значение», которые настраивают запрос Ajax. Все настройки опциональны. Настройки по умолчанию устанавливаются с помощью $.ajaxSetup(). Тип: Объект.

Возвращает объект jqXHR (надмножество объекта XMLHTTPRequest).

Список возможных настроек параметров $.Ajax()

По умолчанию: зависит от параметра DataType

При выполнении запроса, в заголовках (header) указываются допустимые MIME-типы содержимого, ожидаемого от сервера. Значения этих типов будут взяты из параметра accepts.

По умолчанию: true

Определяет способ обработки скрипта. По умолчанию, после отправки запроса на сервер, страница не останавливает свою работу в ожидании ответа, т.е. работает асинхронно.

Чтобы включить синхронный запрос, укажите в параметре- false, но имейте в виду, что выполнение запросов в синхронном режиме может привести к блокировке страницы, пока запрос не будет полностью выполнен. А также, что кроссдоменные запросы и запросы типа «jsonp» не могут выполняться в синхронном режиме.

Содержит функцию, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер. Такая функция может быть полезна для модификации jqXHR-объекта (в ранних версиях библиотеки (до 1.5), вместо jqXHR используется XMLHttpRequest). Например, можно изменить/указать нужные заголовки (headers) и.т.д. Объект-jqXHR будет передан в функцию первым аргументом. Вторым аргументом передаются настройки запроса.

beforeSend относится к ajax-событиям. Поэтому если указанная в нем функция вернет false, ajax-запрос будет отменен.

Начиная с jQuery-1.5, beforeSend вызывается независимо от типа запроса.

По умолчанию: boolean

Тип: true, false для типов данных ‘script’ and ‘jsonp’

Если false, запрашиваемая страница не будет кэшироваться браузером

Тип: функция или массив

Функция, которая будет вызвана после завершения ajax запроса (срабатывает после функций-обработчиков success и error). Принимает два аргумента:

  • объект типа jqXHR (в ранних версиях, до jQuery 1.4.x использовался XMLHttpRequest);
  • textStatus — cтроку, характеризующую статус запроса: «success», «notmodified», «error», «timeout», «abort», или «parsererror» (начиная с jQuery 1.5, complete может принимать массив функций).

Параметр задается в формате <строка:регулярное выражение>и определяет, как jQuery будет разбирать ответ от сервера, в зависимости от его типа. (добавлено в версии 1.5)

По умолчанию: ‘application/x-www-form-urlencoded; charset=UTF-8’

При отправке Ajax запроса, данные передаются в том виде, в котором указаны в данном параметре. По умолчанию используется ‘application/x-www-form-urlencoded; charset=UTF-8’. Если задать значение самим, то оно будет отправлено на сервер. Если кодировка не указана, то по умолчанию будет использоваться кодировка выставленная на сервере.

Объект, который станет контекстом после выполнения запроса (передаваемое значение в переменную this). Например, если указать в качестве контекста DOM-элемент, то все обработчики ajax-запроса тоже будут выполняться в контексте данного DOM-элемента. В данном примере ключевое слово this будет содержать document.body:

Определяет, с помощью каких функций будет производиться конвертация значений из одного типа, в другой. (добалено в версии 1.5

По умолчанию: false для одного и того же домена, true для кроссдоменных запросов.

Если вы хотите, чтобы выполнить кросс-доменный запрос (например, JSONP) на том же домене, выставите true в настройке crossDomain. Это позволяет, например, сделать серверные перенаправление на другой домен. (добалено в версии 1.5)

Тип: объект или строка

Данные, которые будут переданы на сервер. Если данные не являются строкой, то они конвертируются в строку запроса.

Для запросов типа GET данные прикрепляются к URL. Объект должен состоять из пар ключ/значение. Если в значении массив, то jQuery упорядочивает значения в зависимости от настройки traditional. По умолчанию, например, превращается в &foo=bar1&foo=bar2.

Функция, с помощью которой будут обрабатываться сырые данные типа XMLHttpRequest, полученные от сервера. Ваша функция должна играть роль фильтра и возвращать очищенную строку. В функцию передаются два параметра: полученные данные и значение параметра dataType.

По умолчанию: автоматически определяемая строка (xml, json, script, или html)

Тип данных, ожидаемых от сервера. Если опция не определена, то jQuery попытается определить тип, основываясь на MIME-типе ответа.

Функция, исполняемая в случае неудачного запроса. Принимает 3 аргумента:

  • объект jqXHR (в прошлом XMLHttpRequest);
  • строку с описанием ошибки. Может содержать:
    • null
    • timeout
    • error
    • abort
    • parsererror
  • строку исключения, если оно было выброшено. если происходит HTTP ошибка, то в третий аргумент будет записан её текстовой статус. К примеру, «Not Found» или «Internal Server Error». Начиная с jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций.

Событие error не происходит при dataType равному script или JSONP.

По умолчанию: true

Вызывать или нет глобальные обработчики событий Ajax для этого запроса.

  • $.ajaxStart() — начало.
    • $.ajaxError() — ошибка.
    • $.ajaxSuccess() — успешное выполнение.
    • $.ajaxComplete() — завершение запроса.
    • $.ajaxSend() — отправка.
  • $.ajaxStop() — конец.

Здесь можно указать дополнительные заголовки запроса (header). Значения этой настройки будут введены до вызова функции beforeSend, в которой могут быть внесены окончательные изменения в заголовки. (добалено в версии 1.5)

По умолчанию: false

Запрос будет считаться успешным только в случае, если данные ответа изменились со времени последнего запроса. Проверка осуществляется по заголовку Last-Modified. По умолчани, данная опция отключена. В jQuery 1.4 так же проверяется значение ‘etag’, для отслеживания факта изменения данных.

По умолчанию: зависит от текущей локации

Параметр определяет, запущена ли веб-страница локально (например по протоколу file, *-extension, и widget) или нет (например по протоколу http).

Определяет имя параметра, который добавляется в url JSONP-запроса(по умолчанию, используется «callback»). К примеру настройка преобразуется в часть url строки ‘onJSONPLoad=?’. Начиная с версии 1.5, указание в этом параметре false предотвращает добавление в url дополнительного параметра. В этом случае, необходимо установить значение настройки jsonpCallback. Например так: .

Тип: строка или функция

Функция, которая будет вызвана при ответе сервера на запрос типа JSONP. По умолчанию, jQuery генерирует произвольное уникальное имя этой функции, что более предпочтительно. Если вы хотите использовать кэширование GET запросов, то вписывайте название функции сами. Начиная с версии 1.5 можно указать функцию, для того, чтобы обработать ответ сервера самостоятельно.

По умолчанию: GET

Метод передачи данных который надо использовать («POST», «GET», «PUT»). Добавлено в версии 1.9.0.

Здесь можно указать тип данных, в котором ожидается ответ от сервера вместо XHR. Добалено в версии 1.5.1.

Пароль, который будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)

По умолчанию: true

По умолчанию передаваемые на сервер данные преобразуются из объекта в строку запроса и отправляются как «application/x-www-form-urlencoded». Если вам необходимо отправить DOM-документ или иные данные, которые нельзя подвергать конвертированию установите опцию processData в false.

Применяется только для Ajax GET-запросов типов ‘JSONP’ и ‘script ‘. Если сервер на стороннем домене использует кодировку, отличную от вашей, необходимо указать кодировку стороннего сервера.

Набор пар, в котором кодам выполнения запроса сопоставляются функции, которые при этом будет вызваны. Например, для кода 404 (страницы не существуют) можно сделать вывод сообщения на экран:


Если запрос прошёл успешно, то в качестве параметра, анонимная функция будет принимать те же параметры, что и при success. При ошибке, будет принимать то же самое что и при функции-обработчике error. Добалено в версии 1.5

Тип: функция или массив

Функция, которая будет вызвана в случае успешного завершения запроса. Принимает 3 аргумента:

  • data — данные, присланные сервером и прошедшие предварительную обработку;
  • textStatus — строка со статусом выполнения;
  • объект jqXHR.
    • В версиях до 1.5 вместо jqXHR используется XMLHttpRequest.
    • В версиях после 1.5, вместо одной функции, этот параметр может принимать массив функций.

Если в качестве параметра dataType указан JSON, данная функция может не обрабатываться, по многим причинам, но в основе большинства причин лежит ошибка. Чтобы понять почему не обрабатывается функция:

  • проверьте консоль в браузере на наличие ошибок;
  • проверьте логи CMS или иной платформы;
  • проверьте логи сервера.

Ошибка не обязательно должна быть связана с тем что указано в блоке.

Время ожидания ответа от сервера в миллисекундах. Переписывает глобальную настройку этого же параметра в $.ajaxSetup(). Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error, которое будет иметь статус «timeout».

По умолчанию: false

Установите значение этого параметра в true, для того, чтобы использовать традиционный стиль сериализации.

По умолчанию: GET

Определяет тип запроса GET или POST. Можно также использовать другие HTTP-запросы (такие как PUT или DELETE), но следует помнить, что они поддерживаются не всеми бразерами.

По умолчанию: текущая страница

Страница, накоторую будет отправлен запрос.

Имя пользователя, которое будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)

По умолчанию: ActiveXObject в IE, XMLHttpRequest в других браузерах

Callback-функция, для создания объекта XMLHttpRequest. Создав свою функцию, вы берёте на себя всю ответственность за формирование объекта.

По умолчанию: значение

Объект вида <имя:значене>для изменения значений соответствующих полей объекта XMLHttpRequest. Добалено в версии 1.5.1.

$.ajaxPrefilter() — устанавливает обработчик, вызываемый перед выполнением каждого ajax-запроса. Предшествует выполнению любых других обработчиков ajax.

Объект jqXHR

Объект jqXHR является надмножеством объекта XMLHTTPRequest, и содержит в себе:

  • responseTextсвойство;
  • responseXMLсвойство;
  • getResponseHeader() метод.
  • overrideMimeType()метод (до JQuery 1.5.1), может использоваться в функции beforeSend(), например, для изменения content-type заголовка.

Примеры jQuery Ajax функций

Пример установки глобальных параметров с помощью $.ajaxSetup():

Пример функции .get():

Пример функции .post():

Пример функции .load():

Пример обработки Ajax события:

Пример использования функции .ajax()

Ajax-запрос в jQuery

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

$.ajax() возвращает объект XMLHttpRequest. В большинстве случаев Вам не понадобится работать непосредственно с этим объектом, но он все же доступен, в случае, если Вам необходимо прервать запрос вручную.

В качестве аргумента функции $.ajax() передается объект, состоящий из пар ключ/значение, которые используются для инициализации и управления запросом.

Ajax-запрос имеет два варианта использования:

  • url — url-адрес, по которому будет отправлен запрос.
  • settings — в этом параметре можно задать настройки для данного запроса. Задается с помощью объекта в формате <имя:значение, имя:значение. >. Ни одна из настроек не является обязательной. Установить настройки по умолчанию можно с помощью метода $.ajaxSetup()

Отличие от предыдущего варианта метода заключается лишь в том, что свойство url здесь является частью настроек, а не отдельным параметром.

Список настроек (settings)

  1. accepts (по умолчанию: зависит от DataType )
    Тип: объект.
    При выполнении запроса, в заголовках (header) указываются допустимые типы содержимого, ожидаемого от сервера. Значения этих типов будут взяты из параметра accepts. Например, в следующем примере указываются допустимые типы customtype:
  • данные (data), присланные сервером и прошедшие предварительную обработку;
  • строка со статусом выполнения (textStatus);
  • объект jqXHR (в версиях до 1.5 вместо jqXHR используется XMLHttpRequest). С версии jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций.
  • timeout
    Тип: число.
    Время ожидания ответа от сервера в миллисекундах. Переписывает глобальную настройку этого же параметра в $.ajaxSetup(). Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error, которое будет иметь статус «timeout».
    Время отсчитывается с момента вызова функции $.ajax. Может случиться так, что в этот момент будет запущено несколько других запросов и браузер отложит выполнение текущего запроса. В этом случае timeout может завершиться, хотя фактически, запрос даже еще не был запущен.
    В jQuery-1.4 и младше, при завершении времени ожидания, объект XMLHttpRequest перейдет в состояние ошибки и доступ к его полям может вызвать исключение. В Firefox 3.0+ запросы типа script и JSONP не будут прерваны при превышении времени ожидания. Они будут завершены даже после того как это время истечет.
  • traditional
    Тип: логическое значение.
    Установите значение этого параметра в true, для того, чтобы использовать традиционные параметры преобразования (сериализации).
  • type (по умолчанию: ‘GET’ )
    Тип: строка.
    Аналог параметру method . Параметр используется в jQuery младше 1.9.0
  • url (по умолчанию: адрес текущей страницы )
    Тип: строка.
    Определяет адрес, на который будет отправлен запрос.
  • username
    Тип: строка.
    Имя пользователя для аутентификации на сервере, если это требуется.
  • xhr (по умолчанию: ActiveXObject в IE, the XMLHttpRequest в других браузерах )
    Тип: функция.
    Функция, которая предоставит объект XMLHttpRequest. По умолчанию, для браузеров IE этим объектом является ActiveXObject, а в остальных случаях это XMLHttpRequest. С помощью этого параметра вы можете внедрить собственную версию этого объекта.
  • xhrFields
    Тип: объект.
    Параметр появился в jQuery-1.5.1 Набор пар <имя: значене>для изменения/добавления значений соответствующих полей объектаXMLHttpRequest. Например, можно установить его свойство withCredentials в true, при выполнении кроссдоменного запроса:

    jQuery — Использование сокращённых AJAX методов (с примерами)

    В этой статье познакомимся с сокращёнными AJAX методами jQuery: load, get, getJSON, getScript и post. Эти методы позволяют очень просто осуществлять необходимые AJAX запросы и в отличие от функции ajax, для их написания требуется меньшее количество строчек кода.

    jQuery — метод load

    Метод load предназначен для получения данных с сервера по указанному адресу URL и помещения их в один или несколько выбранных элементов.

    Метод load имеет следующий синтаксис:

    В большинстве случаев для отправки запроса метод load использует GET. Но он также может использовать и метод POST. Это происходит только тогда, когда данные для отправки на сервер указываются не в формате строки, а посредством объекта.

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

    1. Вставить содержимое файла asidenav.tpl в блок c после загрузки DOM страницы:

    2. Загрузить часть файла demo.html в элемент при клике по кнопке, расположенной в нём:

    Контент файла demo.html :

    3. Загрузить в элемент, имеющий ответ content.php . Данный ответ будет зависеть от значения атрибута data-content , которое имеет кнопка, пославшая AJAX-запрос на сервер.

    На сервере (файл content.php ):

    4. Рассмотрим вышеприведённый пример, в котором передавать данные будем не в формате строки, а посредством объекта. Кроме этого выведем в консоль браузера дополнительные данные, такие как ответ сервера, статус ответа и объект XMLHTTPRequest.

    На сервере (файл content.php ):

    jQuery — функция get

    Функция get предназначена для загрузки данных с сервера посредством HTTP GET запроса.

    Синтаксис функции get :

    По умолчанию функция get пытается автоматически определить формат полученных с сервера данных (xml, json, script, text или html). Осуществляет она это на основании MIME-типа ответа.

    Например, для того чтобы функция get определила, что формат данных, который она получила с сервера, соответствует JSON, на стороне сервере в скрипте php должен быть установлен соответствующий заголовок:

    В jQuery обработать отложенные события AJAX можно также с помощью Promise методов done (при успешном ответе), fail (при ошибке), always (при успешном ответе или при ошибке).

    Примеры использования функции get

    1. Подгрузим в HTML элемент после загрузки страницы содержимое файла content.tpl :

    2. AJAX получение каждые 5 секунд нового изображения (URL) из определённой директории на сервере и отображения её на странице (вместо предыдущей картинки).

    Содержимое фала random-image.php :

    3. Пример, в котором реализуем AJAX подгрузку контента.

    Данные для загрузки представим на сервере в виде массива $contents . Количество загружаемых данных и позицию смещения будем определять соответственно с помощью значений переменных count и offset . Обработку полученных с сервера данных будем осуществлять посредством Promise метода done .

    Содержимое файла contents.php :

    jQuery — функция getJSON

    Функция getJSON предназначена для загрузки JSON-кодированных данных с сервера посредством HTTP GET запроса.

    Функция getJSON — идентична get , у которой в качестве значения параметра dataType установлено значение «json».

    Синтаксис функции getJSON :

    Пример c использованием функции getJSON

    Пример, в котором после загрузки страницы выведем список страниц. Получать данные с сервера будем с помощью AJAX в формате JSON.

    Содержимое файла pages.json :

    jQuery — функция getScript

    Функция getScript предназначена для загрузки JavaScript файла с сервера посредством HTTP GET запроса и его последующего выполнения.

    Синтаксис функции getScript :

    Пример c использованием функции getScript

    После загрузки страницы получим с помощью AJAX запроса скрипт и выполним его:

    Содержимое скрипта script.js :

    jQuery — функция post

    Функция post предназначена для загрузки данных с сервера посредством HTTP POST запроса.

    Синтаксис функции post :

    Применение post ничем не отличается от использования jQuery-функции get . Единственное отличие между ними — это метод, с помощью которого они отправляют данные на сервер. Функция post отправляет данные в составе тела запроса (метод POST), а get — в составе URL (метод GET).

    Примеры c использованием функции post

    1. Пример, в котором пользователю предложим угадать наш цвет. Для этого ему на выбор предоставим несколько цветов с помощью радиокнопок и кнопку «Угадать». Отправку выбранного цвета на сервер будем осуществлять посредством функции jQuery post . На сервере осуществлять сравнивание «нашего цвета» и цвета, который выбрал пользователь, будем с помощью условия. В зависимости от того равны ли названия цветов, будем возвращать в качестве ответа значение success или error . На клиенте (в браузере) после получения ответа от сервера и в зависимости от его результата, будем выполнять те или иные действия. А именно, при получении ответа success , будем скрывать элементы управления, и выводить сообщение: «Да, вы угадали наш цвет!». В противном случае будем просто выводить текст: «Нет, наш цвет другой!».

    Содержимое файла guess-color.php :

    2. Пример, в котором реализуем систему приветствия пользователя. Пока пользователь не введёт своё имя, будем приветствовать его как гостя. Определять имеет ли текущий пользователь имя, а также его отправку на сервер будем через AJAX (jQuery функцию post ). На стороне сервера сохранять имя пользователя будем посредством ссесий.

    jQuery.ajax()

    jQuery.ajax( url [, settings ] ) Returns: jqXHR

    Description: Perform an asynchronous HTTP (Ajax) request.

    version added: 1.5 jQuery.ajax( url [, settings ] )

    version added: 1.0 jQuery.ajax( [settings ] )

    An object of numeric HTTP codes and functions to be called when the response has the corresponding code. For example, the following will alert when the response status is a 404:

    If the request is successful, the status code functions take the same parameters as the success callback; if it results in an error (including 3xx redirect), they take the same parameters as the error callback.


    In jQuery 1.5, the withCredentials property was not propagated to the native XHR and thus CORS requests requiring it would ignore this flag. For this reason, we recommend using jQuery 1.5.1+ should you require the use of it.

    The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available and are easier to use. If less common options are required, though, $.ajax() can be used more flexibly.

    At its simplest, the $.ajax() function can be called with no arguments:

    Note: Default settings can be set globally by using the $.ajaxSetup() function.

    This example, using no options, loads the contents of the current page, but does nothing with the result. To use the result, you can implement one of the callback functions.

    The jqXHR Object

    The jQuery XMLHttpRequest (jqXHR) object returned by $.ajax() as of jQuery 1.5 is a superset of the browser’s native XMLHttpRequest object. For example, it contains responseText and responseXML properties, as well as a getResponseHeader() method. When the transport mechanism is something other than XMLHttpRequest (for example, a script tag for a JSONP request) the jqXHR object simulates native XHR functionality where possible.

    As of jQuery 1.5.1, the jqXHR object also contains the overrideMimeType() method (it was available in jQuery 1.4.x, as well, but was temporarily removed in jQuery 1.5). The .overrideMimeType() method may be used in the beforeSend() callback function, for example, to modify the response content-type header:

    The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise (see Deferred object for more information). These methods take one or more function arguments that are called when the $.ajax() request terminates. This allows you to assign multiple callbacks on a single request, and even to assign callbacks after the request may have completed. (If the request is already complete, the callback is fired immediately.) Available Promise methods of the jqXHR object include:

      jqXHR.done(function( data, textStatus, jqXHR ) <>);

    An alternative construct to the success callback option, refer to deferred.done() for implementation details.

    jqXHR.fail(function( jqXHR, textStatus, errorThrown ) <>);

    An alternative construct to the error callback option, the .fail() method replaces the deprecated .error() method. Refer to deferred.fail() for implementation details.

    jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) < >); (added in jQuery 1.6)

    An alternative construct to the complete callback option, the .always() method replaces the deprecated .complete() method.

    In response to a successful request, the function’s arguments are the same as those of .done() : data, textStatus, and the jqXHR object. For failed requests the arguments are the same as those of .fail() : the jqXHR object, textStatus, and errorThrown. Refer to deferred.always() for implementation details.

    jqXHR.then(function( data, textStatus, jqXHR ) <>, function( jqXHR, textStatus, errorThrown ) <>);

    Incorporates the functionality of the .done() and .fail() methods, allowing (as of jQuery 1.8) the underlying Promise to be manipulated. Refer to deferred.then() for implementation details.

    Deprecation Notice: The jqXHR.success() , jqXHR.error() , and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done() , jqXHR.fail() , and jqXHR.always() instead.

    The this reference within all callbacks is the object in the context option passed to $.ajax in the settings; if context is not specified, this is a reference to the Ajax settings themselves.

    For backward compatibility with XMLHttpRequest , a jqXHR object will expose the following properties and methods:

    • readyState
    • responseXML and/or responseText when the underlying request responded with xml and/or text, respectively
    • status
    • statusText (may be an empty string in HTTP/2)
    • abort( [ statusText ] )
    • getAllResponseHeaders() as a string
    • getResponseHeader( name )
    • overrideMimeType( mimeType )
    • setRequestHeader( name, value ) which departs from the standard by replacing the old value with the new one rather than concatenating the new value to the old one
    • statusCode( callbacksByStatusCode )

    No onreadystatechange mechanism is provided, however, since done , fail , always , and statusCode cover all conceivable requirements.

    Callback Function Queues

    The beforeSend , error , dataFilter , success and complete options all accept callback functions that are invoked at the appropriate times.

    As of jQuery 1.5, the fail and done , and, as of jQuery 1.6, always callback hooks are first-in, first-out managed queues, allowing for more than one callback for each hook. See Deferred object methods, which are implemented internally for these $.ajax() callback hooks.

    The callback hooks provided by $.ajax() are as follows:

    1. beforeSend callback option is invoked; it receives the jqXHR object and the settings object as parameters.
    2. error callback option is invoked, if the request fails. It receives the jqXHR , a string indicating the error type, and an exception object if applicable. Some built-in errors will provide a string as the exception object: «abort», «timeout», «No Transport».
    3. dataFilter callback option is invoked immediately upon successful receipt of response data. It receives the returned data and the value of dataType , and must return the (possibly altered) data to pass on to success .
    4. success callback option is invoked, if the request succeeds. It receives the returned data, a string containing the success code, and the jqXHR object.
    5. Promise callbacks — .done() , .fail() , .always() , and .then() — are invoked, in the order they are registered.
    6. complete callback option fires, when the request finishes, whether in failure or success. It receives the jqXHR object, as well as a string containing the success or error code.

    Data Types

    Different types of response to $.ajax() call are subjected to different kinds of pre-processing before being passed to the success handler. The type of pre-processing depends by default upon the Content-Type of the response, but can be set explicitly using the dataType option. If the dataType option is provided, the Content-Type header of the response will be disregarded.

    The available data types are text , html , xml , json , jsonp , and script .

    If text or html is specified, no pre-processing occurs. The data is simply passed on to the success handler, and made available through the responseText property of the jqXHR object.

    If xml is specified, the response is parsed using jQuery.parseXML before being passed, as an XMLDocument , to the success handler. The XML document is made available through the responseXML property of the jqXHR object.

    If json is specified, the response is parsed using jQuery.parseJSON before being passed, as an object, to the success handler. The parsed JSON object is made available through the responseJSON property of the jqXHR object.

    If script is specified, $.ajax() will execute the JavaScript that is received from the server before passing it on to the success handler as a string.

    If jsonp is specified, $.ajax() will automatically append a query string parameter of (by default) callback=? to the URL. The jsonp and jsonpCallback properties of the settings passed to $.ajax() can be used to specify, respectively, the name of the query string parameter and the name of the JSONP callback function. The server should return valid JavaScript that passes the JSON response into the callback function. $.ajax() will execute the returned JavaScript, calling the JSONP callback function, before passing the JSON object contained in the response to the $.ajax() success handler.

    For more information on JSONP, see the original post detailing its use.

    Sending Data to the Server

    By default, Ajax requests are sent using the GET HTTP method. If the POST method is required, the method can be specified by setting a value for the type option. This option affects how the contents of the data option are sent to the server. POST data will always be transmitted to the server using UTF-8 charset, per the W3C XMLHTTPRequest standard.

    Advanced Options

    The global option prevents handlers registered using .ajaxSend() , .ajaxError() , and similar methods from firing when this request would trigger them. This can be useful to, for example, suppress a loading indicator that was implemented with .ajaxSend() if the requests are frequent and brief. With cross-domain script and JSONP requests, the global option is automatically set to false . See the descriptions of these methods below for more details.

    If the server performs HTTP authentication before providing a response, the user name and password pair can be sent via the username and password options.

    Ajax requests are time-limited, so errors can be caught and handled to provide a better user experience. Request timeouts are usually either left at their default or set as a global default using $.ajaxSetup() rather than being overridden for specific requests with the timeout option.

    By default, requests are always issued, but the browser may serve results out of its cache. To disallow use of the cached results, set cache to false . To cause the request to report failure if the asset has not been modified since the last request, set ifModified to true .

    The scriptCharset allows the character set to be explicitly specified for requests that use a

    Как работать с JQuery функцией ajax

    Дата публикации: 2020-03-03

    От автора: за предыдущие несколько статей вы должны были довольно хорошо разобраться в AJAX. В этом заключительном уроке мы соберем все вместе с помощью более сложного примера.

    Разметка

    Чтобы понять смысл примера, рассмотрим разметку:

    Разметка тега main:

    JavaScript. Быстрый старт

    Изучите основы JavaScript на практическом примере по созданию веб-приложения

    Обратите внимание на текстовые ссылки. Они соответствуют разным front-end фреймворкам. В следующей части мы увидим, как при клике на эти ссылки будет происходить AJAX запрос. После запроса будет появляться элемент с классом modal, элемент заполняется контентом с сервера. Внешний вид элемента main:

    Разметка модального окна

    Далее необходимо рассмотреть разметку нашего модального окна. HTML разметка:

    Как видно, в модальном окне есть несколько пустых элементов. Они пустые, так как их текст будет меняться в зависимости от того, на какую ссылку нажал пользователь. Ниже показан первоначальный вид модального окна:

    По умолчанию модальное окно скрыто, загрузчик также прячется. Загрузчик будет отображаться только во время выполнения AJAX запроса. CSS код:

    Обратите внимание, что для скрытия модального окна мы используем свойство opacity, так как его можно анимировать. Таким образом мы сможем плавно менять состояния окна (открытое и закрытое состояния).

    Генерация JSON ответа

    В целях нашего примера мы выбрали формат ответа JSON. А конкретно, ожидаемый ответ будет массивом объектов (Demo.json). Каждый объект будет хранить подробности относительно front-end фреймворка. Более того, значение свойства name будет совпадать с текстовой ссылкой тега main (разметка чуть выше). На основе вышесказанного ответ выглядит примерно так:

    Обратите внимание: значения свойств numberOfStars и currentVersion выдуманы просто для демонстрации.
    Как и в предыдущих примерах, мы будем использовать AJAX запрос для доступа к статичному файлу. Если же мы хотим вставлять контент с других сайтов (Google Maps, Flickr), придется почитать документацию API.

    Кроме того наши данные находятся на том же сервере, что и само демо. Поэтому у нас не будет ошибок, связанных с взаимодействием со сторонними сервисами (см. раздел «Ограничения AJAX запросов» в первой статье).

    Отправка AJAX запроса

    В этом разделе мы будем работать с JQuery функцией ajax для инициализации AJAX запроса. Но перед этим создадим переменные, кэшируя самые распространенные JQuery селекторы:

    Рассмотрим код запроса:

    Заметно, что синтаксис ajax функции следующий:

    Параметр settings – объект конфигурации, в котором хранится информация о наших запросах. У данного объекта может быть очень много свойств (около 34 свойств). Для упрощения мы разберем только те, которые задействованы в нашем демо:

    Перед тем как продолжить необходимо упомянуть о трех вещах:

    Есть и другой синтаксис функции ajax: $.ajax(url[, settings])

    Все свойства настроек в параметре settings необязательные

    JavaScript. Быстрый старт

    Изучите основы JavaScript на практическом примере по созданию веб-приложения

    HTTP метод по умолчанию – GET

    Promise методы

    Функция ajax возвращает объект jQuery XMLHttpRequest или jqXHR. Данный объект выполняет интерфейс Promise, а значит, в нем хранятся все свойства, методы и настройки объекта Promise. В нашем примере мы используем три Promise метода:

    Метод done выполняется, если запрос успешен. Метод принимает два и более аргументов, каждый из которых может быть как функцией, так и массивом функций. К примеру, в нашем демо successFunction() передается в качестве аргумента.

    Колбэк функция (например, successFunction()) принимает три аргумента. Первый – возвращаемые данные. Второй – строка статуса запроса (см. возможные значения в предыдущей статье). Последний – объект jqXHR.

    Метод fail вызывается при неудачном выполнении запроса. На вход подается один или более аргументов, каждый из которых может быть как функцией, так и массивом функций. К примеру, в нашем демо errorFunction() передается как аргумент. Колбэк функция (например, errorFunction()) принимает три параметра: jqXHR объект, строка статуса запроса, строка с конечной ошибкой. В ошибку записывается часть HTTP статуса типа Not Found или Forbidden.

    Метод always выполняется после завершения запроса вне зависимости от его успешности (т.е. выполнен метод done или fail). Точно так же он принимает аргументом функцию или массив функций. К примеру, в нашем демо alwaysFunction() передается как аргумент.

    Состояние запроса определяет аргументы функции. В случае успеха (например, alwaysFunction()) колбэк функция получает те же аргументы, что и колбэк метод done. И наоборот если запрос не удался, функция принимает те же аргументы, что и метод fail.

    Обратите внимание: вместо Promise методов done, fail и always, которые мы использовали в нашем примере, можно также использовать колбэк функции success, error и complete. Это можно сменить в параметре settings.

    Как показать данные

    Если запрос прошел успешно, мы можем вернуть данные. Полученные данные мы помещаем в пустые теги модального окна.
    Рассмотрим колбэк фукнцию successFunction:

    AJAX и jQuery. Динамическое обновление контента. Основы (изменения от 03.01.2012)

    В данной статье речь пойдет о том, что же такое AJAX и jQuery и будут рассмотрены примеры, как их использовать.

    jQuery — JavaScript-framework, библиотека, позволяющая более удобно использовать некоторые возможность Javascript, такие как: создание визуальных эффектов, обработка событий, работа с DOM и поддержка AJAX.

    Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/

    В данной статье мы будем рассматривать только одну функцию библиотеки jQuery, а именно функцию $.ajax(). Эта функция позволяет нам как передавать данные на сервер, так и получать ответы от сервера и все это в фоновом режиме, без перезагрузки страницы. Настройка приема или передачи данных зависит от параметров, с которыми вызывается функция $.ajax(). Основные из них будут рассмотрены ниже. Подробнее о параметрах можно прочесть в руководстве по jQuery.

    Перейдем к рассмотрению примеров.

    Важно!
    Для того, чтобы примеры работали корректно, необходимо:
    1. Все файлы должны быть записаны в кодировке UTF-8.
    2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

    Пример 1. Динамическое обновление контента по таймеру

    Создадим простенькую программу, отображающую текущее время, обновляемое раз в секунду по таймеру. Особенностью данной программы будет получение информации о текущем времени из другого внешнего файла.

    Содержимое файла index.html.

    В коде имеются несколько особенностей, поясним их.

    1. Подключение библиотеки jQuery происходит в заголовке HTML файла, для этого записана данная строка.
    Сам файл jquery.js — находится в той же папке, что и файлы примера.

    2. В теле документа создается контейнер, в который мы будем загружать контент.

    3. Странная, на первый взгляд, функция $(document).ready() требуется для корректной работы jQuery, к тому же в ней мы можем выполнить все приготовления к работе программы. В нашем случае мы вызываем функцию show(), в которой прописан механизм получения контента из другого файла, и настраиваем таймер, так, чтобы функция show() вызывалась один раз в секунду.

    4. Функция show() состоит из обращения к функции $.ajax() с определенным рядом параметров, которая позволяет нам в фоновом режиме получить информацию из внешнего файла на сервере.

    Рассмотрим используемые параметры функции $.ajax().

    Обращается к файлу time.php для получения контента.

    Результаты запросов не кэшируются.

    При успешном выполнении запроса, управление переходит функции, которая получает контент в качестве параметра и записывает его контейнер. Запись в контейнер происходит вот в этой строке:

    Содержимое файла time.php.

    Смысл работы файла time.php — выводим текущее время на экран.

    Пример 2. Динамическое обновление контента по выбору пользователя

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

    Содержимое файла index.html.

    В теле документа создана форма, имеющая две кнопки, посредством которых пользователь осуществляет выбор желаемого контента. И контейнер для загрузки контента.

    Загрузка динамического контента в контейнер осуществляется аналогично примеру 1. Разница лишь в том, что грузится различный контент, если происходят разные события.

    Событие нажатия на кнопку «Страница 1» обрабатывается функцией $(‘#btn1’).click(), а событие нажатия на кнопку «Страница 2» обрабатывается функцией $(‘#btn2’).click().

    Содержимое файлов page1.html и page2.html, которые загружаются в область контента динамически, представляет собой простые HTML-страницы или текстовые файлы с контентом.

    Пример 3. Отправка данных на сервер в фоновом режиме и получение контента

    Рассмотрим пример, отправляющий введенное имя пользователя на сервер. Сервер при получении имени выдает приветствие и подсчитывает количество символов в введенном имени.

    Содержимое файла index.html.

    В теле документа создана форма для ввода имени пользователя. И контейнер для загрузки динамического контента.

    Заметим, что сама форма не имеет привычных полей action и method. В качестве обработчика события нажатия на кнопку «Отправить», выступает функция $(‘#myForm’).submit(). Рассмотрим эту функцию.

    Как мы видим, основная работа опять связана с функцией $.ajax(). В этот раз появляются дополнительные параметры, не рассмотренные в примерах 1 и 2. А именно:

    Тип передачи данных.

    Параметры, передаваемые серверу. В данном случае мы передаем содержимое поля username — имя пользователя. В общем случае, параметры записываются также, как в методе GET, одной строкой, например:

    Обратим внимание, что в конце написана строка:
    Это сделано для того, чтобы форма не пыталась передать данные файлу, из которого она запускается и не происходило перезагрузки страницы.

    Содержимое файла greetings.php.

    Выводим на экран приветствие и подсчитываем количество символов в имени.

    В качестве еще одного примера использования AJAX и jQuery можно посмотреть гостевую книгу из статьи
    «Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery».

    Стоит сказать в заключении, что кроме очевидных плюсов создания страниц с использованием динамического обновляющегося контента, есть ряд недостатков, которые следует учитывать при разработке сайта, а именно:

    1. На страницах с динамическим обновлением контента, кнопка «Назад» в браузере не работает корректно.

    2. Страницы с динамическим обновлением контента не меняют URL, в зависимости от своего содержимого, поэтому не могут быть добавлены в закладки.

    3. Страницы с динамическим обновлением контента не индексируются поисковыми системами, т.к. они не выполняют команды JavaScript.

    От приведенных недостатов можно избавиться программным путем. В данной статье такие способы не рассматриваются.

    Цукерберг рекомендует:  7 инструментов для проверки готовности сайта для мобильных приложений
  • Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих