Отправка асинхронных запросов на JQuery. Введение в Ajax Параметр data в ajax запросе

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

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

Функция $.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 запросы не подвергаются ограничениям этой политики.

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

Beforecreate: function (node, targetNode, type, to) { jQuery.get("http://example.com/catalog/create/" + targetNode.id + "?name=" + encode(to.inp.value), function (result) { if (result.isOk == false) alert(result.message); }); }

Но я хочу, чтобы мой виджет не создавал этот элемент, поэтому я должен возвращать false в функции mother, а не в обратном вызове. Есть ли способ выполнить синхронный запрос AJAX с использованием jQuery или любого другого API-интерфейса в браузере?

15 ответов

Вы можете установить jQuery Ajax в синхронном режиме, позвонив

JQuery.ajaxSetup({async:false});

Затем выполните ваши вызовы Ajax с помощью jQuery.get(...);

Затем просто включайте его снова

JQuery.ajaxSetup({async:true});

Я предполагаю, что это работает так же, как предложено @Adam, но может быть полезно кому-то, кто хочет перенастроить свои jQuery.get() или jQuery.post() в более сложный синтаксис jQuery.ajax() .

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

Function getWhatever() { // strUrl is whatever URL you need to call var strUrl = "", strReturn = ""; jQuery.ajax({ url: strUrl, success: function(html) { strReturn = html; }, async:false }); return strReturn; }

Все эти ответы не согласны с тем, что выполнение Ajax-вызова с помощью async: false приведет к зависанию браузера, пока не будет завершен запрос Ajax. Использование библиотеки управления потоками позволит решить эту проблему, не повесив браузер. Ниже приведен пример с Frame.js :

Beforecreate: function(node,targetNode,type,to) { Frame(function(next)){ jQuery.get("http://example.com/catalog/create/", next); }); Frame(function(next, response)){ alert(response); next(); }); Frame.init(); }

Имейте в виду, что если вы выполняете междоменный вызов Ajax (используя JSONP) - вы не можете делать он синхронно, флаг async будет игнорироваться jQuery.

$.ajax({ url: "testserver.php", dataType: "jsonp", // jsonp async: false //IGNORED!! });

Для JSONP-вызовов вы можете использовать:

Ajax-вызов в ваш собственный домен - и выполните междоменный вызов на стороне сервера
Измените свой код для работы асинхронно
Используйте библиотеку "секвенсер функций", такую как Frame.js(этот ответ)
Заблокируйте пользовательский интерфейс вместо блокировки выполнения (этот ответ) (мой любимый способ)

Примечание: вы не должны использовать async: false из-за этого предупреждения:

Начиная с Gecko 30.0 (Firefox 30.0/Thunderbird 30.0/SeaMonkey 2.27), синхронные запросы в основном потоке устарели из-за негативных последствий для пользователя.

Chrome даже предупреждает об этом в консоли:

Синхронный XMLHttpRequest в основном потоке устарел из-за его пагубных последствий для конечного пользователя. Для получения дополнительной помощи, проверьте https://xhr.spec.whatwg.org/ .

Это может сломать вашу страницу, если вы делаете что-то подобное, так как это может перестать работать в любой день.

Если вы хотите сделать это так, как если бы он был синхронным, но все еще не блокировался, вам следует использовать async/await и, возможно, также некоторый ajax, основанный на обещаниях, таких как новый Fetch API.

Async function foo() { var res = await fetch(url) console.log(res.ok) var json = await res.json() console.log(json) }

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

если это ваш вариант использования, вы можете вместо этого взглянуть на navigator.sendBeacon

Страница также может отключить синхронизацию req либо с заголовками http, либо с атрибутом iframe allow

Я использовал ответ, данный Carcione, и изменил его, чтобы использовать JSON.

Function getUrlJsonSync(url){ var jqxhr = $.ajax({ type: "GET", url: url, dataType: "json", cache: false, async: false }); // "async" has to be "false" for this to work var response = {valid: jqxhr.statusText, data: jqxhr.responseJSON}; return response; } function testGetUrlJsonSync() { var reply = getUrlJsonSync("myurl"); if (reply.valid == "OK") { console.dir(reply.data); } else { alert("not valid"); } }

Я также получил статус с использованием свойства statusText возвращаемого объекта. Обратите внимание, что это статус ответа Ajax, а не действителен ли JSON.

Внутренний сервер должен вернуть ответ в правильном (правильно сформированном) JSON, иначе возвращаемый объект будет неопределенным.

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

Я также пробовал его с помощью POST, и он работал.

Function postUrlJsonSync(url, postdata){ var jqxhr = $.ajax({ type: "POST", url: url, data: postdata, dataType: "json", cache: false, async: false }); // "async" has to be "false" for this to work var response = {valid: jqxhr.statusText, data: jqxhr.responseJSON}; return response; }

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

С async: false вы получаете заблокированный браузер. Для неблокирующего синхронного решения вы можете использовать следующее:

ES6/ECMAScript2015

С ES6 вы можете использовать генератор и co library :

Beforecreate: function (node, targetNode, type, to) { co(function*(){ let result = yield jQuery.get("http://example.com/catalog/create/" + targetNode.id + "?name=" + encode(to.inp.value)); //Just use the result here }); }

ES7

С ES7 вы можете просто использовать asyc wait:

Beforecreate: function (node, targetNode, type, to) { (async function(){ let result = await jQuery.get("http://example.com/catalog/create/" + targetNode.id + "?name=" + encode(to.inp.value)); //Just use the result here })(); }

Во-первых, мы должны понимать, когда мы используем $.ajax и когда мы используем $.get/$. post

Когда мы требуем низкого уровня контроля над запросом ajax, таким как настройки заголовка запроса, настройки кеширования, синхронные настройки и т.д., тогда мы должны пойти на $.ajax.

$. get/$. post: Когда мы не требуем низкого уровня контроля над ajax-запросом. Просто просто получайте/отправляйте данные на сервер. Это сокращение

$.ajax({ url: url, data: data, success: success, dataType: dataType });

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

Следовательно, для управления низким уровнем (синхронизация, кеш и т.д.) по запросу ajax мы должны перейти на $.ajax

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

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

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

url запрашиваемой страницы

функция которой будет скормлен результат (необязательный параметр)

Приведу пример JavaScript кода:
// по окончанию загрузки страницы
$(document) . ready(function () {
// вешаем на клик по элементу с id = example-1
$("#example-1" ) . click(function () {
// загрузку HTML кода из файла example.html
$(this) . load("ajax/example.html" ) ;
} )
} ) ;
Пример подгружаемых данных (содержимое файла example.html ):
jQuery.ajax Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр - объект включающий в себя все настройки (выделены параметры которые стоит запомнить):

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

Локальные :

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

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

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

Пример javaScript"а:
$.ajax ({
url: "/ajax/example.html" , // указываем URL и
dataType : "json" , // тип загружаемых данных
success: function (data, textStatus) { // вешаем свой обработчик на функцию success
$.each (data, function (i, val) { // обрабатываем полученные данные
/* ... */
} ) ;
}
} ) ; jQuery.get Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

url запрашиваемой страницы

передаваемые данные (необязательный параметр)

callback функция, которой будет скормлен результат (необязательный параметр)

тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

Отправка Формы Для отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства «сбора» данных из формы лучше использовать плагин jQuery Form Отправка Файлов Для отправки файлов посредством jQuery можно использовать плагин Ajax File Upload иль One Click Upload Примеры использования JSONP Отдельно стоит отметить использование JSONP - ибо это один из способов осуществления кросс-доменной загрузки данных. Если немного утрировать - то это подключение удаленного JavaScript"a, содержащего необходимую нам информациию в формате JSON, а так же вызов нашей локальной функции, имя которой мы указываем при обращении к удаленному серверу (обычно это параметр callback ). Чуть более наглядно это можно продемонстрировать следующая диаграмма (кликабельно):

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

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

Для реализации технологии используется метод $.ajax или jQuery.ajax :

$.ajax(свойства) или $.ajax(url [, свойства])

Второй параметр был добавлен в версии 1.5 jQuery.

url - адрес запрашиваемой страницы;

properties - свойства запроса.

Полный список параметров приведен в документации jQuery.

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

success (функция) - данная функция вызывается после успешного завершения запроса. Функция получает от 1 до 3 параметров (в зависимости от используемой версии библиотеки). Но первый параметр всегда содержит возвращаемые с сервера данные.

data (объект/строка) - пользовательские данные, которые передаются на запрашиваемую страницу.

dataType (строка) - возможные значения: xml, json, script или html. Описание типа данных, которые ожидаются в ответе сервера.

type (строка) - тип запроса. Возможные значения: GET или POST. По умолчанию: GET.

url (строка) - адрес URL для запроса.

Пример 1

Простая передача текста.

$.ajax({ url: "response.php?action=sample1", success: function(data) { $(".results").html(data); } });

Для ответа имеется элемент div .result .

Ждем ответа

Сервер просто возвращает строку:

Echo "Пример 1 - передача завершилась успешно";

Пример 2

Передаем пользовательские данные PHP скрипту.

$.ajax({ type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", success: function(data){ $(".results").html(data); } });

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

Echo "Пример 2 - передача завершилась успешно. Параметры: name = " . $_POST["name"] . ", nickname= " . $_POST["nickname"];

Пример 3

Передача и выполнение кода JavaScript

$.ajax({ dataType: "script", url: "response.php?action=sample3", })

Сервер выполняет код:

Echo "$(".results").html("Пример 3 - Выполнение JavaScript");";

Пример 4

Используем XML. Пример можно использовать для работы с внешними XML, например, RSS фидом.

$.ajax({ dataType: "xml", url: "response.php?action=sample4", success: function(xmldata){ $(".results").html(""); $(xmldata).find("item").each(function(){ $(" ").html($(this).text()).appendTo(".results"); }); } });

Сервер должен возвращать XML код:

Header ("Content-Type: application/xml; charset=UTF-8"); echo

Отправка асинхронных запросов на JQuery. Введение в Ajax Параметр data в ajax запросе

Прошивка explay tornado 4

Как зарегистрировать юридическое лицо на портале госуслуг Как зарегистрировать предприятие на госуслугах

Лучшие программы для мониторинга температуры процессора и видеокарты

Два антивируса на компьютере, почему это плохая затея

Как подключить новую мышь?

Отправка асинхронных запросов на JQuery. Введение в Ajax Параметр data в ajax запросе

Похожие статьи