Jquery — использование сокращённых ajax методов (с примерами)

HTTP-заголовки

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

Для работы с HTTP-заголовками есть 3 метода:

Устанавливает заголовок name запроса со значением value .

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

Это ограничение существует в целях безопасности и для контроля корректности запроса.

Особенностью XMLHttpRequest является то, что отменить setRequestHeader невозможно.

Повторные вызовы лишь добавляют информацию к заголовку, например:

Возвращает значение заголовка ответа name , кроме Set-Cookie и Set-Cookie2 .

Возвращает все заголовки ответа, кроме Set-Cookie и Set-Cookie2 .

Заголовки возвращаются в виде единой строки, например:

Между заголовками стоит перевод строки в два символа »
» (не зависит от ОС), значение заголовка отделено двоеточием с пробелом «: » . Этот формат задан стандартом.

Таким образом, если хочется получить объект с парами заголовок-значение, то эту строку необходимо разбить и обработать.

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

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

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

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

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

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

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

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

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

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

Более сложный пример ajax-запроса через jQuery

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

$.ajax({
  url: '<url-адрес>',
  type: 'post',
  data: '<отправляемые_данные>', // можно строкой, а можно, например, так: $('input, input:checked, input:checked, select, textarea')
  dataType: 'json',
  beforeSend: function() {
    $('#sendajax').button('loading');
  },
  complete: function() {
    $('#sendajax').button('reset');
  },
  success: function(json) {
    // какие-то действия с полученными данными
  },
  error: function(xhr, ajaxOptions, thrownError) {
    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
  }
});

Кнопка отправки данных:

<button class="btn btn-primary" data-loading-text="Отправка..." id="sendajax" type="button">Отправить</button>

В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на «Отправка…» и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на «Отправить», становится активной). Ответ получается в виде json-данных.

Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:

url	Адрес отправки ajax-запроса
type	Способ отправки запроса GET или POST
data	Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&…, объект jQuery, например, $(‘input’) или другие данные.
dataType	Тип получаемых от сервера данных. Может быть html, json, text, script и xml.
cache	Кэширование браузером запроса (false — не кэшировать).
async	Асинхронное выполнение запроса, т.е. программа продолжает выполняться не дожидаясь ответа сервера. Если указать false, то запрос будет выполнен синхронно, при этом страница не будет ни на что реагировать, пока не будет получен ответ от сервера.
processData	Преобразование отправляемых данных в url-формат. Если нужно чтобы данные не преобразовывались, установить в false. Например, при отправке изображения на сервер или xml-данных.
contentType	Тип передаваемых данных, по умолчанию «application/x-www-form-urlencoded; charset=utf-8». Если указать false, то в заголовке не будет передаваться тип, что может быть необходимо, например, при отправке изображения на сервер.
beforeSend	Функция, выполняемая перед отправкой ajax-запроса.
complete	Функция, выполняемая после получения ответа от сервера (любого, успешного или нет).
success	Функция, выполняемая при удачном выполнении запроса.
error	Функция, выполняемая в случае ошибки.

Ниже приведу еще несколько примеров использования ajax-запросов.

jQuery синтаксис:

Синтаксис 1.0:

$.post( url, data, success, dataType );

url - String
data - PlainObject, или String 
success - Function( PlainObject data, String textStatus, jqXHR jqXHR )
dataType - String

Синтаксис 1.12/2.2:

$.post( {settings} ); // параметры запроса передаются в объекте

settings - PlainObject

Страницы, загруженные функцией $.post() никогда не кэшируются, по этой причине значения параметров cache (определяет будут ли кэшироваться страницы, по умолчанию true) и ifModified (проверяет поля заголовка Last-Modified, по умолчанию false) jQuery функции .ajaxSetup() (устанавливает значения по умолчанию для будущих запросов AJAX) не повлияют на эти запросы.

jQuery.get( url [, data ] [, success ] [, dataType ] )Возвращает: jqXHR

Описание: Загружает данные с сервера при помощи HTTP GET запроса

• • url
    Тип:

    Строка содержащая URL-адрес куда будет отправлен запрос.

  • data
    Тип: или

    Плоский объект или строка, которая будет отправлена на сервер с запросом.

  • success
    Тип: ( data, textStatus, jqXHR )
    Функция обратного вызова, выполняемая если запрос успешен. Требуется если предоставлен , но Вы можете использовать значение или .

  • dataType
    Тип:

    Тип данных ожидаемый с сервера. Используются по умолчанию: xml, json, script, text, html в зависимости от заданного URL-адреса.

• Ассоциативный массив (ключ/значение) настраивающий Ajax. Все поля кроме url не обязательны и могут быть установлены по умолчанию припомощи метода $.ajaxSetup(). Полный список параметров смотрите в описании метода jQuery.ajax( settings ). Метод запроса автоматически будет установлен в значение GET.

Это сокращенная функция Ajax, эквивалентна коду:

1 2 3 4 5 6

The callback function is passed the returned data, which will be an XML root element, text string, JavaScript file, or JSON object, depending on the MIME type of the response. It is also passed the text status of the response.

As of jQuery 1.5, the callback function is also passed a (in jQuery 1.4, it was passed the object). However, since JSONP and cross-domain GET requests do not use XHR, in those cases the and parameters passed to the success callback are undefined.

Most implementations will specify a success handler:

1 2 3 4

This example fetches the requested HTML snippet and inserts it on the page.

The jqXHR Object

As of jQuery 1.5, all of jQuery’s Ajax methods return a superset of the object. This jQuery XHR object, or «jqXHR,» returned by implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information). The (for success), (for error), and (for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the section of the documentation.

The Promise interface also allows jQuery’s Ajax methods, including , to chain multiple , , and callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

Deprecation Notice

The , , and callback methods are removed as of jQuery 3.0. You can use , , and instead.

• Due to browser security restrictions, most «Ajax» requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
• If a request with jQuery.get() returns an error code, it will fail silently unless the script has also called the global .ajaxError() method. Alternatively, as of jQuery 1.5, the method of the object returned by jQuery.get() is also available for error handling.
• Script and JSONP requests are not subject to the same origin policy restrictions.

jQuery post form data using .ajax() method

This is a great way to show someone that you are now an AJAX programmer. Because of this .ajax() piece of code in your HTML page, you may now face the world with confidence and with a beautiful smile in your face.

Just kidding. But seriously, this piece of code is useful.

<html>
    <head>
        <title>jQuery post form data using .ajax() method by codeofaninja.com</title>
        
    </head>
<body>

<h1>jQuery post form data using .ajax() method</h1>
<div>Fill out and submit the form below to get response.</div>

<!-- our form -->   
<form id='userForm'>
    <div><input type='text' name='firstname' placeholder='Firstname' /></div>
    <div><input type='text' name='lastname' placeholder='Lastname' /></div>
    <div><input type='text' name='email' placeholder='Email' /></div>
    <div><input type='submit' value='Submit' /></div>
</form>

<!-- where the response will be displayed -->
<div id='response'></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
    $('#userForm').submit(function(){
    
        // show that something is loading
        $('#response').html("<b>Loading response...</b>");
        
        /*
         * 'post_receiver.php' - where you will pass the form data
         * $(this).serialize() - to easily read form data
         * function(data){... - data contains the response from post_receiver.php
         */
        $.ajax({
            type: 'POST',
            url: 'post_receiver.php', 
            data: $(this).serialize()
        })
        .done(function(data){
            
            // show the response
            $('#response').html(data);
            
        })
        .fail(function() {
        
            // just in case posting your form failed
            alert( "Posting failed." );
            
        });

        // to prevent refreshing the whole page page
        return false;

    });
});
</script>

</body>
</html>

Performing GET Request with AJAX using jQuery

The following example uses the jQuery method to make an Ajax request to the «date-time.php» file using HTTP GET method. It simply retrieves the date and time returned from the server and displays it in the browser without refreshing the page.

Try this code

Here’s our «date-time.php» file that simply output the current date and time of the server.

Tip: If you face any difficulty while running these examples locally on your PC, please check out the tutorial on jQuery Ajax load for the solution.

You can also send some data to the server with the request. In the following example the jQuery code makes an Ajax request to the «create-table.php» as well as sends some additional data to the server along with the request.

Try this code

Here’s the PHP script of our «create-table.php» file that simply output the multiplication table for the number entered by the user on button click.

Что такое асинхронный запрос AJAX

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

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

Значение свойства readyState	Описание
запрос не инициализирован
1	выполнена настройка запроса
2	запрос отправлен
3	запрос находится в процессе обработки на сервере
4	запрос завершён

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

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

Продвинутое использование

$.post() является сокращенным вариантом функции $.ajax(), вызванной со следующими параметрами:

$.ajax({
  url url,
  type "POST",
  data data,
  success success,
  dataType dataType
});

Подробности использования параметра dataType можно найти в описании .

Замечание: большинство браузеров не позволяют проводить ajax-запросы на ресурсы с доменами, поддоменами и протоколами, отличными от текущего. Однако, это ограничение не распространяется на запросы типа jsonp и script.

Обработка выполнения запроса

Стандартным средством обработки успешного выполнения запроса, является указание собственной функции в параметре success. При вызове она получает данные переданные сервером, текстовый статус выполнения запроса, а так же Объект jqXHR.

Начиная с jQuery-1.5, метод $.post() возвращает объект jqXHR, который помимо прочего реализует интерфейс deferred, что позволяет задавать дополнительные обработчики выполнения. Помимо стандартных для объекта deferred методов .done(), .fail() и .then(), с помощью которых можно устанавливать обработчики, в jqXHR реализованы .success(), .error() и .complete(). Это сделано для соответствия привычным названиям методов, с помощью которых устанавливаются обработчики выполнения ajax-запросов. Однако начиная с jQuery-1.8 эти три метода станут нежелательными для использования.

  // Запустим ajax-запрос, установим обработчики его выполнения и
  // сохраним объект jqxhr данного запроса для дальнейшего использования.
  var jqxhr = $.post("example.php")
  .success(function() { alert("Успешное выполнение"); })
  .error(function() { alert("Ошибка выполнения"); })
  .complete(function() { alert("Завершение выполнения"); });
 
  // какой-либо код...
 
  // установим еще один обработчик удачного выполнения запроса
  jqxhr.complete(function(){ alert("Успешное выполнения 2"); });

Простое использование

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

$.get("/plusOne.php");

Рассмотрим более сложное взаимодействие с сервером. Отправим данные на сервер и обработаем их. Javascript будет выглядеть следующим образом:

// На сервер будет отправлен запрос страницы http://hostname/ajaxtest.php и указаны два параметра.  
// После получения ответа от сервера будет вызвана функция onAjaxSuccess, которая выведет 
// на экран сообщение с данными, присланными сервером.
$.get(
  "/ajaxtest.php",
  {
    param1 "param1",
    param2 2
  },
  onAjaxSuccess
);
 
function onAjaxSuccess(data)
{
  // Здесь мы получаем данные, отправленные сервером и выводим их на экран.
  alert(data);
}

На сервере, обработка Ajax запроса ничем не отличается от обработки обычного запроса:

<?php
  // файл http://hostname/ajaxtest.php
  echo "Получены параметры с сервера: param1 = ".$_GET'param1'." и param2 = ".$_GET'param2';
?>

В результате этого запроса, на странице появится табличка с текстом «Получены параметры с сервера: param1 = param1 and param2 = 2»

Объект jqXHR

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

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

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

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

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

В этом примере мы сохраняем результат, возвращаемый методом ajax(), а затем используем метод setInterval() для вывода информации о запросе каждые 100 мс

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

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

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

IE8,9: XDomainRequest

В IE8 и IE9 поддержка XMLHttpRequest ограничена:

• Не поддерживаются события, кроме onreadystatechange .
• Некорректно поддерживается состояние readyState = 3 : браузер может сгенерировать его только один раз во время запроса, а не при каждом пакете данных. Кроме того, он не даёт доступ к ответу responseText до того, как он будет до конца получен.

Дело в том, что, когда создавались эти браузеры, спецификации были не до конца проработаны. Поэтому разработчики браузера решили добавить свой объект XDomainRequest , который реализовывал часть возможностей современного стандарта.

А обычный XMLHttpRequest решили не трогать, чтобы ненароком не сломать существующий код.

Мы подробнее поговорим про XDomainRequest в главе XMLHttpRequest: кросс-доменные запросы. Пока лишь заметим, что для того, чтобы получить некоторые из современных возможностей в IE8,9 – вместо new XMLHttpRequest() нужно использовать new XDomainRequest .

Теперь в IE8,9 поддерживаются события onload , onerror и onprogress . Это именно для IE8,9. Для IE10 обычный XMLHttpRequest уже является полноценным.

IE9- и кеширование

Обычно ответы на запросы XMLHttpRequest кешируются, как и обычные страницы.

Но IE9- по умолчанию кеширует все ответы, не снабжённые антикеш-заголовком. Другие браузеры этого не делают. Чтобы этого избежать, сервер должен добавить в ответ соответствующие антикеш-заголовки, например Cache-Control: no-cache .

Впрочем, использовать заголовки типа Expires , Last-Modified и Cache-Control рекомендуется в любом случае, чтобы дать понять браузеру (не обязательно IE), что ему следует делать.

Альтернативный вариант – добавить в URL запроса случайный параметр, предотвращающий кеширование.

Например, вместо xhr.open(‘GET’, ‘service’, false) написать:

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

Метод jQuery $. POST ()

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

Синтаксис:

$.post(URL,data,callback);

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

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

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

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

Пример

$(«button»).click(function(){
    $.post(«demo_test_post.php»,
    {
        name: «Donald Duck»,
        city: «Duckburg»
    },
    function(data, status){
        alert(«Data: » + data + «\nStatus: » + status);
    });
});

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

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

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

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

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

<%
dim fname,city
fname=Request.Form(«name»)
city=Request.Form(«city»)
Response.Write(«Dear » & fname & «. «)
Response.Write(«Hope you live well in » & city & «.»)
%>

Определение и применение

jQuery функция $.get() позволяет загрузить данные с сервера с помощью HTTP запроса методом GET. Для загрузки данных с помощью HTTP запроса методом POST вы можете воспользоваться jQuery функцией $.post().

Обращаю Ваше внимание, что функция $.get() является сокращенной версией функции $.ajax() со следующими параметрами:

$.ajax({
  url: "url", // строка, содержащая URL адрес, на который отправляется запрос
  data: data, // данные, которые будут отправлены на сервер
  success: success, // функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно
  dataType: "dataType" // тип данных, который вы ожидаете получить от сервера	
});

Метод GET в отличии от POST при отправке формы передает собранную информацию как часть URL:

url?name=value&name=value // метод GET использует пары имя = значение

При отправке данных методом POST данные передаются таким образом, что пользователь уже не видит передаваемые обработчику формы данные (добавляет данные формы в теле запроса http, которые не отображаются в URL).

Обратите внимание на некоторые нюансы при работе с HTTP методами GET и POST:

• Метод GET ограничивает объём передаваемой в URL информации (около 3000 символов), метод POST не имеет подобных ограничений.
• Никогда не используйте метод GET, если вам необходимо передать конфиденциальные данные (например, пароль пользователя, так как он будет передан в строке URL — в открытом виде).
• Страница, сгенерированную методом GET, можно пометить закладкой (адрес страницы всегда будет уникальный), а страницу, сгенерированную метод POST нельзя, так как адрес страницы не изменяется (данные в URL не передаются).
• Учтите, что с использованием метода GET можно передать данные не через форму, а через URL страницы.

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

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

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

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

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

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

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

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

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

jQuery.post( url [, data ] [, success ] [, dataType ] )Возвращает: jqXHR

Описание: Загружает данные с сервера при помощи HTTP POST запроса.

• • url
    Тип:

    Строка с URL адресом, на который будет отправлен запрос.

  • data
    Тип: или

    Объект или строка, которые будут отправлены на сервер вместе с запросом.

  • success
    Тип: ( data, textStatus, jqXHR )
    Функция обратного вызова, которая выполняется если запрос успешно завершается. Требуется если указан аргумент , но может быть задан как в таком случае.

  • dataType
    Тип:

    Тип данных ожидаемый от сервера. По умолчанию: распознается по полю Content-Type заголовка ответа сервера, поддерживаются: xml, json, script, text, html.

• Ассоциативный массив с настройками Ajax запроса. Все параметры опциональны, исключая url. Значения по умолчанию могут быть установлены при помощи метода $.ajaxSetup(). Смотрите подробнее описание всех возможных параметров на странице jQuery.ajax( settings ). Тип запроса автоматически будет установлен в значение POST.

Это сокращенная Ajax функция, которая эквивалентна следующему коду:

1 2 3 4 5 6 7

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

Начиная с jQuery 1.5, в функцию также передается (в jQuery 1.4 и ранее, передавался объект ).

В большинстве случаев обработчик success указывают:

1 2 3

В это примере полученный из запроса HTML код вставляется в элемент на странице.

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

Объект jqXHR

Начиная с jQuery 1.5, все Ajax методы jQuery возвращают объект . Объект jQuery XHR или «jqXHR,» возвращается реализацией интерфейса Promise и предоставляет все его свойства, меоды и повередени Promise в целом (смотрите Deferred object для справки). Методы (успех), (ошибка), and (для гарантированного обработчика, не зависимо от успеха или ошибки ответа, добавлен в версии jQuery 1.6) принимают функцию, которая вызывается когда запрос завершается. Аргументы этих функция описаны на странице в разделе справки.

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

Уведомление об устаревании

Функции обратного вызова , , and удалены в jQuery 3.0. Используйте методы , и вместо них.

• Если запрос jQuery.post() возвращает код ошибки, то он будет выполнен тихо, до тех пор пока не будет вызван глобальный .ajaxError() метод. В качестве альтернативы, начина с jQuery 1.5, метод в объекте возвращаемый jQuery.post() также доступен для обработки ошибок.

jQuery post form data using .post() method

.post() method has a more descriptive syntax, it is a shorthand of .ajax() method above. See how it was commonly used with the code below:

<html>
    <head>
        <title>jQuery post form data using .post() method by codeofaninja.com</title>
        
    </head>
<body>

<h1>jQuery post form data using .post() method</h1>
<div>Fill out and submit the form below to get response.</div>

<!-- our form -->   
<form id='userForm'>
    <div><input type='text' name='firstname' placeholder='Firstname' /></div>
    <div><input type='text' name='lastname' placeholder='Lastname' /></div>
    <div><input type='text' name='email' placeholder='Email' /></div>
    <div><input type='submit' value='Submit' /></div>
</form>

<!-- where the response will be displayed -->
<div id='response'></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
    $('#userForm').submit(function(){
    
        // show that something is loading
        $('#response').html("<b>Loading response...</b>");
        
        /*
         * 'post_receiver.php' - where you will pass the form data
         * $(this).serialize() - to easily read form data
         * function(data){... - data contains the response from post_receiver.php
         */
        $.post('post_receiver.php', $(this).serialize(), function(data){
            
            // show the response
            $('#response').html(data);
            
        }).fail(function() {
        
            // just in case posting your form failed
            alert( "Posting failed." );
            
        });

        // to prevent refreshing the whole page page
        return false;

    });
});
</script>

</body>
</html>

Параметр dataType

«xml» — полученный xml-документ будет доступен в текстовом виде. С ним можно работать стандартными средствами jQuery (также как и с документом html).

«html» — полученный html будет доступен в текстовом виде. Если он содержит скрипты в тегах <script>, то они будут автоматически выполнены, только когда html-текст будет помещен в DOM.

«script» — полученные данные будут исполнены как javascript. Переменные, которые обычно содержат ответ от сервера будут содержать объект jqXHR.

«text» — полученные данные окажутся доступными в виде обычного текста, без предварительной обработки.

Замечание 1: когда запрос отправляется на сторонний домен (что возможно только с dataType равным jsonp или script), обработчики ошибки выполнения (error), а так же не сработают.

Замечание 2: тип данных, заданный в dataType не должен противоречить предоставляемой сервером MIME-информации. Например, xml-данные должны быть представлены сервером как text/xml или application/xml. Если это не будет выполнено, jquery попытается конвертировать полученные данные в указанный тип (подробнее об этом в разделе ).