Выполняет Ajax-запрос к серверу, используя множество необязательных параметров для его настройки. JavaScript - Асинхронные AJAX запросы на примерах Асинхронная загрузка данных с сервера jquery ajax

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

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

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

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

• username - логин
• password - пароль

При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос ввида:
http://api.domain.com/?type=jsonp&query=test&callback=?
Вместо последнего знака вопроса (?) будет подставлено имя callback функции. Если же Вы не хотите использовать данный способ, то Вам необходимо будет явно указать имя callback функции, используя опцию jsonp при вызове метода jQuery.ajax().

Returns: jqXHR

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

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

  url
  Тип : Строка
  URL адрес, на который будет отправлен Ajax запрос

  settings
  Тип : Объект
  Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из . Ниже приведен полный список всех настроек.

• version added: 1.0 jQuery.ajax(settings)

  settings
  Тип : Объект
  Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из .

$.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).done(function(msg) { alert("Data Saved: " + msg); });

Получить последнюю версию HTML страницы

$.ajax({ url: "test.html", cache: false }).done(function(html) { $("#results").append(html); });

Передаём в качестве данных XML документ. Отключаем автоматическую конвертацию данных в обычную строку, задав настройке processData значение false:

Var xmlDocument = ; var xmlRequest = $.ajax({ url: "page.php", processData: false, data: xmlDocument }); xmlRequest.done(handleResponse);

Var menuId = $("ul.nav").first().attr("id"); var request = $.ajax({ url: "script.php", type: "POST", data: {id: menuId}, dataType: "html" }); request.done(function(msg) { $("#log").html(msg); }); request.fail(function(jqXHR, textStatus) { alert("Request failed: " + textStatus); });

Загрузить и выполнить файл JavaScript:

$.ajax({ type: "GET", url: "test.js", dataType: "script" });

Описание: Выполняет асинхронный 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() .

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

Объект 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) {});
• 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() следующие:

Различные типы ответа на вызов $.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() на этом объекте должен будет остановить запрос до его завершения.

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

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

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

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

Современные веб-приложение, как правило, разделяются на две части: клиент и сервер. Клиент представляет собой веб-страницу с кодом JavaScript. К серверным технологиям относятся PHP, Ruby, Node.js, ASP.NET и т.д., которые получают запрос от клиента, обрабатывают и отправляют в ответ результат обработки.

Ajax представляет технологию для отправки запросов к серверу из клиентского кода JavaScript без перезагрузки страницы. Сам термин расшифровывается как Asynchronous JavaScript And XML. То есть изначально AJAX предполагал асинхронное взаимодействие клиента и сервера посредством данных в формате XML. Хотя сейчас XML во многом вытеснил формат JSON. В любом случае AJAX революционизировал веб-среду, позволив создавать динамичные отзывчивые веб-приложения.

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

Для создания приложений, использующих Ajax, применяются различные способы. Но самым распространенным способом является использование объекта XMLHttpRequest :

Var request = new XMLHttpRequest();

После создания объекта XMLHttpRequest можно отправлять запросы к серверу. Но для начала надо вызвать метод open() для инициализации:

Request.open("GET", "http://localhost/hello.txt", false);

Метод open() принимает три параметра: тип запроса (GET, POST, HEAD, PUT), адрес запроса и третий необязательный параметр - логическое значение true или false, указывающее, будет ли запрос осуществляться в асинхронном режиме. То есть в данном случае запрос будет иметь тип GET, он будет направляться по адресу "http://localhost/hello.txt в синхронном режиме, так как стоит значение false (для асинхронного режима указывается значение true).

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

Кроме того, метод open() может принимать еще два параметра: логин и пароль пользователя, если для выполнения запроса нужна аутентификация.

Request.open("GET", "http://localhost/home.php", true, "login", "password");

После инициализации запроса методом open() необходимо отправить запрос с помощью метода send() :

Request.send();

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

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

statusText : возвращает текст статуса ответа, например, "200 OK"

responseType : возвращает тип ответа. Есть следующие типы:

• response : возвращает ответ сервера

  responseText : возвращает текст ответа сервера

  responseXML : возвращает xml, если ответ от сервера в формате xml

Например, выполним запрос к текстовому файлу, который находится на локальном веб-сервере. Для выполнения ajax-запросов потребуется запущенный локальный веб-сервер, на котором будет лежать файл hello.txt, в котором будет содержаться одна строка: "Привет мир".

Код веб-страницы (пусть она называется test.html ) будет следующим:

var request = new XMLHttpRequest(); request.open("GET", "http://localhost:8080/hello.txt", false); request.send(); var status = request.status; if(status==200) document.write("Текст ответа: " + request.responseText) else if(status==404) document.write("Ресурс не найден") else document.write(request.statusText)

И после загрузки страницы выполнится ajax-запрос к ресурсу http://localhost:8080/hello.txt . Но важно отметить, что получение статуса сразу после вызова метода request.send() будет работать только для синхронного запроса.

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

Работа с асинхронными запросами чуть более сложна, чем с синхронными, поскольку нам надо еще обработать событие readystatechange объекта XMLHttpRequest.

При асинхронном запросе объект XMLHttpRequest использует свойство readyState для хранения состояния запроса. Состояние запроса представляет собой число:

0: объект XMLHttpRequest создан, но метод open() еще не был вызван для инициализации объекта

1: метод open() был вызван, но запрос еще не был отправлен методом send()

3: ответ получен от сервера

4: выполнение запроса полностью завершено (даже если получен код ошибки, например, 404)

Событие readystatechange возникает каждый раз, когда изменяется значение свойства readyState . Например, выполним асинхронный запрос:

var request = new XMLHttpRequest(); function reqReadyStateChange() { if (request.readyState == 4) { var status = request.status; if (status == 200) { document.write(request.responseText); } else { document.write("Ответ сервера " + request.statusText); } } } request.open("GET", "http://localhost:8080/hello.txt"); request.onreadystatechange = reqReadyStateChange; request.send();

Кроме обработки события readystatechange для получения ответа сервера можно также обрабатывать событие load , которое возникает после выполнения запроса. Его использование аналогично:

Var request = new XMLHttpRequest(); function responceLoad() { if (request.readyState == 4) { var status = request.status; if (status == 200) { document.write(request.responseText); } else { document.write("Ответ сервера " + request.statusText); } } } request.open("GET", "http://localhost:8080/hello.txt"); request.onload = responceLoad; request.send();

Урок, в котором на примерах рассмотрим создание простых асинхронных AJAX запросов к серверу. В качестве метода передачи запросов будем использовать как метод GET, так и метод POST. На сервере обработку запросов выполним с помощью скриптов PHP.

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

При отправке асинхронного запроса, браузер (страница) не "замораживается", т.е. с ней, как и прежде, можно работать. Но тогда как узнать, когда придёт ответ с сервера. Чтобы это определить, необходимо отслеживать свойство браузера readyState (состояние готовности). Данное свойство содержит число, по значению которого можно судить о том, в какой стадии находится запрос. В следующей таблице приведены основные значения свойства readyState и соответствующие им состояния.

Т.е. получается, что нам необходимо отследить, когда значение у свойства readyState будет равно 4. Это будет означать то, что на отправленный запрос, пришёл ответ с сервера. Остальные значения на практике используются довольно редко, и некоторые браузеры могут их не поддерживать.

Для того чтобы определить на какой стадии находится запрос, необходимо использовать событие объекта XMLHttpRequest onreadystatechange . Данное событие происходит каждый раз, когда изменяется значение свойства readyState . Следовательно, в обработчике этого события (неименованной или именованной функции) можно прописать действия, которые будут проверять равно ли данное свойство 4 и если равно, то например, вывести ответ сервера на страницу.

Рассмотрим создание асинхронного AJAX запроса на примере, который будет после загрузки страницы приветствовать пользователя и отображать его IP-адрес.

Для этого необходимо создать на сервере 2 файла в одном каталоге:

Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):

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

Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).

Настроим запрос с помощью метода open() .

Указываются следующие параметры:

• Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
• URL-адрес, который будет обрабатывать запрос на сервере.
• Тип запроса: синхронный (false) или асинхронный (true).
• Имя и пароль при необходимости.

Главная » Связь/Общение » Выполняет Ajax-запрос к серверу, используя множество необязательных параметров для его настройки. JavaScript - Асинхронные AJAX запросы на примерах Асинхронная загрузка данных с сервера jquery ajax