Функции ajax. JavaScript - Асинхронные AJAX запросы на примерах. Динамическая подгрузка данных с сервера

Синтаксис и описание:

Возвращаемое значение: Экземпляр объекта XHR (XMLHttpRequest).

Параметры:

options – (объект) Объект в виде набора свойств (пар ключ:"значение"), которые задают параметры для Ajax запроса. Возможных параметров (свойств объекта options) очень много, и обычно в большинстве случаев они используются далеко не все, а только некоторые из них. К тому же, все эти параметры являются необязательными, т.к. значение любого из них может быть установлено по умолчанию с помощью метода $.ajaxSetup() .

Для настройки Ajax-запроса доступны следующие свойства объекта options:

• async – (boolean - логическое значение) По умолчанию имеет значение true, и тогда все запросы выполняются асинхронно (На то он и Ajax, чтобы операции выполнялись параллельно). Если установить зхначение false, что крайне нежелательно, то запрос будет выполняеться как синхронный (Другие действия браузера могут блокироваться на время, пока выполняется синхронный запрос. Да и вообще браузер может перестать реагировать и отвечать).

  beforeSend(XHR ) – (функция) Функция, вызываемая перед отправкой запроса. Она используетсядля установки дополнительных (пользовательских) заголовков или для выполнения других предварительных операций. В качестве единственного аргумента ей передается экземпляр объекта XHR (XMLHttpRequest). Если функция возвращает ложное значение (false), то происходит отмена запроса.

  cache – (boolean - логическое значение) Если имеет значение false, то запрашиваемые страницы не кэшируются браузером. (Браузер может выдавать результаты из кэша. Например, когда данные в ответе сервера на Ajax запрос всегда новые, то кеширование мешает). По умолчанию имеет значение true для типов данных text, xml, html, json. Для типов данных "script" и "jsonp" имеет значение по умолчанию false.

  complete(XHR, textStatus ) – (функция) Функция, вызываемая по окончании запроса независимо от его успеха или неудачи (а также после функций success и error, если они заданы). Функция получает два аргумента: экземпляр объекта XHR (XMLHttpRequest) и строку, сообщающую о состоянии "success" или "error" (в соответствии с кодом статуса в ответе на запрос).

  contentType – (строка) Тип содержимого в запросе (при передаче данных на сервер). По умолчанию имеет значение "application/x-www-form-urlencoded" (подходит для большинства случаев и используется по умолчанию также при отправке форм).

  context – (объект) Данный объект станет контекстом (this) для всех функций обратного вызова, связанных с данным Ajax-запросом (например, для функций success или error).

  $.ajax({ url: "test.html",
  context: document.body,
  success: function(){
  $(this).addClass("done");
  }});

  data – (строка | объект) Данные, отправляемые c запросом на сервер. Они преобразовываются в строку запроса и по умолчанию обязательно кодируются в URL-подобный вид (За автоматическое кодирование в формат URL отвечает параметр processData).

  Строка присоединяется к строке запроса URL, если запрос выполняется методом GET. Если же запрос выполняется методом POST, то данные передаются в теле запроса.

  Если данный параметр является объектом в виде набора пар имя_свойства/значение, а значение является массивом, то jQuery сериализует объект в последовательность нескольких значений с одним и тем же ключом.

  Например, {Foo: [ "bar1", "bar2"]} станет "&Foo=bar1&Foo=bar2" .

  dataFilter(data, type ) – (функция) Функция, которая вызывается в случае успеха запроса и используется для обработки данных, полученных в ответе сервера на запрос. Она возвращает данные, обработанные в соответствии с параметром "dataType", и передает их функции success. Данные типа text и xml передаются без обработки сразу функции success через свойство responseText или responseHTML объекта XMLHttpRequest. Функция dataFilter получает два аргумента:

• data - полученные данные (тело ответа сервера),
• type - тип этих данных (параметр "dataType").

• dataType – (строка) Строка, определяющая название типа даных, ожидаемых в ответе сервера. Если тип данных не задан, jQuery сама пытается его определить, ориентируясь на MIME-тип ответа сервера. Допустимые значения:"xml", "html", "script", "json", "jsonp", "text". (Это необходимо для того, чтобы определить метод обработки данных, полученных в ответе на запрос, функцией dataFilter перед тем, как они будут переданы функции обратного вызова success.)

  error(XHR, textStatus, errorThrown ) – (функция) Функция , которая вызывается при неудачном запросе (если код статуса в ответе сервера сообщает об ошибке). Функции передаются три аргумента:

• XHR - экземпляр объекта XMLHttpRequest,
• textStatus - строка, описывающая тип ошибки, которая произошла ("timeout", "error", "notmodified" или "parsererror"),
• errorThrown - необязательный параметр – объект-исключение, если таковой имеется (возвращается экземпляром объекта XHR).

• global – (boolean - логическое значение) По умолчанию имеет значение true (разрешен вызов глобальных обработчиков событий на различных этапах Ajax-запроса, например, функций ajaxStart или ajaxStop). Значение false устанавливается, чтобы предотвратить их срабатывание. (Используется для управления Ajax-событиями).

  ifModified – (boolean - логическое значение) Если установлено значение true, то запрос считается успешным только в том случае, если данные в ответе изменились с момента последнего запроса (jQuery определяет, совпадает ли компонент в кэше браузера с тем, что находится на сервере, путем проверки заголовка "Last-Modified" с датой последней модификации содержимого, а в jQuery 1.4 также проверяется заголовок "Etag" – строка с версией компонента). По умолчанию имеет значение false, т.е. успешность запроса не зависит от заголовков и от изменений в ответе.

  jsonp – (строка) Переопределяет имя функции обратного вызова для кроссдоменного запроса jsonp. Заменяет собой ключевое слово callback в части "callback=?" строки GET запроса (добавляемой к URL) или передаваемой в теле запроса при передаче методом POST. По умолчанию jQuery автоматически генерирует уникальное имя для функции обратного вызова.

  jsonpCallback – (строка) Определяет имя функции обратного вызова для jsonp-запроса. Это значение будет использоваться вместо случайного имени, автоматически генерируемого библиотекой jQuery. Использование данного параметра позволяет избегать пропусков кэширования браузером GET запросов. Желательно разрешать jQuery генерировать новое имя для каждого нового кроссдоменного запроса на сервер для удобства управления запросами и ответами.

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

  processData – (boolean - логическое значение) По умолчанию имеет значение true, и данные, передаваемые на сервер в параметре data, преобразовываются в строку запроса с типом содержимого "Application / X-WWW-форм-urlencoded" и кодируются. Если такая обработка нежелательна (когда необходимо отправить на сервер другие данные, например DOMDocument или объект xml), то ее можно обойти, установив для данного параметра значение false.

  scriptCharset – (строка) При выполнении запросов методом GET и запросов, ориентированных на получение данных типа "jsonp" или "script", указывает кодировку символов запроса (например "UTF-8" или "CP1251"). Полезно при различиях между кодировками на стороне клиента и на серверной стороне.

  success(data, textStatus, XHR ) – (функция) Функция, которая вызывается при успешном запросе (если код статуса в ответе на запрос сообщает об успехе). Функции передаются три аргумента:

• data - данные, возвращаемые сервером в ответе, предварительно обработанные функцией dataFilter в соответствии со значением параметра dataType,
• textStatus - строку с кодом статуса, сообщающем об успехе,
• XHR - экземпляр объекта XMLHttpRequest.

• timeout – (число) Устанавливает максимальное время ожидания ответа сервера в милисекундах. Имеет приоритет над глобальной установкой предельного времени ожидания через $.AjaxSetup. Если лимит времени ожидания превышен, то выполнение запроса прерывается и вызывается функция обработки ошибок error (если она установлена). Это можно использовать, например, для того, чтобы назначить определенному запросу более длительное время ожидания, чем время, установленное для всех запросов.

  traditional – (boolean - логическое значение) Необходимо установить значение true, чтобы использовать традиционную (упрощенную) сериализацию (преобразование) данных при отправке (без рекурсивного преобразования в URL-подобную строку объектов или массивов, которые вложены в другие массивы или объекты).

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

  url – (строка) Строка, содержащая URL-адрес, по которому посылается запрос. По умолчанию это текущая страница.

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

  xhr – (функция) Функция, вызываемая для создания экземпляра объекта XMLHttpRequest. По умолчанию создание объекта XHR реализовано через ActiveXObject в браузере IE, либо через встроенный объект типа XMLHttpRequest в остальных случаях.

// Выполнить асинхронный Ajax-запрос с помощью метода POST. // Отправить данные на сервер и в случае успеха вывести // ответ сервера в диалоговом окне. $.ajax({ type: "POST", url: "test.php", data: "name=John&location=Boston", success: function(msg){ alert("Data Saved: " + msg); } });

Последнее обновление: 1.11.2015

Рассмотренные ранее методы get, post, load очень просты в использовании и с лихвой покрывают большинство потребностей разработчиков. Однако иногда возникает необходимость иметь больший контроль над выполнением. И поэтому обращаются к методу ajax , который позволяет осуществлять запросы на более низком уровне. Другие же методы по сути используют метод ajax.

Например, используем метод ajax для загрузки разметки html в элемент на странице:

Загрузить $(function(){ $("button").click(function(){ $.ajax("ajax.php", {success: function(data){ $("#result").html(data); } }); }); });

Ресурс ajax.php на стороне сервера пусть возвращает некоторую разметку html в ответ.

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

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

На выходе метод ajax, как и другие методы возвращает объект jqXHR , связанный с текущем запросом.

Метод ajax может принимать следующие формы: ajax(url, options) и ajax(options) . Параметр options представляет объект javascript, в котором мы указываем необходимые нам опции запроса в виде пар ключ-значение. Так, в вышеприведенном примере мы использовали опцию success . Далее приведены некоторые из опций, которые мы можем использовать в методе ajax:

url: адрес ресурса, к которому идет запрос. Тип данных: строка

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

dataType: тип получаемых от сервера данных. Тип данных: строка.

Может принимать следующие значения: html , xml , json , jsonp , text , script

cache: указывает, будет ли ответ кэшироваться веб-браузером. Тип данных: булевое значение. По умолчанию true.

И false по умолчанию для запросов, у которых параметр dataType имеет значение "script" или "jsonp"

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

$.ajax({ url: "ajax.php", context: document.body });

type: указывает тип запроса. Как правило, "GET" или "POST". Тип данных: строка. По умолчанию "GET"

data: данные, отправляемые вместе с запросом на сервер. Тип данных: строка или объект javascript

timeout: время в миллисекундах ожидания ответа на запрос

global: указывает, можно ли вызывать глобальные события ajax. Тип данных: булевое значение. По умолчанию true, то есть вызов глобальных событий разрешен

isModified: позволяет проверять заголовок ответа Last-Modified . Тип данных: булевое значение. По умолчанию false, то есть данный заголовок не проверяется. Если же имеет значение true, заголовок проверяется. А данные запрашиваются, если с момента последнего запроса данных они были изменены. Если же данные не были изменены, то в обработчике функции success параметр data будет иметь значение undefined

password: пароль, необходимый, если при запросе требуется аутентификация. Тип данных: строка

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

dataFilter: функция фильтрации "сырых" данных. Она принимает два параметра: function(data, type) . Параметр data представляет пришедшие от сервера данные, а type - тип данных. На выходе функция должна возвратить отфильтрованные данные

success: функция, вызываемая, если запрос завершится успехом. Она может принимать три параметра: function(data, textStatus, jqXHR) . Параметр data представляет пришедшие от сервера данные. Параметр textStatus передает код статуса. Третий параметр представляет связанный с запросом объект jqXHR

error: функция, которая вызывается, если код статуса сообщит об ошибке. Она может принимать три параметра: function(jqXHR, textStatus, errorThrown)

complete: функция, которая вызывается после завершения запроса. Она может принимать два параметра: function(jqXHR, textStatus) . Параметр textStatus сигнализирует нам о том, был ли успешным запрос или завершился с ошибкой.

beforeSend: функция, срабатывающая перед отправкой запроса. Она принимает два параметра: function(jqXHR, settings) . Параметр settings содержит объект, хранящий некоторые дополнительные настройки запроса. Если эта функция возвращает false , то запрос отменяется

xhr: функция для создания объекта XMLHttpRequest

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

Сериализация данных формы и запросы POST

Выше мы уже посмотрели на отправку запросов GET, теперь посмотрим, как с помощью метода ajax мы можем отправлять POST-запросы.

На строне сервера пусть у нас будет простейшая обработка авторизационных данных:

На веб-странице создадим форму и установим параметры для метода ajax:

$(function(){ $("#loginForm").submit(function(event) { event.preventDefault(); $.ajax({ url: $("#loginForm").attr("action"), data: $("#loginForm").serialize(), type: "POST", success: function(data){ $("#result").html(data); } }); }); });

Описание: Выполняет асинхронный HTTP (Ajax) запрос.

• Добавлен в версии: 1.5

  settings

  $.ajaxSetup() . Ниже приведен полный список всех настроек.

• Добавлен в версии: 1.0

  settings

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

  • accepts (значение по умолчанию: зависит от dataType)

    Ассоциативный массив отображающий заданный dataType его типу MIME, который отправляется полем Accept в заголовке HTTP запроса. Этот заголовок сообщает серверу какой формат ответа будет принят. Например, следующий пользовательский тип данных mycustomtype будет отправлен в запросе: Важно: Вы должны дополнительно указать соотвествующие типу converters для корректной обработки Ajax ответа.

    async

    По умолчанию, все зпросы отпрвляются асинхронно (т.е. это значение установленное в true по умолчанию). Если Вам нужен синхронный запрос, установите значение параметра false . Кросс-доменные и dataType: "jsonp" запросы не поддерживают синхронные операции. Обратите внимние, что синхронные запросы могут временно блокировать браузер или приостанавливать какие то активные операции в моменты выполнения запроса. Начиная с jQuery 1.8 , использование async: false с jqXHR ($.Deferred) не рекомендуется ; Вы должны использовать обработчики success / error / complete вместо соотвествующих методов объекта jqXHR, таких как jqXHR.done() .

    beforeSend

    Обработчик вызываемый перед совершения запроса, в котором Вы можете модицифировать объект jqXHR (В версиях jQuery 1.4.x и ниже, XMLHTTPRequest) перед тем как Ajax запрос будет отправлен. Использовать пользовательские заголовки и т.д. The jqXHR and settings objects are passed as arguments. This is an Ajax Event . Returning false in the beforeSend function will cancel the request. As of jQuery 1.5 , the beforeSend option will be called regardless of the type of request.

    cache (значение по умолчанию: true, false для dataType "script" и "jsonp")

    Если устновлено значение false , то принудительно запрошенные страницы не будут закешированы браузером. Важно: Значение false параметра cache будет корректно работать только с запросами HEAD и GET. Это работает путем добавления "_={timestamp}" к адресу GET запроса. Этот параметр не нужендля других типов запросов, исключая случай с IE8 когда POST запрос осуществляется к тому же адресу URL к которому уже выполнялся GET запрос.

    complete

    Функция которая вызывается когда запрос завершается (после того как success или error обработчики будут вызваны). Функция принимает два аргумента: объект jqXHR (в версии jQuery 1.4.x и ниже, XMLHTTPRequest) и строка статуса запроса ("success" , "notmodified" , "nocontent" , "error" , "timeout" , "abort" или "parsererror"). Начиная с jQuery 1.5 , параметр complete может принимать массив функций. Каждая функция будет вызывана в свою очередь. Является Ajax событием .

    contents

    Ассоциативный массив с парами строки/регулярные выражения определяющие как jQuery будет парсить ответ, в зависимости от типа контента. (Добавлен в версии: 1.5)

    contentType (значение по умолчанию: "application/x-www-form-urlencoded; charset=UTF-8")

    Когда отправляются данные на сервер, используется этот тип контента Content-Type . Значение по умолчанию "application/x-www-form-urlencoded; charset=UTF-8", которое прекрасно подходит для большинства случаев. Если Вы явно передаете content-type в метод $.ajax() , то он всегда будет отправлен на сервер (даже если никакие данные не будут отправлены на сервер). Начиная с jQuery 1.6 Вы можете указать значени false чтобы jQuery не передавал в заголовке поле Content-Type совсем. Важно: Стандарт W3C XMLHttpRequest specification предписывает всегда использовать кодировку UTF-8; указание другой кодировки не вынудит браузер изменить кодировку. Важно: Для кросс-доменных запросов, установка тип контента в значение отличающегося от application/x-www-form-urlencoded , multipart/form-data или text/plain вынудит браузер отправить подготовительный OPTIONS запрос на сервер.

    Это объект будет контекстом для всех обработчиков этого Ajax запроса. По умолчанию контекстом является объект представляющий Ajax настройки используемые при вызове ($.ajaxSettings объединеные с настройками переданными в $.ajax). Например, указав DOM элемент как контекст сделает его контекстом в обработчике запроса complete:

    url: "test.html" , context: document.body }).done(function () { $(this ).addClass("done" );

  • converters (значение по умолчанию: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML})

    crossDomain (значение по умолчанию: false для запросов к тому же домену, true для кросс-доменных запросов)

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

    Данные отправляемые на сервер. Они будут преобразованы в строку, если еще не являются строкой. Для GET запроса эта строка будет добавлена к URL адресу. Смотрите праметр processData для предотвращения этой автоматической обработки. Объект должен быть ассоциативным массивом (пары ключ/значение). Если значение является массивом, то jQuery сериализирует значения массива с тем же самым ключем на основе значения параметра traditional (описан ниже).

    dataFilter

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

    dataType (значение по умолчанию: Общеиспользуемые типы (xml, json, script, или html))

    Тип данных которые Вы ожидаете от сервера. Если не указан, то jQuery будет пытаться определить его на базе типа MIME ответа (тип xml MIME даст XML, в 1.4 json даст JavaScript объект, в 1.4 script будет выполнен как скрипт и все прочее будет возвращено как строка). Возможные типы (и результат передается в качестве первого аргумента в обработчик запроса success):

    • "xml" : Возвращает XML документ, который может быть обработан при помощи jQuery.
    • "html" : Возвращает HTML как простой текст; включенные тэги скриптов будет выполнены когда этот HTML будет вставлен в DOM.
    • "script" : Вычисляет ответ как JavaScript и возвращает его как простой текст. Отключает кэширование запроса (путем добавление параметра _= к URL адресу) даже если значение параметра cache равно true . Важно: Это превратит POST в GET для for запросов к удаленным доменам.
    • "json" : Вычисляет ответ как JSON и возвращает JavaScript объект. Кросс-доменный "json" запрос конвертируются в "jsonp" если в параметрах запроса не указано jsonp: false . Данные в формате JSON обрабатываются в строгом порядке; любой нарушения формата будет отклонено и будет выброшена ошибка синтаксического анализа. Начиная с jQuery 1.9, пустой запрос также будет отклонен; сервер должен вернуть ответ null или {} .
    • "jsonp" : Загружает данные в JSON используя при помощи формата загрузки JSONP. Добавляет дополнительный параметр "?callback=?" в конец URL адреса для указания функция обработчика. Выключает кэширование путем добавления параметра "_=" к URL адресу, даже если значение параметра cache равно true .
    • "text" : Строка с текстом.
    • несколько, разделенных пробелом значений: начиная с jQuery 1.5 , jQuery может преобразовать dataType от того что получен в поле заголовка Content-Type в то что Вам нужно. Например, если Вы хотите использовать текст ответа как XML, используйте значение "text xml" для параметра dataType . Вы также можете сделать JSONP запрос, если он получен в виде текста и интерпретируется jQuery как XML: "jsonp text xml" . Точно так же, сокращенная строка, такая как "jsonp xml" сначала попытается преобразовать из JSONP в XML и если это невозможно, то преобразует из JSONP в текст и затем из текст в xml.

  • Функция вызывается если запрос закончится ошибкой. Функция принимает три аргумента: объект jqXHR (в jQuery 1.4.x, XMLHttpRequest), строка описывающая тип произошедшей ошибки и необязательный объект исключения, если он был вызван. Возможные значения второго аргумента (кроме null): "timeout" , "error" , "abort" и "parsererror" . При возникновении HTTP ошибки, аргумент errorThrown примет текстовую часть HTTP статуса, такие как "Not Found" или "Internal Server Error." Начиная с jQuery 1.5 , параметр error может принять массив функций. Каждая функция будет вызвана в своем порядке. Важно: Этот обработчик не вызывается для кросс-доменных скриптовых и кросс-доменных JSONP запросов. Являетсяе Ajax событием .

    global (значение по умолчанию: true)

    Параметр регулирует вызывать ли глобальные Ajax события для этого запроса. По умолчанию значение равно true . Установка значения в false предотвратит вызов таких глобальных обработчиков как ajaxStart или ajaxStop . Это можно использовать для управления различными Ajax событиями .

    headers (значение по умолчанию: {})

    Объект с дополнительными полями заголовка HTTP запроса для отправки через XMLHttpRequest. Заголовок X-Requested-With: XMLHttpRequest добавляется всегда, но его значение по умоланию XMLHttpRequest можно изменить через этот параметр. Значения в headers также может быть переписаны в функции beforeSend . (добавлен в версии: 1.5)

    ifModified (значение по умолчанию: false)

    Разрешает запросу быть успешным только если ответ изменился с момента последнего запроса. Это делается путем проверки поля заголовка Last-Modified . Значение по умолчанию false , игнорирует поля заголовка HTTP запроса. В jQuery 1.4 и ниже этот алгоритм также проверяет поле заголовка ответа "etag" указанное сервером, что найти неизменненные данные.

    isLocal (значение по умолчанию: зависит от текущего локального протокола)

    Разрешает текущему окружение как "локальное" (например файловая система), даже если jQuery не распознает его таким по умоланию. Следующие протоколыв в настоящее время признаются как локальные: file , *-extension и widget . Если опция isLocal требует изменения, то рекомендуется сделать это один раз при помощи метода $.ajaxSetup() . (добавлен в версии: 1.5.1)

    Переопределяет имя функции обратного вызова в JSONP запросе. Это значение используется вместо названия функциии "callback" в URL-параметре "callback=?". Так {jsonp:"onJSONPLoad"} передастся на сервер в виде "onJSONPLoad=?" . Начиная с jQuery 1.5 , значение параметра jsonp равное false предотвращает jQuery от добавления строки "?callback" к URL-адресу или попытки использовать "=?" для преобразования ответа. В этом случае, Вы должны явно указать значение параметра jsonpCallback . Например, { jsonp: false, jsonpCallback: "callbackName" } . Если Вы не доверяете целям Ваших Ajax запросов, то рекомендуется по соображениям безопасности установить значение параметра jsonp в false .

    jsonpCallback

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

    method

    mimeType

    password

    Пароль для использования с XMLHttpRequest в ответ на запрос basic http авторизации.

    processData (значение по умолчанию: true)

    По умолчанию данные, передаваемые в параметр data в качестве объекта (технически, все кроме строки) будут обработаны и преобразованы в строку запроса, подходящую для типа данных по умолчанию "application/x-www-form-urlencoded" . Если Вы хотите отправить DOM документ, или другие необрабатываемые данные, установите значение данного параметр в false .

    scriptCharset

    Применяется только при использовании "script" в качестве транспорта (например, кросс-доменные запросы с "jsonp" или "script" dataType и методом "GET"). Устанавливает аттрибут charset используемого тэга script в запросе. Используется, когда кодировка символов на текущей странице отличается от кодировки символов удаленного скрипта.

    statusCode (значение по умолчанию: {})

    Объект с числовыми кодами HTTP кодов статусов и функции которые будут вызваны когда статус ответа имеет соотвествующее значение. Например, следующий alert будет вызван когда статус ответа будет 404:

    404 : function () { alert("страниц не найдена" );

    Если запрос успешен, то соотвествующая функция будет принимать те же самые параметры что и success обработчик; если результат ошибка (включая редиректы 3xx), то эти функции примут те же параметры что и обработчик error .

    (добавлен в версии: 1.5)

  • Функция вызываемая если запрос успешен. Функция принимает три аргумента: data - данные возвращенные с сервера, отформатированные в соответствии с параметром dataType или dataFilter если они указаны; строка описывающая статус; и объект jqXHR (в версии jQuery 1.4.x и ниже XMLHttpRequest). Начиная с jQuery 1.5 , Этот параметр может принимать массив функций. Каждая функция будет вызывана в свою очедерь. Является Ajax событием .

    Задает таймаут запроса (в милисекундах). Этот параметр переопределяет глобальный таймаут, устанавливаемый при помощи метода $.ajaxSetup() . Этот таймаут запускается в момент запуска метода $.ajax ; если несколько других запросов в процессе работы и браузер не имеет сетевого подключения, то возможен запрос на таймаут, прежде чем он будет отправлен. В версии jQuery 1.4.x и ниже, объект XMLHttpRequest будет находиться в недопустимом состоянии если время ожидния будет превышено; обращение к любым методам объекта сгенерирует исключение. В Firefox 3.0+, script и JSONP запросы не могут быть отменены по таймауту; скрипт будет работать, даже если он прийдет после таймаута.

    traditional

    type (значение по умолчанию: "GET")

    Синоним для параметра method . Вы должны использовать type если Вы используете версию jQuery до 1.9.0.

    url (значение по умолчанию: Текущий URL-адрес)

    username

    Имя пользователя используемое с XMLHttpRequest в ответ на запрос basic http авторизации.

    xhr (значение по умолчанию: ActiveXObject когда доступен (IE), иначе XMLHttpRequest)

    Функция обратного вызова для создания объекта XMLHttpRequest. По умолчанию используется ActiveXObject когда доступен (для IE), иначе используется XMLHttpRequest. У Вас есть возможность переопределить создание этого объекта и вернуть свою реализацию XMLHttpRequest или улучшить создание этого объекта.

    xhrFields

    Объект с парами fieldName-fieldValue для установки в нативный объект XHR . Например, Вы можете использовать значение withCredentials равное true для кросс-доменных запросов в случае необходимости.

    url: a_cross_domain_url, withCredentials: true

    В 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:

url: "http://fiddle.jshell.net/favicon.png" , beforeSend: function (xhr) { xhr.overrideMimeType("text/plain; charset=x-user-defined" ); Done(function (data) { if (console && console.log) { console.log("Sample of data:" , data.slice(0 , 100 ));

Объект jqXHR возвращаемый методом $.ajax() в версии jQuery 1.5 реализует интерфейс Promise, дающий ему все свойства, методы и поведение Promise . Эти методы принимают один или несколько аргументов, которые вызываются при завершении запроса инициированного при помощи $.ajax() . Это позволяет назначать несколько обработчиков на один запрос и даже назначать обработчики после того как запрос может быть завершен. (Если запрос уже выполнен, то обработчики вызовутся немедленно). Доступные методы Promise в объекте jqXHR:

• jqXHR.done(function(data, textStatus, jqXHR) {});
• jqXHR.fail(function(jqXHR, textStatus, errorThrown) {});
• jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { }); (добавлен в версии jQuery 1.6)

  Альтернатива создания обработчика complete , метод.always() заменяет устаревший метод.complete() .

• jqXHR.then(function(data, textStatus, jqXHR) {}, function(jqXHR, textStatus, errorThrown) {});

Внимание: обработчики jqXHR.success() , jqXHR.error() и jqXHR.complete() будут удалены в jQuery 3.0. Вы можете использовать jqXHR.done() , jqXHR.fail() и jqXHR.always() соответственно.

Для обеспечения обратной совместимости с кодом 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 объект {key1: "value1", key2: "value2"} . Если используется последний вариант, то данные будут преобразованы в строку при помощи метода 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 разрешает кодировку которая будет явно использована в запросах использующих тэг (то есть тип данных script или jsonp). Это применимо в случае если удаленный скрипт и Ваша текущая страница используют разные кодировки.

Первая буква в слове Ajax означает "асинхронный", что означает что операция происходит параллельно и порядок ее выполнения не гарантируется. Параметр async метода $.ajax() по умолчанию равен true , что указывает что выполнение кода может быть продолжено после совершения запроса. Установка этого параметра в false (и следовательно, не делая Ваш вывод более асинхронным) настоятельно не рекомендуется, так как это может привести к тому что браузер перестанет отвечать на запросы.

Метод $.ajax() вернет объект XMLHttpRequest который и создает. Обычно jQuery обрабатывает создание этого объекта внутри, но можно указать при помощи параметра xhr функция которая переопределит поведение по умолчанию. Возвращаемый объект обычно может быть отброшен, но должен обеспечивать интерфейс низкого уровня для манипуляции и управления запросом. В частности, вызов.abort() на этом объекте должен будет остановить запрос до его завершения.

Расширение Ajax

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

Использование преобразований

$.ajax() преобразователи поддерживают трансформацию одних типов данных другие. Однако, если Вы хотите трансформировать пользовательский тип данных в известный тип данных (например json), Вы должны добавить добавить соответствие между Content-Type ответа и фактическим типом данных, используя параметр contents:

Которая не позволяет выполнять запросы к другим доменам, поддоменам, портам или протоколам.

Script и JSONP запросы не подвергаются ограничениям этой политики.

string GET

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

$.ajax({ //... type: "POST", //... });

url string текущая страница

$.ajax({ //... url: "/path/to/script", //... });

data string | object

Данные, отправляемые c запросом на сервер. Они преобразовываются в строку запроса и по умолчанию обязательно кодируются в URL-подобный вид (За автоматическое кодирование в формат URL отвечает параметр ).

Строка присоединяется к строке запроса URL, если запрос выполняется методом GET. Если же запрос выполняется методом POST, то данные передаются в теле запроса.

$.ajax({ //... data: "value1=1&value2=2&value3=3", //... });

Если данный параметр является объектом в виде набора пар имя_свойства/значение, а значение является массивом, то jQuery сериализует объект в последовательность нескольких значений с одним и тем же ключом.

{Foo: [ "bar1", "bar2"]}

&Foo=bar1&Foo=bar2

async boolean true

Флаг выполнения асинхронных запросов.

$.ajax({ //... async: false, //... });

dataType string Строка, определяющая название типа данных, ожидаемых в ответе сервера. Если тип данных не задан, jQuery сама пытается его определить, ориентируясь на MIME-тип ответа сервера. Допустимые значения: xml , html , script , json , jsonp , text . (Это необходимо для того, чтобы определить метод обработки данных, полученных в ответе на запрос, функцией dataFilter перед тем, как они будут переданы функции обратного вызова success.) cache boolean true

Флаг кэширования ответа.

По умолчанию имеет значение true для типов данных text , xml , html , json . Для типов данных script и jsonp имеет значение по умолчанию false .

contentType string application/x-www-form-urlencoded Тип содержимого в запросе (при передаче данных на сервер). context object Данный объект станет контекстом (this) для всех функций обратного вызова, связанных с данным ajax-запросом (например, для функций success или error) $.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); } }); global boolean true Вызов глобальных обработчиков событий на различных этапах ajax-запроса, например, функций ajaxStart или ajaxStop ifModified boolean false

Если установлено значение true , то запрос считается успешным только в том случае, если данные в ответе изменились с момента последнего запроса (jQuery определяет, совпадает ли компонент в кэше браузера с тем, что находится на сервере, путем проверки заголовка Last-Modified с датой последней модификации содержимого, а в jQuery 1.4 также проверяется заголовок Etag – строка с версией компонента). По умолчанию имеет значение false , т.е. успешность запроса не зависит от заголовков и от изменений в ответе.

username string

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

password string Пароль, который будет использоваться в ответ на требование HTTP авторизации на сервере. processData boolean true

Данные, передаваемые на сервер в параметре , преобразовываются в строку запроса с типом содержимого Application / X-WWW-форм-urlencoded и кодируются. Если такая обработка нежелательна (когда необходимо отправить на сервер другие данные, например DOMDocument или объект xml), то ее можно обойти, установив для данного параметра значение false .

scriptCharset string

При выполнении запросов методом GET и запросов, ориентированных на получение данных типа jsonp или script , указывает кодировку символов запроса (например UTF-8 или CP1251). Полезно при различиях между кодировками на стороне клиента и на серверной стороне.

timeout integer

Устанавливает максимальное время ожидания ответа сервера в милисекундах. Имеет приоритет над глобальной установкой предельного времени ожидания через $.AjaxSetup . Если лимит времени ожидания превышен, то выполнение запроса прерывается и вызывается функция обработки ошибок error (если она установлена).

Название Параметры Описание

error	XHR, textStatus, errorThrown	Срабатывает при неудачном запросе. Функции передаются три аргумента: textStatus - строка, описывающая тип ошибки, которая произошла (timeout , error , notmodified или parsererror) errorThrown - необязательный параметр, объект-исключение, если таковой имеется (возвращается экземпляром объекта XHR) $.ajax({ //... error: function() { alert("Ошибка!"); }, //... });
success	data, textStatus, XHR	Срабатывает при успешном запросе. Функции передаются три аргумента: data - данные, возвращаемые сервером в ответе, предварительно обработанные функцией dataFilter в соответствии со значением параметра textStatus - строку с кодом статуса, сообщающем об успехе XHR - экземпляр объекта XMLHttpRequest $.ajax({ //... success: function() { alert("Успех!"); }, //... });
beforeSend	XHR	Срабатывает перед отправкой запроса. В качестве единственного аргумента ей передается экземпляр объекта XHR (XMLHttpRequest). Если функция возвращает false , то происходит отмена запроса. $.ajax({ //... beforeSend: function() { alert("Сработал beforeSend!"); }, //... });
complete	XHR, textStatus	Срабатывает по окончанию запроса независимо от его успеха или неудачи (а также после функций и , если они заданы). Функция получает два аргумента: экземпляр объекта XHR (XMLHttpRequest) и строку, сообщающую о состоянии success или error (в соответствии с кодом статуса в ответе на запрос)

Подробный пример:

function testAjax(id, pid) { $.ajax({ type: "POST", data: "id=" + id + "&pid=" + pid, url: "/path/to/script/test.php", success: function(data) { var obj = $.parseJSON(data); //Преобразование json ответа сервера if (obj.error == 0) { alert("Запрос прошел успешно"); } else { alert(obj.error); } } }); return true; } Успешный запрос
Запрос с ошибкой

PHP скрипт (test.php):

Еще один пример, отличается выводом ответа:

function testAjax(id, pid) { $.ajax({ type: "POST", data: "id=" + id + "&pid=" + pid, url: "/path/to/script/test.php", success: function(data) { $("#content").html(data); } }); return true; } Успешный запрос
Запрос с ошибкой

Ответ:

PHP скрипт (test.php):

Больше информации можно посмотреть по адресу: http://api.jquery.com/jquery.ajax/

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

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

Придумаем небольшое задание себе, будем проверять наличие email адреса в базе данных без перезагрузки страницы используя php и ajax. Такой пример хорошо продемонстрирует как мы можем взаимодействовать с сервером без перезагрузки страницы в браузере, а также, это часто используется при различного рода валидациях пользовательских форм. В корневом каталоге создадим 3 файла с именами index.php , email.php , validate.js .

Создание страницы

Создадим простую страницу с одной формой, которая содержит только одно поле для ввода email.
Синтаксис файла index.php

AJAX Tutorial

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

Создание js скрипта

Синтаксис файла validate.js

$(document).ready(function(){ var email = ""; $("#email").keyup(function(){ var value = $(this).val(); $.ajax({ type:"POST", url:"email.php", data:"email="+value, success:function(msg){ if(msg == "valid"){ $("#message").html("Этот Email можно использовать.Этот Email уже занят."); } } }); }); $("#submit").click(function(){ if(email == ""){ alert("Please, put data to all email"); }else{ $.ajax({ type: "POST", url:"email.php", data:"add_email="+email, success:function(msg){ $("#message").html(msg); } }); } }); });

Обработчик на php

Этот скрипт будет получать POST запрос от клиента, обрабатывать его и возвращать результат. AJAX считывает результат и на его основе принимает решение.
Синтаксис файла email.php

$connection = mysqli_connect("localhost","email","email","email"); if(isset($_POST["email"]) && $_POST["email"] != ""){ $email = $_POST["email"]; $email = mysqli_real_escape_string($connection,$email); if(!filter_var($email, FILTER_VALIDATE_EMAIL)){ echo "invalid"; }else{ $sql = "SELECT id FROM email WHERE email="$email""; $result = mysqli_query($connection,$sql); if(mysqli_num_rows($result) == 1){ echo "invalid"; }else{ echo "valid"; } } } if(isset($_POST["add_email"]) && $_POST["add_email"] != ""){ $email = mysqli_real_escape_string($connection,$_POST["add_email"]); $sql = "INSERT INTO email(email) VALUES("$email")"; if(mysqli_query($connection,$sql)){ echo Success"; }else{ echo "Error"; } }

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

AJAX передает POST запрос скрипту посредством этого участка кода:

$.ajax({ type:"POST", url:"email.php", data:"email="+value, success:function(msg){ if(msg == "valid"){ $("#message").html("Этот Email можно использовать. "); email = value; }else{ $("#message").html("Этот Email уже занят. "); } } });

type - Тип запроса, POST или GET. В нашем случае POST;
url - адрес скрипта которому отправляют запрос;
data - данные которые передаются в запросе;
success - что делать в результате успешного выполнения запроса. В нашем случае вызывается функция;

В самом скрипте, проверка наличия email в базе выполняется при каждом вводе символа в поле email. В скрипте за обработку ввода отвечает участок $("#email").keyup(function(){}); , который проверяет нажатие клавиши в поле с id = "email" .
Как видите, код довольно простой и не требует особо больших навыков для понимания, все завязано на обработке событий keyup() - нажатие клавиши, click() - клик мышкой по элементу. Далее следует AJAX запрос и ответ от скрипта. Таким образом используя php и ajax можно можно получить практически безграничные возможности для создания интерактивных страниц.
Данный код не претендует на звание высококачественного, но если развить, добавить правильных валидаций на уровне клиента и сервера, ввести css, то вполне можно использовать в своих проектах.
Если у вас возникли вопросы, не стесняйтесь, пишите комментарии.
Желаю вам хорошего дня и до скорых встреч 🙂