Содержание
- jQuery.ajax( url [, settings ] ) Возвращает: jqXHR
- Основы AJAX
- Пример 1. Выполнение синхронного AJAX запроса
- Пример 2. Обработка синхронного AJAX запроса на сервере с помощью PHP
- Пример 3. Передача синхронного AJAX запроса на сервер с помощью метода POST
- settings:
- accepts
- async
- beforeSend(jqXHR jqXHR , объект settings)
- cache
- complete( jqXHR jqXHR, строка textStatus)
- contents
- contentType
- context
- converters
- crossDomain
- dataFilter( строка data, строка type)
- dataType
- error( jqXHR jqXHR, строка textStatus, строка errorThrown)
- global
- headers
- ifModified
- isLocal
- jsonp
- jsonpCallback
- mimeType
- password
- username
- processData
- scriptCharset
- statusCode
- success( объект data, строка textStatus, объект jqXHR)
- timeout
- traditional
- xhrFields
- Рекомендуем к прочтению
Содержание:
jQuery.ajax( url [, settings ] ) Возвращает: jqXHR
Описание: Выполняет асинхронный HTTP (Ajax) запрос.
Добавлен в версии: 1.5 jQuery.ajax( url [, settings ] )
Добавлен в версии: 1.0 jQuery.ajax( [settings ] )
Объект с числовыми кодами HTTP кодов статусов и функции которые будут вызваны когда статус ответа имеет соотвествующее значение. Например, следующий alert будет вызван когда статус ответа будет 404:
Если запрос успешен, то соотвествующая функция будет принимать те же самые параметры что и success обработчик; если результат ошибка (включая редиректы 3xx), то эти функции примут те же параметры что и обработчик error .
(добавлен в версии: 1.5)
В jQuery 1.5, свойство withCredentials не будет распространено на нативный объект XHR и таким образом CORS запросы требуя его будет игнорировать этот флаг. По этой причине, мы рекомендуем использовать jQuery 1.5.1+.
(добавлен в версии: 1.5.1)
Функция $.ajax() лежит в основе всех Ajax запросов отправляемых при помощи jQuery. Зачастую нет необходимости вызывать эту функцию, так как есть несколько альтернатив более высого уровня, такие как $.get() и .load() , которые более простые в использовании. Если требуется менее распространенные варианты , через, $.ajax() Вы можете более гибко скофигурировать запрос.
В простейшем виде, функция $.ajax() может быть вызвана без аргументов:
Важно: настройки по умолчанию могут быть установлены при помощи функции $.ajaxSetup() .
Этот пример, не используюя никаких параметров, загружает содержимое текущей страницы, но ничего не делает с результатом. Для использования результата, Вы можете реализовать одну из функция обратного вызова.
Объект jqXHR
Объект jQuery XMLHttpRequest (jqXHR) возвращается функцией $.ajax() начиная с jQuery 1.5 является надстройкой над нативным объектом XMLHttpRequest. Например, он содержит свойства responseText и responseXML , а также метод getResponseHeader() . Когда траспортом используемым для запрос является что то иное, а не XMLHttpRequest (например, тэг script tag для JSONP запроса) объект jqXHR эмулирует функционал нативного XHR там где это возможно.
Начиная с jQuery 1.5.1, объект jqXHR также содержит метод overrideMimeType() (он был доступен в jQuery 1.4.x, но был временно удален в версии jQuery 1.5). Метод .overrideMimeType() может быть использован в обработчике beforeSend() , например, для изменения поля заголовка content-type :
Объект jqXHR возвращаемый методом $.ajax() в версии jQuery 1.5 реализует интерфейс Promise, дающий ему все свойства, методы и поведение Promise. Эти методы принимают один или несколько аргументов, которые вызываются при завершении запроса инициированного при помощи $.ajax() . Это позволяет назначать несколько обработчиков на один запрос и даже назначать обработчики после того как запрос может быть завершен. (Если запрос уже выполнен, то обработчики вызовутся немедленно). Доступные методы Promise в объекте jqXHR:
- jqXHR.done(function( data, textStatus, jqXHR ) <>);
Альтернатива создания обработчика success , подробнее смотрите на deferred.done() .
jqXHR.fail(function( jqXHR, textStatus, errorThrown ) <>);
Альтернатива создания обработчика error , метод .fail() заменяет устаревший метод .error() . Смотрите подробнее deferred.fail() .
jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) < >); (добавлен в версии jQuery 1.6)
Альтернатива создания обработчика complete , метод .always() заменяет устаревший метод .complete() .
В ответ на успешный запрос, аргументы функции те же самые что и у .done() : data, textStatus и объект jqXHR. Для ошибочных зпросов аргументы те же самые что и у .fail() : объект jqXHR, textStatus и errorThrown. Смотрите подробнее deferred.always() .
jqXHR.then(function( data, textStatus, jqXHR ) <>, function( jqXHR, textStatus, errorThrown ) <>);
Включает в себя функциональность методов .done() и .fail() , что упрощает (начиная с jQuery 1.8) проще управлять объектом Promise. Смотрите подробнее deferred.then() .
Внимание: обработчики jqXHR.success() , jqXHR.error() и jqXHR.complete() будут удалены в jQuery 3.0. Вы можете использовать jqXHR.done() , jqXHR.fail() и jqXHR.always() соответственно.
Ссылка this внутри всех обработчиков указывает на объект заданный в параметре context переданные в аргумент settings метода $.ajax ; если context не указан, то this указывает на объект settings.
Для обеспечения обратной совместимости с кодом XMLHttpRequest , в объекте jqXHR предоставляет следующие свойства и методы:
- readyState
- status
- statusText
- responseXML и/или responseText когда запрос вернул xml и/или text, соответственно
- setRequestHeader(name, value) те заголовки что отходят от стандарта, заменят старое значение на новое, а не конкатенируют старое и новые значения
- getAllResponseHeaders()
- getResponseHeader()
- statusCode()
- abort()
Механизма onreadystatechange не предусмотрено, так как done , fail , always и statusCode охватывает все возможные требования.
Очередность функций обратного вызова
Все параметры beforeSend , error , dataFilter , success и complete принимают в качестве значений функции обратного вызова, которые вызываются в соотвествующие моменты времени.
С версии jQuery 1.5 функции fail и done , и, начиная с jQuery 1.6, always вызовутся в первую очередь, первыми из упрвляемой очереди, что позволяет более чем один обработчик для каждого элемента очереди. Смотрите отложенные методы, которые реализуют внутренности обработчиков метода $.ajax() .
Функции обратного вызова предоставленные методом $.ajax() следующие:
- beforeSend вызывается всегда; принимает jqXHR объект и объект settings как параметры.
- error вызывается, если запрос выполняется с ошибкой. Принимает объект jqXHR , строку со статусом ошибки и объект исключения если применимо. Некоторые встроенные ошибки обеспечивают строку качестве объекта исключения: "abort", "timeout", "No Transport".
- dataFilter вызывается немедленно при успешном получении данных ответа. Принимает в качестве параметров возвращенные данные и знчение параметра dataType и должен вернуть (возможно измененные данные) для передачи далее в обработчик success .
- success вызывается если запрос выполнен успешно. Принимает данные ответа, строку содержащую код успеха и объект jqXHR .
- Promise обработчик — .done() , .fail() , .always() и .then() — выполняются, в том порядке в котором зарегистрированы.
- complete вызывается когда запрос закончен, независимо от успеха или неудачи выполнения запроса. Принимает объект jqXHR , отформатированную строку со статусом успеха или ошибки.
Типы данных
Различные типы ответа на вызов $.ajax() подвергаются различным видам предварительной обработки перед передачей обработчика success . Тип предварительной подготовки зависит от указанного в ответе поля заголовка Content-Type , но может быть явно указан при помощи опции dataType . Если параметр dataType задан, то поле заголовка Content-Type будет проигнорирован.
Возможны следующие типы данных: text , html , xml , json , jsonp и script .
Если указан text или html , никакой предварительной обработки не происходит. Данные просто передаются в обработчик success и доступны через свойство responseText объекта jqXHR .
Если указан xml , то ответ парсится при помощи jQuery.parseXML перед передачей в XMLDocument в обработчик success . XML документ доступен через свойство responseXML объекта jqXHR .
Если указан json , то ответ парсится при помощи jQuery.parseJSON перед передачей в объект для обработчика success . Полученный JSON объект доступен через свойство responseJSON объекта jqXHR .
Если указан script , то $.ajax() выполнит JavaScript код который будет принят от сервере перед передачей этого кода как строки в обработчик success .
Если указан jsonp , $.ajax() автоматически добавит в строку URL запроса параметр (по умолчанию) callback=? . Параметры jsonp и jsonpCallback из объекта settings переданных в метод $.ajax() могут быть использованы для указания имени URL-параметра и имени JSONP функции обратного вызова соответственно. Сервер должен вернуть корректный Javascript который будет переда в обработчик JSONP. $.ajax() выполнит возвращенный JavaScript код, вызвыв функцию JSONP по ее имени, перед передачей JSON объекта в обработчик success .
Отправка данных на сервер
По умолчанию, Ajax запросы отправляются при помощи GET HTTP метода. Если POST метод требуется, то метод следует указать в настройках при помощи параметра type . Этот параметр влияет на то как данные из параметра data будут отправлены на сервер. Данные POST запроса всегда будут переданы на сервере в UTF-8 кодировкепо стандарту W3C XMLHTTPRequest.
Параметр data может содержать строку произвольной формы, например сериализованная форма key1=value1&key2=value2 или Javascript объект . Если используется последний вариант, то данные будут преобразованы в строку при помощи метода jQuery.param() перед их отправкой. Эта обработка может быть отключена при помощи указания значения false в параметре processData . Обработка может быть нежелательной, если Вы хотите отправить на сервере XML документ, в этом случае измените параметр contentType с application/x-www-form-urlencoded на более подходящий MIME тип.
Расширенные настройки
Параметр global предотвращает выполнение обработчиков зарегистрированных при помощи методов .ajaxSend() , .ajaxError() и подобных методов. Это может быть полезно, например, для скрытия индикатора загрузки реализованного при помощи .ajaxSend() если запросы выполняются часто и быстро. С кросс-доменными и JSONP запросами, параметр global автоматически устанавливается в значение false .
Если сервер выполняет HTTP аутентификацию перед предоствлением ответа, то имя пользователя и пароль должны быть отправлены при помощи параметров username и password options.
Ajax запросы ограничены по времени, так что ошибки могут быть перехвачены и обработаны, чтобы обеспечить наилучшее взаимодействие с пользователем. Таймауты запроса обычно либо установлены по умолчанию, либо установлены глобально при помощи $.ajaxSetup() вместо того чтобы указывать параметр timeout для каждого отдельного запроса.
По умолчанию, запросы всегда совершаются, но браузер может предоставить ответ из своего кэша. Для запрета на использования кэшированных результатов установите значение параметра cache в false . Для того чтобы вызвать запрос с отчетом об изменении ресурса со времени последнего запроса установите значение параметра ifModified в true .
Параметр scriptCharset разрешает кодировку которая будет явно использована в запросах использующих тэг

Урок, в котором на простых примерах разберем, как работать с технологией AJAX, а именно познакомимся с тем как с помощью объекта XMLHttpRequest (сокращённо XHR) создавать синхронные HTTP-запросы к серверу и получать от него ответы.
Основы AJAX
Знакомство с технологией AJAX начнём с рассмотрения примера (для начинающих), который будет запрашивать информацию с сервера посредством синхронного запроса.
Синхронный запрос в отличие от асинхронного, после его отправки и до получения ответа, замораживает веб-страницу, т.е. делает её недоступной для пользователя. Синхронные запросы на сайтах используются довольно редко, но изучать технологию AJAX начинающим лучше именно с них.
Перед тем как перейти к созданию примера, рассмотрим основные этапы, сопровождающие разработку фрагмента страницы, работающей в соответствии с технологией AJAX. При этом все действия в основном осуществляются в коде JavaScript после наступления какого-либо события на странице (пользователь нажал кнопку и т.п.) и состоят из следующих этапов:
- Получение некоторой информации (данных) со страницы или формы (при необходимости)
- Отправление запрос на веб-сервер
- Получение ответа с веб-сервера
- Отображение результатов на странице, если ответ был успешен.
Основы создания синхронных AJAX запросов 
Пример 1. Выполнение синхронного AJAX запроса
Рассмотрим пример выполнения синхронного AJAX запроса к серверу с помощью метода XMLHttpRequest. В данном примере запросим данные, находящиеся в файле data.txt на сервере и отобразим их на странице в элементе span .
Пример будет состоять из файлов index.html , script.js и data.txt , которые для простоты можно расположить на сервере в одном каталоге.
Начнём разработку с создания HTML-страницы, к которой подключим файл script.js . Этот файл, а точнее его содержимое будет выполнять всю основную работу. Но перед тем как перейти к его разработке, создадим на станице элементы div и span . Элемент div будет играть роль кнопки, при нажатии на которую будет выполняться AJAX запрос. А элемент span будет играть роль контейнера, который будет содержать ответ, пришедший с сервера.
Кроме этого добавим на страницу ещё стили CSS, чтобы немного её оформить. В итоге у нас должен получиться следующий HTML код:
После этого откроем файл data.txt и введём в него текст "Привет, мир!". Сохраним и закроем файл.
И наконец, перейдём к созданию файла script.js . Содержимое этого файла будет выполнять все основные действия, т.е. отправлять ajax запрос на сервер, принимать от сервера ответ и обновлять содержимое страницы (помещать ответ в элемент span ).
Рассмотрим создание данного файла поэтапно:
Получим элемент на событие click которого необходимо подписаться.
Подпишемся на событие click элемента с помощью метода addEventListener .
Создадим переменную request , которая будет содержать экземпляр объекта XMLHttpRequest .
Настроим HTTP-запрос к серверу с помощью метода open. Данный метод имеет 3 основных параметра. 1 параметр отвечает за метод, с помощью которого мы отправляем данные на сервер. Различают два основных метода: GET и POST. Метод GET передаёт данные в составе URL после знака ? (для отделения данных используется амперсанд & ).
Метод GET 
Метод POST передаёт данные в теле HTTP-запроса.
Метод POST 
2 параметр отвечает за адрес (URL), по которому посылается запрос. А 3 параметр определяет тип запроса: синхронный ( false ) или асинхронный ( true ).
Отправляем ajax запрос на сервер.
После отправки синхронного запроса на сервер, наша страница замораживается (т.е. не отвечает на запросы пользователя) и ждёт ответа от сервера. Как только ответ приходит, он становится доступным в виде следующих свойств объекта XMLHttpRequest :
status (статус запроса). Если значение свойства равно 200, то запрос выполнен успешно. Если в status хранится другое число, значит, запрос завершился с ошибкой (например, 404, 500 и т.д.)
responseText – содержит текст ответа, который пришёл от сервера. Т.е. данное свойство всегда содержит то, что нам нужно, если статус ответа был 200.
Посмотреть на этот объект можно, например, в консоли, для этого после отправки ajax запроса на сервер достаточно поместить в код следующую строчку:
Просмотр объекта XMLHttpRequest в консоли браузера 
Получаем результат и отображаем его на странице.
Пример 2. Обработка синхронного AJAX запроса на сервере с помощью PHP
Пример, который будет по технологии AJAX передавать серверу запрос, содержащий параметр и отображать ответ на странице.
В данном примере страница будет состоять из 3 кнопок. Первая кнопка будет иметь текст 1, вторая кнопка текст 2 и третья кнопка текст 3. При нажатии на любую из кнопок будет выполняться синхронный запрос на сервер. В качестве метода передачи запроса будем использовать GET. А адрес, по которому будем посылать запрос и параметры ajax.php . Получать данные отправленные клиентом на сервере будем с помощью GET-переменной HTTP ($_GET). После этого полученные данные будем обрабатывать на сервере, и возвращать клиенту ответ (строку).
Пример 3. Передача синхронного AJAX запроса на сервер с помощью метода POST
В этом примере данные на сервер будем передавать с помощью метода POST (в теле HTTP-запроса). В методе POST данные (параметры) передаются не в составе URL (метод GET), а в теле, которое мы посылаем серверу через send() . Т.е. для того чтобы передать данные с помощью POST, мы их должны поместить в качестве параметра методу send() . Кроме того, при отправке данных с помощью POST необходимо также указать заголовок Content-Type, содержащий кодировку с помощью которой мы зашифровали данные. Это необходимо сделать для того чтобы сервер знал как обработать (расшифровать), пришедшие к нему данные (запрос).
Выполняет асинхронный HTTP (Ajax) запрос
version added: 1.5 jQuery.ajax( url [, settings] )
url
Тип: Строка
URL адрес, на который будет отправлен Ajax запрос
settings
Тип: Объект
Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из $.ajaxSetup(). Ниже приведен полный список всех настроек.
version added: 1.0 jQuery.ajax( settings )
settings
Тип: Объект
Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из $.ajaxSetup().
settings:
| объект |
| логический |
| функция |
| логический |
| функция или массив |
| объект |
| строка |
| объект |
| объект |
| логический |
| объект или строка |
| функция |
| строка |
| функция или массив |
| логический |
| объект |
| логический |
| логический |
| строка |
| строка или функция |
| строка |
| строка |
| строка |
| логический |
| строка |
| объект |
| функция или массив |
| число |
| логический |
| строка |
| строка |
| function |






