Ajax запрос в jQuery. Часть 2. Методы post и get


Содержание материала:

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-запросы, очень много и все их здесь не разобрать. Тем не менее, если есть предложения, какие еще примеры имеет смысл сюда добавить, пишите в комментариях.

Использование Ajax

В предыдущей статье мы познакомились с прямыми методами jQuery для работы с Ajax (такими как get(), post() и load()). В этой статье описан низкоуровневый программный интерфейс .

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

Простые Ajax-запросы

Создавать запросы с помощью низкоуровневого API не намного сложнее, чем с помощью прямых или вспомогательных методов. Разница состоит в том, что такой подход позволяет контролировать многие другие аспекты запроса и получать о выполняющемся запросе гораздо больше информации. Центральное место в низкоуровневом API занимает метод ajax(), простой пример использования которого приведен ниже (здесь используется исходный файл и файл mydata.json, описанные в предыдущей статье):

Аргументами метода ajax() являются запрашиваемый URL и объект отображения данных, свойства которого определяют набор пар «ключ-значение», каждая из которых определяет некий параметр запроса. Здесь передаваемый методу ajax() объект содержит только один параметр, success, задающий функцию, которая будет вызываться в случае успешного выполнения запроса.

В данном примере мы запрашиваем у сервера файл mydata.json и используем его вместе с шаблоном данных для создания элементов и вставки их в документ, как это делалось в предыдущей статье с помощью прямых методов. По умолчанию метод ajax() создает HTTP-запрос GET, т.е. данный пример эквивалентен использованию методов get() и getJSON().

Объект jqXHR

Метод ajax() возвращает объект jqXHR, который можно использовать для получения подробной информации о запросе и с которым можно взаимодействовать. Объект jqXHR представляет собой оболочку объекта XMLHttpRequest, составляющую фундамент браузерной поддержки Ajax.

При выполнении большинства операций Ajax объект jqXHR можно просто игнорировать, что я и рекомендую делать. Этот объект используется в тех случаях, когда необходимо получить более полную информацию об ответе сервера, чем та, которую удается получить иными способами. Кроме того, его можно использовать для настройки параметров Ajax-запроса, но это проще сделать, используя настройки, доступные для метода ajax(). Свойства и методы объекта jqXHR описаны в таблице ниже:

Свойства и методы объекта jqXHR

Свойство/метод Описание
readyState Возвращает индикатор хода выполнения запроса на протяжении всего его жизненного цикла, принимающий значения от 0 (запрос не отправлен) до 4 (запрос завершен)
status Возвращает код состояния HTTP, отправленный сервером
statusText Возвращает текстовое описание кода состояния
responseXML Возвращает ответ в виде XML (если он является XML-документом)
responseText Возвращает ответ в виде строки
setRequest(имя, значение) Возвращает заголовок запроса (это можно сделать проще с помощью параметра headers)
getAllResponseHeaders() Возвращает в виде строки все заголовки, содержащиеся в ответе
getResponseHeaders(имя) Возвращает значение указанного заголовка ответа
abort() Прерывает запрос

Объект jqXHR встречается в нескольких местах кода. Сначала он используется для сохранения результата, возвращаемого методом ajax(), как показано в примере ниже:

В этом примере мы сохраняем результат, возвращаемый методом ajax(), а затем используем метод setInterval() для вывода информации о запросе каждые 100 мс. Использование результата, возвращаемого методом ajax(), не изменяет того факта, что запрос выполняется асинхронно, поэтому при работе с объектом jqXHR необходимо соблюдать меры предосторожности. Для проверки состояния запроса мы используем свойство readyState (завершению запроса соответствует значение 4) и выводим ответ сервера на консоль.

Для данного сценария консольный вывод выглядит так (в вашем браузере он может выглядеть несколько иначе):

Я использую объект jqXHR лишь в редких случаях и не делаю этого вообще, если он представляет собой результат, возвращаемый методом ajax(). Библиотека jQuery автоматически запускает Ajax-запрос при вызове метода ajax(), и поэтому я не считаю возможность настройки параметров запроса сколько-нибудь полезной. Если я хочу работать с объектом jqXHR (как правило, для получения дополнительной информации об ответе сервера), то обычно делаю это через параметры обработчика событий, о которых мы поговорим далее. Они предоставляют мне информацию о состоянии запроса, что избавляет от необходимости выяснять его.

Задание URL-адреса запроса

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

Создание POST-запроса

Для задания требуемого типа запроса, который необходимо выполнить, используется параметр type. По умолчанию выполняются GET-запросы, как в предыдущем примере. Пример использования метода ajax() для создания POST-запроса и отправки данных формы на сервер приведен ниже:

Здесь я не буду подробно описывать этот пример, т.к. мы его рассмотрели подробно в предыдущей статье (только с использованием метода post()). Отмечу только, что здесь дополнительно к type мы использовали еще несколько параметров. Для указания цели POST-запроса используется описанный ранее параметр url. Пересылаемые данные указываются с помощью параметра data, значение которого устанавливается с помощью метода serialize(), описанного в предыдущей статье. Тип данных, получаемых от сервера указывается в параметре dataType.

Работа с событиями Ajax

Несколько параметров позволяют указывать функции для обработки событий, которые могут запускаться на протяжении жизненного цикла Ajax-запроса. Именно таким способом вы будете указывать функции обратного вызова, играющие столь важную роль в Ajax-запросах. С одной из них вы уже познакомились при рассмотрении параметра success в предыдущем примере. Список параметров, связанных с событиями, вместе с их краткими описаниями приведен в таблице ниже:

Параметры событий Ajax

Параметр Описание
beforeSend Задает функцию, которая будет вызываться перед запуском Ajax-запроса
complete Задает функцию, которая будет вызываться при успешном или неудачном завершении Ajax-запроса
error Задает функцию, которая будет вызываться при неудачном завершении запроса
success Задает функцию, которая будет вызываться при успешном выполнении запроса

Обработка успешных запросов

В примерах выше, при использовании параметра success, в вызове функции были опущены два аргумента — сообщение, описывающее результат запроса, и объект jqXHR. Пример использования функции, которая принимает эти аргументы, приведен ниже:

Аргумент status — это строка, описывающая исход запроса. Функция обратного вызова, которую мы задаем, используя параметр success, выполняется лишь для успешных запросов, и поэтому значением данного аргумента обычно является success. Исключением является случай, когда вы используете параметр ifModified, описанный далее.

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

Последний аргумент — это объект jqXHR. Вы не должны выяснять состояние запроса, прежде чем начать работу с этим объектом, поскольку знаете, что функция выполняется лишь тогда, когда запрос завершается успешно. В этом примере объект jqXHR используется для получения информации о состоянии запроса и заголовках, которые сервер включил в ответ, а также для вывода этой информации на консоль.

В данном случае результат имеет следующий вид (в зависимости от того, какой сервер вы используете, у вас может быть другой набор заголовков):

Обработка ошибок

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

Здесь запрашивается отсутствующий на сервере файл NoSuchFile.json, и поэтому запрос заведомо не сможет быть выполнен, в результате чего будет вызвана функция, заданная с помощью параметра error. Аргументами этой функции являются объект jqXHR, а также сообщение о состоянии ошибки и сообщение об ошибке, полученное в ответе сервера. Внутри этой функции в документ добавляется элемент div, отображающий значения аргументов status и errorMsg, как показано на рисунке:

Настройка параметров запросов перед их отправкой

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

Аргументами указанной функции являются объект jqXHR (который может пригодиться для настройки заголовков запроса или отмены запроса, прежде чем он будет отправлен) и объект, содержащий параметры, переданные методу ajax(). В данном примере URL-адрес для Ajax-запроса задается с помощью параметра beforeSend.

Задание нескольких обработчиков событий

В предыдущих примерах мы реагировали на наступление событий, связанных с Ajax-запросами, вызовом одной функции, но в параметрах success, error, complete и beforeSend можно задавать массив функций, каждая из которых будет выполняться при запуске соответствующего события. Простой пример этого приведен ниже:

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

Настройка контекста для событий

Параметр context позволяет указать элемент, который будет назначен переменной this, когда будет вызван обработчик события. Это может быть использовано для обращения к целевым элементам в документе без необходимости их выбора в функции-обработчике. Соответствующий пример приведен ниже:

Здесь параметр context устанавливается на объект jQuery, содержащий элементы h1 документа. В функции, определяемой параметром complete, мы выделяем рамкой выбранные элементы (в данном случае — элемент, поскольку в документе есть только один элемент h1) путем вызова метода css() для объекта jQuery (на который ссылаемся через this). Цвет рамки определяется на основании состояния запроса.

С помощью параметра context можно установить в качестве контекста любой объект, и ответственность за выполнение только допустимых для этого объекта операций лежит на вас. Например, если вы задаете в качестве контекста элемент HTMLElement, то до того, как вызывать для него какие-либо методы jQuery, вы должны передать этот объект функции $().

Настройка базовых параметров Ajax-запросов

Существует группа параметров, с помощью которых можно выполнить базовую настройку Ajax-запроса (некоторые из них, url и type, мы рассмотрели выше). Из всех доступных параметров они представляют наименьший интерес, и их имена в основном говорят сами за себя. Параметры, о которых идет речь, приведены в таблице ниже:

Топ-пост этого месяца:  Древовидная структура для вывода многоуровневого меню

Базовые конфигурационные параметры Ajax-запроса

Параметр Описание
accepts Устанавливает для запроса значение заголовка Accept, который указывает MIME-типы, поддерживаемые браузером. По умолчанию это значение определяется параметром dataType
cache Значение false указывает на то, что содержимое запроса не должно кэшироваться сервером. По умолчанию кешируются все типы данных, кроме script и jsonp
contentType Устанавливает для запроса значение заголовка content-туре
dataType Указывает, какие типы данных ожидаются от сервера. Если используется этот параметр, то jQuery будет игнорировать информацию, предоставляемую сервером о типе запроса
headers Задает дополнительные заголовки и значения, которые должны включаться в запрос
jsonp Задает строку, которую следует использовать вместо функции обратного вызова при выполнении запросов JSONP (кроссдоменные запросы). Этот параметр требует согласования с сервером
jsonpCallback Задает имя функции обратного вызова, которое должно использоваться вместо автоматически сгенерированного случайного имени, используемого jQuery по умолчанию
password Задает пароль, который должен использоваться в запросе при прохождении процедуры аутентификации
scriptCharset Указывает jQuery, какой набор символов используется при кодировании запрашиваемого JavaScript-содержимого
timeout Задает длительность тайм-аута (в миллисекундах) для запроса
userName Задает имя пользователя, которое должно использоваться в запросе при прохождении процедуры аутентификации

Задание тайм-аутов и заголовков

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

В этом примере параметр timeout устанавливает максимальную длительность тайм-аута, равную 5 сек. Если запрос за это время не будет выполнен, то вызовется функция, заданная с помощью параметра error, и будет выведен код ошибки, определяемый параметром status.

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

Дополнительно в этом примере ниже используется параметр headers, с помощью которого в запрос добавляется заголовок. Для указания заголовков используется объект отображения данных. Используемый здесь заголовок может быть полезным для создания веб-приложений, поддерживающих архитектурный стиль REST, если только сервер правильно его распознает.

Использование дополнительных конфигурационных параметров

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

Создание синхронных запросов

Управление режимом выполнения запросов осуществляется с помощью параметра async. Значение true, используемое для этого параметра по умолчанию, означает, что запрос будет выполняться в асинхронном режиме, тогда как значению false соответствует синхронный режим.

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

Игнорирование данных, оставшихся неизменными

С помощью параметра ifModified можно обеспечить получение данных лишь в том случае, если с момента последнего запроса они были изменены. Такое поведение определяется заголовком Last-Modified. Благодаря этому удается избежать бесполезной пересылки данных, которая не даст пользователю никакой новой информации по сравнению с той, которой он уже располагает. По умолчанию параметр ifModified имеет значение false, указывающее jQuery на необходимость игнорирования заголовка Last-Modified и предоставления данных в любом случае.

Пример использования этого параметра приведен ниже:

В этом примере значение параметра ifModified устанавливается равным true. Функция success вызывается всегда, но если с того момента, когда содержимое запрашивалось в последний раз, оно не изменилось, то аргумент data будет иметь значение undefined, а аргумент status — значение notmodified.

В данном случае выполняемые действия определяются значением аргумента status. Если значением этого аргумента является success, то аргумент data используется для добавления элементов в документ. Если же аргумент status имеет значение notmodified, то мы используем метод css() для выделения рамкой элементов, которые уже имеются в документе.

В ответ на событие click, связанное с кнопкой, вызывается метод ajax(). Это дает возможность многократно повторять один и тот же запрос, чтобы продемонстрировать влияние параметра ifModified, как показано на рисунке:

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

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

Обработка кода ответа

Параметр statusCode позволяет выбирать варианты дальнейших действий в зависимости от кода ответов на HTTP-запросы. Его можно использовать либо вместо параметров success и error, либо в дополнение к ним. Пример самостоятельного использования параметра statusCode приведен ниже:

Здесь параметр statusCode задан в виде объекта, устанавливающего связь между кодами ответов на HTTP-запросы и соответствующими им функциями, которые должны быть выполнены на сервере. Какие именно аргументы передаются функциям, зависит от того, отражает ли код ответа успешное выполнение запроса или ошибку.

Если код (например, 200) соответствует успешному запросу, то аргументы совпадают с теми, которые передавались бы функции, определяемой параметром success. В противном случае (например, при коде ответа 404, означающем, что запрашиваемый файл не найден) аргументы совпадают с теми, которые передавались бы функции, определяемой параметром error.

Как видите, это средство не дает непосредственной информации о кодах ответа. Я часто пользуюсь им в процессе отладки взаимодействия браузера с сервером, обычно для того, чтобы выяснить, почему jQuery ведет себя не так, как мне хотелось бы. При этом я использую параметр statusCode в дополнение к параметрам success и error и вывожу информацию на консоль. Если эти параметры используются совместно, то сначала будут выполнены функции success и error, а затем уже — функции, определяемые параметром statusCode.

Предварительная очистка ответных данных

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

Это средство мне очень помогает при работе с серверами Microsoft ASP.NET, присоединяющими лишние данные к данным JSON. Удаление таких данных с помощью параметра dataFilter требует лишь минимальных усилий. Пример использования параметра dataFilter приведен ниже:

Функции передаются данные, полученные с сервера, и значение параметра dataType. Если параметр dataType не используется, то второму аргументу присваивается значение undefined. Ваша задача заключается в том, чтобы вернуть отфильтрованные данные. В этом примере предмет нашего внимания — данные в формате JSON:

Для повышения иллюстративности примера в нем выполняются некоторые дополнительные операции. Во-первых, данные JSON преобразуются в массив JavaScript с помощью метода jQuery parseJSON. Затем из массива удаляется первый элемент с помощью метода shift(), а порядок следования остальных его элементов обращается с помощью метода reverse().

Все, что требуется от функции, — вернуть строку, и поэтому мы вызываем метод JSON.stringify(), зная, что jQuery преобразует данные в объект JavaScript, прежде чем вызвать функцию success. В данном примере была продемонстрирована возможность удаления элемента из массива, однако, в зависимости от ситуации, мы могли бы выполнить любой другой вид обработки.

Конечный результат представлен на рисунке:

Управление преобразованием данных

Рассмотрение одной из самых любимых своих настроек я приберег напоследок. Должно быть, вы обратили внимание, что при получении определенных типов данных jQuery автоматически выполняет некоторые удобные преобразования. Например, получая данные JSON, jQuery предоставляет функцию success, использующую объект JavaScript, а не исходную необработанную строку JSON.

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

В этом примере регистрируется функция для типа данных text html. Обратите внимание на пробел между компонентами указываемого MIME-типа (в отличие от формы записи text/html). Функция принимает данные, полученные от сервера, и возвращает преобразованные данные. В этом случае преобразование данных заключается в передаче HTML-фрагмента, содержащегося в файле flowers.html, функции $() и возврате результата. Отсюда следует, что к объекту, передаваемому в качестве аргумента data функции success, применимы обычные методы jQuery.

Работая с преобразователями данных, можно слишком увлечься. Я всегда стараюсь избегать соблазна делать с помощью этих функций больше, чем следует. Например, иногда меня так и тянет применить к данным JSON шаблон и передать обратно полученные в результате HTML-элементы. И хотя этот прием очень удобен, он сослужит плохую службу, если кто-то другой будет пытаться расширить ваш код или, например, вам самому впоследствии потребуется организовать интенсивную обработку данных для получения их в исходной форме.

Настройка и фильтрация Ajax-запросов

После того как вы познакомились с методом ajax() и доступными для работы с ним параметрами, мы можем рассмотреть несколько дополнительных методов, предоставляемых jQuery для упрощения настройки запросов.

Определение параметров, используемых по умолчанию

Метод ajaxSetup() позволяет установить значения параметров, которые будут применяться по умолчанию во всех Ajax-запросах, тем самым освобождая вас от необходимости настраивать параметры при каждом запросе. Пример использования этого метода приведен ниже:

Метод ajaxSetup() вызывается с помощью функции jQuery $ аналогично тому, как это делалось в случае вызова метода ajax(). Аргументом метода ajaxSetup() является объект, содержащий значения параметров, которые вы хотите использовать по умолчанию для всех Ajax-запросов. В этом примере мы устанавливаем значения по умолчанию для параметров timeout, global, error и converters.

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


Фильтрация запросов

Метод ajaxSetup() определяет базовые значения конфигурационных параметров, применимые ко всем запросам Ajax. Возможности динамической настройки параметров для отдельных Ajax-запросов обеспечиваются методом ajaxPrefilter(). Пример использования этого метода приведен ниже:

Указанная вами функция будет выполняться для каждого нового Ajax-запроса. Аргументами, передаваемыми функции, являются параметры запроса (включая любые значения по умолчанию, установленные вами с помощью метода ajaxSetup()), а также исходные параметры, переданные методу ajax() (исключая любые значения по умолчанию) и объекту jqXHR запроса.

Мы вносим изменения в объект, передаваемый в качестве первого аргумента, как показано в примере. В данном сценарии, если среди параметров, передаваемых методу ajax(), присутствует параметр dataType, то длительность тайм-аута устанавливается равной двум секундам. Чтобы предотвратить отправку всех остальных запросов, для объекта jqXHR вызывается метод abort().

Примеры отправки AJAX JQuery

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

Полное описание функции AJAX на jquery.com.

GET запрос

Запрос идет на index.php с параметром « text » и значением « Текст » через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст

В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.

Код можно сократить используя функцию $.get

Код файла index.php

GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false .

POST запросы

Или сокращенная версия – функция $.post

Код файла index.php

POST запросы ни когда не кэшироваться.

Отправка формы через AJAX

При отправке формы применяется функция serialize() , подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – .

jQuery — AJAX Методы get() и post()

jQuery методы get() и post() используются, чтобы запросить данные с сервера посредством запроса HTTP GET или POST.

HTTP Запрос: GET по сравнению с POST

Два обычно используемых метода для запроса-ответа между клиентом и сервером: GET и POST.

  • GET — Запрашивает данные с указанного ресурса
  • POST — Отправляет данные для обработки на указанный ресурс

GET в основном используется для того, чтобы только получить (извлечь) некоторые данные с сервера.
Отметьте: Метод GET может возвратить кэшированные данные.

POST также может использоваться, чтобы получить некоторые данные с сервера. Однако, метод POST НИКОГДА не кэширует данные, и часто используются, чтобы отправить данные наряду с запросом.

jQuery Метод $.get()

Метод $.get() запрашивает данные с сервера посредством HTTP-запроса GET.

Необходимый параметр URL определяет адрес URL, который Вы хотите запросить.

Дополнительный параметр обратного вызова — имя функции, которая сработает, если запрос успешно выполняется.

Следующий пример использует метод $.get(), чтобы получить данные из файла на сервере:

Пример

Первым параметром $.get() является URL, который мы хотим запросить («demo_test.php»).

Второй параметр — функция обратного вызова. Первый параметр функции обратного вызова содержит контент страницы, которая запрашивается, а второй параметр функции обратного вызова содержит состояние запроса.

Подсказка: Вот как примерно выглядит файл PHP («demo_test.php»):

jQuery Метод $.post()

Метод $.post() запрашивает данные с сервера, используя запрос HTTP POST.

Необходимый параметр URL определяет URL, который Вы хотите запросить.

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

Дополнительный параметр обратного вызова — имя функции, которая будет выполнена, если запрос завершается успешно.

Следующий пример использует метод $.post(), чтобы отправить какие-либо данные наряду с запросом:

Пример

Первый параметр $.post() — это URL, который мы хотим запросить («demo_test_post.php»).

Затем мы передаем некоторые данные вместе с запросом (имя и город).

Сценарий PHP в «demo_test_post.php» читает параметры, обрабатывает их и возвращает результат.

Третий параметр — функция обратного вызова. Первый параметр функции обратного вызова содержит контент страницы, которую запрашивают, а второй параметр функции обратного вызова содержит состояние запроса.

AJAX — как сделать запрос к PHP-коду без перезагрузки страницы

Эта тема имеет больше общего с JavaScript, но ввиду того, как часто у новичков возникают вопросы вроде «Как выполнить функцию PHP из JavaScript-кода?» или «Как отправить форму без перезагрузки?», она напросилась в этом разделе сама самой.

Итак, AJAX — это Asynchronous Javascript And XML — асинхронный JavaScript и XML, если по-русски. Разберём каждое слово:

1) Асинхронный — это и есть то самое, чего все так хотят — выполнение действий без перезагрузки страницы. Пока JavaScript отправил запрос на сервер, пользователь продолжает выполнять действия на странице, т.к. никаких переходов при отправке запроса не происходит.

2) JavaScript — язык программирования, который используют инструменты для отправки AJAX-запросов. Т.к. статья для новичков, то подразумевается, что вы используете либо только чистый JavaScript, либо в совокупности с jQuery. Если вы не используете jQuery, то для создания такого запроса требуется создание объекта XMLHttpRequest. В jQuery всё немного проще и лаконичнее — вы пользуетесь методами $.post и $.get для отправки соответствующих запросов. Когда нужно использовать post, а когда get — чуть позже.

3) XML — в контексте этой статьи это не так важно, считайте это отсылкой к тому самому объекту XMLHttpRequest, ведь сначала появился именно этот способ.

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

О методах GET и POST.

Обычно, любой запрос сопровождается некоторыми параметрами. В GET-запросах такие параметры передаются в URL, например: http://site.com/index.php?param1=value1&param2=value2 . Это накладывает два ограничения:
1) Объём отправляемых данных существенно ограничен — объём классического GET-запроса находится в диапазоне от 2 до 8 килобайт по умолчанию.
2) Данные открыты — не желательно передавать чувствительные данные, например — пароли. Из-за этого, POST-запросы встречаются намного чаще.

У POST-запроса, в отличие от GET, есть тело, которое помещается после заголовка (а GET-запрос имеет только его). Данные тела явно не передаются (относительно — трафик можно прослушать, но это уже вопрос применения шифрования и защищенного канала). Объём информации, который можно передать в теле, опять же, зависит от настроек сервера. По умолчанию, этот объём порядка 20 мегабайт. И, разумеется, можно передавать GET-параметры через URL. В общем случае, POST-запросы являются более гибкими.

Теперь рассмотрим отправку этих двух видов запросов с помощью обозначенных выше методов — с помощью объекта XMLHttpRequest и методов jQuery — $.post и $.get.

В качестве примера используем следующий «скрипт»:

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

В 10-той строке мы вызываем метод, в который передаём три параметра:
1) «GET» — тип запроса
2) «hello.php?name=Webkill» — URL запроса: файл hello.php и один параметр name.
3) true — асинхронность. Если false — то браузер будет ожидать ответа (синхронность).

На 11-ой строке происходит отправка запроса, при этом мы указываем один параметр — null (позже, через этот параметр будут передаваться данные тела POST-запроса).

Javascript

Собственно, отправка GET-запроса в jQuery заключается в вызове метода $.get с тремя параметрами:
1) «hello.php» — часть URL без GET-параметров
2) — параметры запроса в виде ассоциативного массива (JSON)
3) Функция-обработчик, которая вызывается в случае «успеха»

Допустим, нужно сделать аутентификацию без перезагрузки страницы. GET-запрос не подходит, т.к. передаётся пароль.

Javascript

Легко заметить, что в целом код не изменился. Поменялся только первый параметр функции open — тип запроса, и теперь мы передаём данные в метод send в формате JSON.

Javascript

Снова, изменений немного: только название метода говорит о том, что в этот раз мы шлём POST-запрос. В случае GET-запроса параметры, которые мы передаём в JSON, закодируются в URL, а в случае POST — попадут в тело запроса. Если вы хотите использовать GET-параметры в POST-запросе, то необходимо их писать в URL вручную.

Естественно, круг задач, для которых используется AJAX намного шире — загрузка файлов, игры и т.д. Целью этой статьи является ознакомление с этим комплексом технологий. Стоит отметить, что в случае jQuery можно обрабатывать намного больше вариантов ответа сервера с помощью функций done, fail и always. Также, функции-обработчики кроме собственно ответа принимают и другие параметры.

jQuery — AJAX get() and post() Methods

Методы jQuery Get () и POST () используются для запроса данных с сервера с запросом HTTP GET или POST.

HTTP-запрос: Get против POST

Двумя часто используемыми методами для запроса-ответа между клиентом и сервером являются: Get и POST.

  • GET — Запрашивает данные из указанного ресурса
  • POST — Отправка данных для обработки в указанный ресурс

Get в основном используется только для получения (извлечения) некоторых данных с сервера. Примечание: Метод get может возвращать кэшированные данные.

Post также можно использовать для получения некоторых данных с сервера. Однако метод POST никогда не кэширует данные и часто используется для отправки данных вместе с запросом.

Чтобы узнать больше о Get и POST, а также различия между этими двумя методами, пожалуйста, прочитайте наши методы HTTP Get VS должность глава.

Метод jQuery $. Get ()

Метод $. Get () запрашивает данные с сервера с помощью запроса HTTP GET.

Обязательный параметр URL-адреса указывает URL-адрес, который требуется запросить.

Необязательный параметр обратного вызова — это имя функции, которая должна быть выполнена, если запрос выполнен успешно.

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

Пример

Первым параметром $. Get () является URL-адрес, который мы хотим запросить («демо_тест. php»).

Вторым параметром является функция обратного вызова. Первый параметр callback содержит содержимое запрашиваемой страницы, а второй параметр обратного вызова — состояние запроса.

Совет: Вот как выглядит файл ASP («демо_тест.php»):

Метод jQuery $. POST ()

Метод $. POST () запрашивает данные с сервера с помощью запроса HTTP POST.

Обязательный параметр URL-адреса указывает URL-адрес, который требуется запросить.

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

Необязательный параметр обратного вызова — это имя функции, которая должна быть выполнена, если запрос выполнен успешно.

В следующем примере используется метод $. POST () для отправки некоторых данных вместе с запросом:

Пример

Первый параметр $. POST ()-это URL, который мы хотим запросить («демо_тест_пост. php»).

Затем мы передаем некоторые данные для отправки вместе с просьбой (название и город).

Сценарий ASP в «демо_тест_пост. php» считывает параметры, обрабатывает их и возвращает результат.

Третий параметр является функцией обратного вызова. Первый параметр callback содержит содержимое запрашиваемой страницы, а второй параметр обратного вызова — состояние запроса.

Совет: Вот как выглядит файл ASP («демо_тест_пост.php»):

Справочник jQuery AJAX

Для полного обзора всех JQuery Ajax методы, пожалуйста, перейдите к нашей jQuery AJAX справка.

JQuery 1.5 отправляет только запросы GET в ajax-методе

Я пытаюсь сделать запрос PUT веб-службе RESTful, однако, похоже, что jQuery 1.5 отвечает на любые изменения в настройке типа. Запрос отправляется как GET независимо от значения в ‘type’. В jQuery 1.4 это не проблема.

Насколько мне известно, вы не можете сделать запрос JSONP через PUT. Поскольку JSONP работает, введя элемент

Если вы абсолютно должны сделать запрос PUT в удаленном домене, вам нужно либо использовать прокси-сервер на стороне вашего локального домена, либо просмотреть CORS, если вам не нужна поддержка IE.

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

Возможно, с некоторой дополнительной информацией о браузере мы можем выяснить, что вызывает проблему, но на данный момент кажется, что jQuery не хочет гарантировать функциональность, кроме GET и POST. Удивительно, что я обнаружил =)

edit: oups, вы не сказали, что веб-служба была в Rails. Но это тоже может поддержать. Вы пытались просто отправить запрос POST?

Я боролся с чем-то подобным. Я смог отправить PUT успешно до 1.5, но перестал работать с 1.5. Я знаю, что было большое изменение в том, как материал ajax обрабатывается в 1.5, поэтому я рассмотрю следующее. Когда он работал, он работал отлично для меня в сафари, firefox и chrome. Когда это сработает, вы сначала получите отправку OPTIONS и, как указано, до того, как ваша серверная сторона будет удовлетворительно отвечать на запрос OPTIONS a la CORS. Вот пример тестового кода, который работает для меня до 1.5, так что это возможно. В стороне я не смог заставить firefox кэшировать клиентскую часть ответа OPTIONS. Другие браузеры сделали.

jQuery — Ajax запрос методом GET

Синтаксис

Описание

Функция jQuery.get() осуществляет запрос к серверу методом GET без перезагрузки страницы.

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

Использование сокращенных методов Ajax

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

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

Понимание асинхронных задач (вкратце)


Если вы новичок в Ajax, разрешите мне дать немного пояснений по асинхронным запросам. Это важно, потому что они являются неотъемлемой частью Ajax, и первая буква в этом акрониме обозначает асинхронный. Большинство времени вы используете для написания синхронного кода. Вы определяете блок выражений для исполнения некоторой задачи, а потом ждете, пока браузер их выполнит. Когда выполнено последнее выражение, вы знаете, что задача решена. Во время выполнения браузер никоим образом не разрешает пользователю взаимодействовать с контентом.

Когда же вы выполняете асинхронную задачу, вы говорите браузеру, что вы хотите, чтобы что-то было сделано на заднем фоне. «На заднем фоне» звучит немного размыто, на самом деле вы говорите: «Сделай эту вещь, не прерывая пользователя от взаимодействия с документом, и скажи мне, когда ты это сделаешь». В случае с Ajax вы говорите браузеру, чтобы он связался с сервером и сказал вам, когда запрос будет выполнен. Это взаимодействие осуществляется через функции обратного вызова. Вы даете jQuery одну или более функций, которые будут вызваны, когда задача будет выполнена. Это будет функция для работы с удачным запросом, также могут быть другие функции для других результатов, например ошибок.

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

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

Выполнения Ajax запроса GET

Для начала мы собирается использовать Ajax, чтобы выполнить HTTP GET запрос для загрузки фрагмента HTML, который мы можем добавить к нашему документу. В листинге 14-1 представлен пример документа, с которым мы будем работать.

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

Он похож на примеры, которые вы видели раньше, но здесь нет элементов для описания продукции и нет данных или шаблонов для их генерирования. Вместо этого я создал отдельный файл с именем flowers.html , который я разместил рядом с примером документа (он называется example.html в исходном коде для этой книги). В листинге 14-2 показано содержание flowers.html .

Листинг 14-2: Файл flowers.html

Это те же самые элементы, которые мы использовали в предыдущих главах, за исключением того, что они не разбиты по рядам, и я удалил атрибут class из элементов div . Я сделал эти изменения только потому, что я могу показать вам, как работать с элементами, как только вы их подгрузите. Для этого нет никакой технической причины. Обратите внимание, что это не полный HTML документ, только лишь фрагмент.

Теперь вы можете использовать поддержку jQuery для Ajax, чтобы внести фрагмент HTML в основной HTML документ. Это действие может показаться немного странным, но сейчас мы симулируем общую ситуацию, когда различные куски контекста создаются различными системами, и их нужно объединить, чтобы создать сложный документ или веб приложение. В этом примере для простоты я использую только один сервер, но ведь можно себе представить, что информация о продукции приходит откуда-то еще. На самом деле, в следующих разделах я введу Node.js , чтобы показать вам, как работать с несколькими серверами. Это все впереди. На данный момент, давайте рассмотрим базовую jQuery поддержку для Ajax и будем использовать ее для работы с файлом flowers.html . В листинге 14-3 показано, как мы можем это сделать.

Листинг 14-3: Использование jQuery поддержки для Ajax с фрагментом HTML

Вы используете метод get и добавляете два аргумента. Первый аргумент – это URL, который вы хотите загрузить. В данном случае я указал flowers.html , который будет считаться относительным URL к тому URL, с которого был загружен основной документ.

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

Когда вы загружаете документ, содержащий этот скрипт, файл flowers.html подгружается с сервера, и HTML фрагмент, который он содержит, разбивается на элементы, и потом они добавляются в документ. На рисунке 14-1 показан результат.

Рисунок 14-1: Результат использования Ajax

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

Хотя я использовал метод get , чтобы загрузить HTML, он может быть использован, чтобы получить с сервера любой вид данных.

Обработка ответных данных

Аргументом, переданным функции (если запрос прошел удачно), являются данные, которые сервер отправил обратно в ответ на наш запрос. В этом примере вы получаете содержание файла flowers.html , который является HTML фрагментом.

Чтобы сделать это чем-то, что я могу использовать с jQuery, я передал данные в jQuery $ функцию. Таким образом они будут разбиты и сгенерированы в иерархии HTMLElement объектов, как показано в листинге 14-4.

Листинг 14-4: Обработка данных, полученных с сервера

Как я упоминал ранее, я опустил атрибуты class элементов div . Вы видите, что я добавил их обратно, используя стандартный jQuery метод addClass . Как только данные отправлены $ функции, вы можете использовать возвращенный объект jQuery , как и любой другой. Я продолжаю добавлять элементы в документ, используя методы slice и appendTo , как я делал в предыдущих главах.

Обратите внимание, что я использовал метод filter , чтобы выбрать только элементы div , сгенерированные из данных. При парсинге данных jQuery считает, что символы возврата каретки, которые я добавил для структуры между элементами div в файле flowers.html , является текстовым содержанием и создает для него текстовый элемент. Чтобы избежать этого, вам либо стоит убедиться, что в требуемом документе нет символов возврата каретки, либо использовать метод filter , чтобы удалить их.

Делаем результат более очевидным

Выражения, которые запускают Ajax запрос, выполняются в ответ на событие ready (о котором я рассказывал в главе 9). И поэтому сложно визуально представить, чем использование Ajax отличается от использования встроенных данных. Чтобы более наглядно это представить, я добавил в документ элемент button , и запрос Ajax будет выполнен только тогда, когда будет нажат этот элемент button (кнопка). Изменения вы можете увидеть в листинге 14-5.

Листинг 14-5: Выполнение Ajax запроса в ответ на нажатие кнопки

Теперь документ flowers.html не загружается, пока не нажата кнопка; и каждый раз, когда на нее нажимают, в документ добавляются новые элементы, как показано на рисунке 14-2. Обратите внимание, что я вызвал метод preventDefault для объекта Event , который передается в мою функцию обработки событий. Поскольку элемент button содержится в элементе form , действием по умолчанию является отправка формы на сервер.

Рисунок 14-2: Использование Ajax в ответ на нажатие кнопки

Получение других видов данных

Вы не ограничены использованием метода get только для HTML. Вы можете получать любые виды данных с сервера. Особенно нам интересен JSON из-за способа, которым jQuery успешно обрабатывает для вас данные. В те времена, когда Ajax начал широко применяться, XML был настолько популярным форматом данных, что X в Ajax обозначает XML. Я не собираюсь детально рассматривать XML, он излишне подробный, его тяжело читать, и он требует относительно много времени и ресурсов для генерирования и обработки.

В последнее время XML был в значительной степени заменен JavaScript Object Notation (JSON), который является простым форматом данных и исключительно прост в работе с кодом JavaScript (как и видно по его имени). Для этого примера я создал файл mydata.json и сохранил его на веб сервере вместе с файлом example.html . В листинге 14-6 показано содержание mydata.json .

Листинг 14-6: Содержание mydata.json

Файл содержит данные для продукции цветочного магазина, и как вы видите, данные JSON идентичны тому способу, которым вы представляли данные внутри JavaScript кода. Это одна из причин, почему JSON заменил в веб приложениях XML. Чтобы подгрузить и обработать эти данные с использованием Ajax, вы можете использовать метод get , как показано в листинге 14-7.

Листинг 14-7: Использование метода get для получения данных JSON

В этом примере я запрашиваю файл с данными JSON в ответ на нажатие элемента button . Данные, полученные с сервера, добавляются в функцию, так же как и с фрагментом HTML. Я использовал плагин шаблона данных (описанный в главе 12), чтобы обработать данные и сгенерировать из них HTML элементы, а затем использовал методы slice и appendTo , чтобы вставить элементы в документ. Обратите внимание, что мне не нужно было ничего делать, чтобы конвертировать строку JSON в объект JavaScript. jQuery сделал это для меня автоматически.

Некоторые веб серверы (включая Microsoft IIS 7.5, который я использовал для данной книги) не вернут содержание браузеру, если они не узнают расширение файла или формат данных. Чтобы этот пример работал с IIS, я должен был создать новое соответствие между расширением файла ( .json ) и типом MIME для данных JSON ( application/json ). Пока я этого не сделал, IIS возвращал ошибки 404 – Not Found (не найдено), когда запрашивался mydata.json .

Предоставление данных по запросу GET

Данные можно пересылать на сервер как часть ваших запросов GET , которые являются видами запросов, сделанных методами get , load , getScript и getJSON . Этого можно добиться, если добавить объект данных сокращенному методу, который вы используете. В листинге 14-8 представлен пример.

Листинг 14-8: Отправка данных как часть запроса GET

Данные, которые вы предоставляете, прилагаются к указанному URL как строка параметров. Для этого примера это обозначает, что ваш запрос будет таким:

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

GET и POST: как выбрать правильный

Если пытаться отправлять данные формы, используя запрос GET , будьте осторожны. Правило большого пальца гласит, что запросы GET могут быть использованы только для получения информация «только для чтения» (read-only), тогда как запросы POST должны быть использованы для любых действий, которые меняют статус приложения.

В стандартных условиях запросы GET предназначаются для безопасного взаимодействия (без каких-либо побочных эффектов, кроме получения информации), а запросы POST предназначаются для небезопасного взаимодействия (принятие решения или изменение чего-либо). Эти соглашения были установлены World Wide Web Consortium (W3C), на www.w3.org/Provider/Style/URI.

Таким образом, запросы GET можно использовать для отправки данных формы на сервер, но не для операций, которые меняют статус. Многие веб разработчики убедились в этом на собственном горьком опыте в 2005 году, когда вышел публичный релиз Google Web Accelerator. Это приложение переходит по всем ссылкам, представленным на странице, и это законно для HTTP, потому что запросы GET должны быть безопасными. К сожалению, многие разработчики игнорировали HTTP соглашения и размещали простые ссылки в своих приложениях для «удалить товар» или «добавить в корзину». Начался хаос.

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

Выполнение Ajax запроса POST

Теперь, когда мы знаем, как получать данные с сервера, мы обратим внимание на то, как их отправлять, иными словами, как оправлять данные формы на сервер. Еще раз, существует сокращенный метод post , который делает отправку очень простой. Прежде чем мы обратимся к этому методу, нам нужно настроить наш сервер, что означает, еще раз вернуться к Node.js и понять, как работать в рамках функций безопасности, которые браузер применяет к Ajax запросам POST .

Подготовка Node.js для получения данных из формы

Для этой части главы нам нужен серверный скрипт, который будет получать данные, отправленные из браузера при помощи HTTP метода POST , совершать с отправленными данными некоторые простые действия и генерировать ответ. В листинге 14-9 показан скрипт Node.js для этого раздела.

Листинг 14-9: Скрипт Node.js для отправки данных

Я сохранил этот скрипт в файле formserver.js . Самый просто способ получить этот скрипт – это скачать исходный код, сопровождающий эту книгу, который можно получить бесплатно на Apress.com. Я запускаю этот скрипт, когда ввожу в командной строке следующее:

Этот скрипт обрабатывает данные, отправленные браузером, и создает JSON ответ. Я мог бы вернуть этим скриптом HTML, но JSON более компактный и с ним зачастую легче работать. Объект JSON, который я возвращаю, очень простой: объект, который содержит общее число единиц продукции, которые выбрал пользователь, и число каждой из них, для которой было указано значение. Например, если я выберу одну астру, два нарцисса и три розы, ответ JSON, отравленный обратно скриптом Node.js будет следующим:

Предыдущий JSON, который я показал вам, представлял массив объектов, но этот серверный скрипт возвращает единственный объект, чьи свойства соответствуют выбранным цветам. Свойство total содержит сумму отдельных выборок. Я понимаю, что это едва ли не самые ценные возможности, которые может выполнять сервер, но я хочу уделять наше внимание использованию Ajax, а не разработке серверной части.

Понимание кросс-доменных Ajax запросов

Если вы посмотрите на скрипт Node.js , вы увидите, что когда я пишу ответ на сервер, указывая HTTP заголовок вот так:

По умолчанию браузеры ограничивают скрипты выполнением Ajax запросов внутри одного и того же абсолютного интернет адреса (origin), где находится и документ, который их содержит. Абсолютный интернет адрес – это комбинация протокола, доменного имени и порта в URL. Если два URL имеют одинаковый протокол, доменное имя и порт, тогда они находятся внутри одного абсолютного интернет адреса. Если же один из трех компонентов иной, они находятся по разным абсолютным интернет адресам.

Эта политика направлена на снижение рисков ХSS (сross-site scripting, межсайтовый скриптинг) атак, когда браузер (или пользователь) обманом вовлечен в выполнение вредоносного скрипта. ХSS атаки выходят за рамки данной книги, но есть хорошая статья в Википедии на http://en.wikipedia.org/wiki/Cross-site_scripting, которая дает подробную информацию по этому вопросу.

В таблице 14-2 представлено сравнение некоторых URL с URL главного документа примера, то есть www.jacquisflowershop.com/jquery/example.html .

Таблица 14-2: Сравнение URL

Javascript
URL Сравнение абсолютного интернет адреса
http://www.jacquisflowershop.com/apps/mydoc.html Тот же адрес
https://www.jacquisflowershop.com/apps/mydoc.html Другой адрес; различаются протоколы
http://www.jacquisflowershop.com:81/apps/mydoc.html Другой адрес; различаются порты
http://node.jacquisflowershop.com/order Другой адрес; различаются полные имена доменов

В моей конфигурации у меня есть два сервера. www.jacquisflowershop.com работает со статическим содержанием, а node.jacquisflowershop.com работает с Node.js . Как видно из таблицы, документ с первого сервера имеет другой абсолютный интернет адрес, нежели со второго. Запрос с одного абсолютного интернет адреса на второй известен как кросс-доменный запрос.

Проблема этой политики заключается в том, что она несет в себе полный запрет: кросс-доменных запросов нет. Это привело к использованию некоторых очень некрасивых уловок, чтобы обмануть браузер в создании запросов, которые противоречат политике. К счастью, сейчас есть законные средства обеспечения кросс-доменных запросов, определенных в спецификации CORS (Cross-Origin Resource Sharing). Я хочу кратко описать CORS. Для полной информации по CORS вам стоит обратиться к www.w3.org/TR/cors.

Спецификация CORS довольно молода. Она поддерживается текущим поколением браузеров, а старые браузеры просто будут игнорировать кросс-доменные запросы. Более признанным и упрочившимся подходом является использование JSONP, о чем я расскажу в разделе «Работа с JSONP».

Способ, которым работает CORS, заключается в том, что браузер устанавливает связь с другим сервером (для нас это сервер Node.js ) и включает в запрос заголовок Origin . Значением этого заголовка является абсолютный интернет адрес того документа, который привел к тому, чтобы был сделан запрос.

Если сервер распознает абсолютный интернет адрес и хочет разрешить браузеру сделать кросс-доменный запрос, тогда он добавляет заголовок Access-Control-Allow-Origin , устанавливая значение, подходящее заголовку Origin из запроса. Если ответ не содержит этот заголовок, тогда браузер отвергает ответ.

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

В скрипте Node.js я вручную устанавливаю заголовок Access-Control-Allow-Origin для моего доверенного абсолютного интернет адреса www.jacquisflowershop.com , но вы просто можете использовать значение заголовка Origin в запросе, чтобы следовать более сложному процессу принятия решений. Также к заголовку Access-Control-Allow-Origin можно поставить звездочку ( * ), что обозначает, что кросс-доменные запросы будут разрешены с любого абсолютного интернет адреса. Это отлично работает в целях тестирования, но вы должны хорошенько подумать о последствиях для безопасности, прежде чем использовать такие настройки для публикации.

Использование метода post для отправки данных из формы

Теперь, когда мы настроили сервер и поняли, что такое CORS, мы можем использовать метод post , чтобы отправлять данные формы на сервер, как показано в листинге 14-10.

Листинг 14-10: Отправка данных методом post

Этот пример кажется более сложным, нежели он есть на самом деле. Я начал с использования метода getJSON , чтобы получить файл mydata.json , который содержит информацию о цветочной продукции, а затем использовал шаблон данных, чтобы сгенерировать элементы и добавить их в документ. Как видно по рисунку 14-3, это дает нам отправную точку, которую мы знаем и любим.

Рисунок 14-3: Начальная точка для отправки данных на сервер

Вы видите, что я добавил некоторые значения в элементы input : 12 астр, 20 нарциссов и 4 примулы. Я использую метод click , чтобы зарегистрировать функцию, которая будет вызвана, когда пользователь нажмет на элемент button , вот так:

Первая вещь, которую я делаю, это вызываю метод serialize для элемента form . Это очень полезный метод, который проходит по всем элементам form и создает URL-кодированную строку, которую вы можете отправить на сервер.

Обратите внимание, что я вызываю метод preventDefault для объекта Event , который передается моей функции обработки событий для события click . Мне нужно сделать это, чтобы не дать браузеру отправить форму обычным путем, то есть отправить данные и загрузить ответ как новый документ.

Для значений, которые я ввел, метод serialize создает строку, наподобие этой:

Я использую метод serialize , потому что метод post отправляет данные в URL-кодированном формате (хотя это можно изменить, если использовать глобальный метод обработки событий ajaxSetup , который я опишу в главе 15). Поскольку у меня есть данные из элементов input , я вызываю метод post , чтобы инициировать запрос Ajax.

Аргументами метода post являются URL, на который я хочу отправить данные (он должен быть не тем же, что URL, указанный атрибутом action элемента form ), данные, которые я хочу отправить, и функция, которая должна быть вызвана, если запрос прошел удачно. В этом примере я забираю ответ с сервера и передаю его функции processServerResponse , которая определена следующим образом:

Я прячу все элементы div ячеек в верстке CSS (которые являются членами класса dcell ), а затем отображаю те, которые соответствуют свойствам в объекте JSON с сервера. Я также использую шаблон данных, чтобы сгенерировать элемент для отображения общего числа выбранной продукции. Это те действия, которые вы могли совершить на стороне клиента, но суть заключается в том, что вы получили данные через Ajax запрос POST . Результат можно увидеть на рисунке 14-4.

Рисунок 14-4: Результат обработки данных, возвращенных Ajax запросом POST

Теперь вы видите, как просто отправлять данные из формы на сервер (и, естественно, как просто обрабатывать ответ, особенно если это JSON).

Если вы не получили ответ, показанный на рисунке, тогда, скорее всего, причина заключается в том, что ваш заголовок CORS не был установлен для корректного домена в скрипте Node.js .

Отправка других данных при помощи метода post

Хотя метод post обычно используется для отправки данных из формы, на самом деле, можно отправлять любые данные, которые вы хотите. Вам просто нужно создать объект, который содержит ваши данные, вызвать метод serialize для надлежащего форматирования данных и затем передать их методу post . Это может быть полезным техническим приемом, если вы собираете данные от пользователей, не используя форму, или если вы хотите избирательно выбирать элементы form , которые вы включаете в POST запрос. В листинге 14-11 показано, как можно использовать метод post таким образом.

Листинг 14-11: Использование метода post для отправки данных не из формы на сервер

В этом скрипте я создаю объект и явно определяю свойства. Я передаю объект методу post и использую метод alert , чтобы отобразить ответ сервера. (На самом деле сервер не волнует, какой вид данных он получает от браузера, он просто попытается сложить значения и сгенерировать сумму). Окно диалога изображено на рисунке 14-5.

Рисунок 14-5: Ответ сервера для некоторых данных не из формы

Ответ сервера в формате JSON автоматически трансформируется jQuery в объект JavaScript. Я использовал метод JSON.stringify (который поддерживается большинством браузеров) и вернул его в виде строки, таким образом, я смог отобразить его в окне диалога.

Указание ожидаемого типа данных

Когда вы используете методы get и post , jQuery должен выяснить, какой вид данных отправит сервер в ответ на ваш запрос. Это может быть что угодно, начиная от HTML и заканчивая JavaScript. Чтобы сделать это, jQuery полагается на информацию, которую сервер предоставляет в своем ответе, в частности, это заголовок Content-Type . В большинстве случаев это очень хорошо работает, но иногда jQuery нужно немножко помочь. Обычно это встречается потому, что сервер в ответе указывает неправильный тип MIME для данных.

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

В листинге 14-12 показано, как можно указать ожидаемый тип данных для метода get .

Листинг 14-12: Указание ожидаемого типа данных

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

Это то же содержание, которые я поместил в файл mydata.json , и это, конечно же то, что вы надеялись увидеть. Проблема с указанием типа данных заключается в том, что вам обязательно нужно быть правыми. Если данные находятся в другом формате, это может вызвать определенные проблемы, как показано в листинге 14-13.

Листинг 14-13: Указание неправильного типа данных

В этом примере я запросил файл, который содержит HTML, но сказал jQuery, что тот должен обращаться с ним, как с JSON. Проблема заключается в том, что при работе с JSON, jQuery автоматически создает из данных JavaScript объект, чего он не может сделать с HTML. Ajax запрос заканчивается следующей ошибкой:

Я покажу вам, как определять ошибки Ajax в следующей главе.

В чем разница между XMLHttpRequest, jQuery.ajax, jQuery.пост, на jQuery.получить

Как я могу узнать, какой метод лучше всего подходит для ситуации? Кто-нибудь может привести несколько примеров, чтобы понять разницу с точки зрения функциональности и производительности?

6 ответов

XMLHttpRequest в необработанном объекте браузера, который jQuery обертывает в более удобную и упрощенную форму и согласованную функциональность кросс-браузера.

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

jQuery.get и jQuery.post С другой стороны, может выдавать только запросы GET и POST. Если ты не знаешь . что это такое, вы должны проверить HTTP-протокол и узнать немного. Внутренне эти две функции используют jQuery.ajax но они используют определенные настройки, которые вам не нужно устанавливать, таким образом упрощая GET или POST запрос по сравнению с использованием jQuery.ajax . GET и POST являются наиболее используемыми http-методами (по сравнению с DELETE, PUT, HEAD или даже другими редко используемыми экзотиками).

все функции jQuery использовать XMLHttpRequest объект в фоновом режиме, но обеспечить дополнительная функциональность, которую вам не нужно делать самостоятельно.

использование

поэтому, если вы используете jQuery, я настоятельно рекомендую вам использовать функциональность jQuery только. Забудьте о XMLHttpRequest в целом. Используйте подходящие варианты функции запроса jQuery и во всех других случаях используйте $.ajax() . Так что не забывайте, что есть и другие общие функции, связанные с jQuery Ajax to $.get() , $.post() и $.ajax() . Ну вы можете просто использовать $.ajax() для всех ваш запрос, но вам придется написать немного больше кода, потому что для его вызова требуется немного больше опций.

аналогия

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

каждый из них использует XMLHttpRequest. Это то, что браузер использует, чтобы сделать запрос. jQuery-это просто библиотека JavaScript и $.ajax метод используется для создания XMLHttpRequest.

$.пост и $.get это просто сокращенные версии $.ajax . Они делают почти то же самое, но делают это быстрее, чтобы написать запрос AJAX — $.post делает запрос HTTP POST и $.get делает запрос HTTP GET.

jQuery.get — Это оболочка для jQuery.ajax , который является оболочкой для XMLHttpRequest.

XMLHttpRequest и Fetch API (экспериментальный в это время) являются единственными в DOM, поэтому должны быть самыми быстрыми.

Я видел много информации, которая больше не является точной, поэтому я сделал тестовую страницу, где любой может протестировать версию из версии, которая лучше всего в любое время:

из моих тестов сегодня показывает, что только jQuery не является чистым или даже быстрым решением, результаты для меня в mobile или desktop показывают, что jQuery, по крайней мере, на 80% медленнее, чем XHR2, если вы используете слишком много ajax, в mobile потребуется много времени, чтобы загрузить простой сайт.

само использование также находится в ссылке.

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

с помощью jQuery.ajax и XMLHttpRequest-это загрузки страниц, похожие на post и get, за исключением того, что страница не изменяется. Любая информация, возвращаемая сервером, может быть использована javascript локально использоваться любым способом, включая изменение макета страницы. Они обычно используются для асинхронной работы, пока пользователь может перемещаться по странице. Хорошим примером этого могут быть возможности автозаполнения путем динамической загрузки из базы данных значений для завершения текстового поля. Фундаментальное различие между jQuery.ajax и XMLHttpRequest — это jQuery.ajax использует XMLHttpRequest для достижения того же эффекта, но с более простым интерфейсом. Если вы используете jQuery, я бы рекомендовал вы должны придерживаться jQuery.Аякс.

старый пост. но все же хочу ответить, одно отличие, с которым я столкнулся при работе с Веб-Работников(javascript)

веб-работники не могут иметь доступа на уровне пользовательского интерфейса. Это означает, что вы не можете получить доступ к DOM элементы кода JavaScript, которые вы собираетесь запускать с помощью веб-работников.Такие объекты, как window, document и parent, недоступны в коде web-worker.

Как известно jQuery библиотека привязана к HTML DOM и позволяет ей нарушить правило» нет доступа DOM». Это может быть немного больно, потому что такие методы, как С помощью jQuery.ajax, jQuery.пост, на jQuery.get не может использоваться в веб-рабочих. К счастью, вы можете использовать XMLHttpRequest объект для выполнения запросов Ajax.

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

Я сомневаюсь, что есть большая разница в производительности между 3.

Топ-пост этого месяца:  Гугл Календарь — удобный инструмент для планирования дел
Добавить комментарий