Ajax-запрос

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

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

$.ajax({ url: "test", context: document.body, success: function(){
  // в данном случае this будет равен document.body
  $(this).addClass("done");
}});

$.ajax({
  statusCode:{
    404:function(){
      alert('Страница не найдена');
    }
  }
});

$.ajax({
   url: a_cross_domain_url,
   xhrFields: {
      withCredentials:true
   }
});

Обработчики событий

Настройки beforeSend, error, dataFilter, success и complete (их описание есть в предыдущем разделе) позволяют установить обработчики событий, которые происходят в определенные моменты выполнения каждого ajax-запроса.

beforeSend происходит непосредственно перед отправкой запроса на сервер.

error происходит в случае неудачного выполнения запроса.

dataFilter происходит в момент прибытия данных с сервера. Позволяет обработать "сырые" данные, присланные сервером.

success происходит в случае удачного завершения запроса.

complete происходит в случае любого завершения запроса.

Пример простого использования. Выведем сообщение при удачном выполнении запроса:

$.ajax({
  url: 'ajax/test',
  success: function(){
    alert('Load was performed.');
  }
});

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

Для некоторых типов запросов, таких как jsonp или кроссдоменных GET-запросов, не предусматривается использование объектов XMLHttpRequest. В этом случае, передаваемые в обработчики XMLHttpRequest и textStatus будут содержать значение undefined.

Внутри обработчиков, переменная this будет содержать значение параметра context. В случае, если он не был задан, this будет содержать объект настроек.

Параметр dataType

Функция $.ajax() узнает о типе присланных сервером данных от самого сервера (средствами MIME). Кроме этого, существует возможность лично указать (уточнить), как следует интерпретировать эти данные. Это делается с помощью параметра dataType. Возможные значения этого параметра:

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

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

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

"json", "jsonp" — полученные данные будут предварительно преобразованы в javascript-объект. Если разбор окажется неудачным (что может случиться, если json содержит ошибки), то будет вызвано исключение ошибки разбора файла. Если сервер, к которому вы обращаетесь, находится на другом домене, то вместо json следует использовать jsonp. Узнать о json и jsonp можно на википедии.

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

Отправка данных на сервер

По умолчанию, запрос к серверу осуществляется HTTP-методом GET. При необходимости сделать запрос методом POST, нужно указать соответствующее значение в настройке type. Данные, отправляемые методом POST будут преобразованы в UTF-8, если они находятся в другой кодировке, как того требует стандарт W3C XMLHTTPRequest.

Параметр data может быть задан либо строкой в формате key1=value1&key2=value2 (формат передачи данных в url), либо объектом с набором пар {имя:значение} — {key1: 'value1', key2: 'value2'}. В последнем случае, перед отправкой данных jQuery преобразует заданный объект в строку, с помощью $.param(). Однако, это преобразование можно отменить, указав в настройке processData значение false. Преобразование в строку нежелательно, например, в случае отправки на сервер xml-объекта. В этом случае, желательно изменить настройку contentType с application/x-www-form-urlencoded на более подходящий mime-тип.

Получение данных с сервера

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

$.ajax({
  url: "some.php",
  success: function(data){
    alert( "Прибыли данные: " + data );
  }
});

Для типов text и xml, присланные сервером данные будут доступны так же и в jqXHR, а именно в его полях responseText или responseXML соответственно.

Продвинутые настройки

Используя параметр global можно отключать выполнение обработчиков событий (.ajaxSend(), .ajaxError() и др.) для отдельных запросов. Это может быть полезно, например в случае, если в этих обработчиках запускается/останавливается анимация загрузки. Тогда если некоторые запросы выполняются очень часто и быстро, то для них полезно будет отключить выполнение обработчиков. Для кроссдоменных script и jsonp запросов параметр global отключается автоматически.

Если для совершения запроса к серверу необходимы данные аутентификации (логин/пароль), то их можно указать в настройках username и password ajax-запроса.

На выполнение запроса к серверу отводится определенное время. Если в течении этого времени сервер не присылает ответ, то запрос завершается с ошибкой (статус "timeout"). Время ожидания ответа от сервера можно изменить, задав необходимое значение (в миллисекундах) в настройке timeout.

Может так случиться, что кодировка хоста отличается от кодировки запрашиваемого в ajax-запросе javascript файла. В таких случаях необходимо указать кодировку последнего в настройке scriptCharset.

В большинстве случаев, ajax-запрос происходит асинхронно, однако в некоторых случаях может понадобиться последовательное выполнение запроса (когда дальнейшее выполнение скрипта невозможно, без получения ответа от сервера). Сделать запрос синхронным можно если отключить настройку async. Однако стоит помнить, что в таком случае станица будет "подвисать" при ожидании ответа от сервера.

Примеры использования

Наиболее простым вариантом использования будет вызов $.ajax() без задания параметров:

$.ajax();
// на сервер будет отправлен GET-запрос на url-адрес текущей страницы и без указания каких-либо параметров.

Если нужно подгрузить и выполнить js-файл, то это можно сделать следующим образом:

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

Сделаем POST-запрос на сервер, указав при этом два параметра и оповестим пользователя о удачно завершенном запросе:

$.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
    alert( "Прибыли данные: " + msg );
  }
});

Обновим содержимое нужной html-страницы:

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

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

// присланные от сервера данные, запишем в переменную html
var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

В качестве параметра, отправим на сервер xml-объект. Для его корректной передачи необходимо отменить предварительное преобразование параметров (processData:false). В качестве обработчика удачного завершения запроса укажем пользовательскую функцию handleResponse:

var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });

Расширенный подход

Начиная с jQuery-1.5 появились три новых направления, позволяющие использовать $.ajax() еще более глубоко. Первый из них (Prefilters) позволяет провести дополнительные манипуляции, непосредственно перед отправкой запроса. С помощью второго подхода (Converters) можно указать jQuery, как следует конвертировать полученные от сервера данные, если они не соответствуют ожидаемому формату. Третий подход (Transports) является наиболее низкоуровневым, он позволяет самостоятельно организовать запрос к серверу.

Prefilters

Этот подход состоит в установке обработчика, вызываемого перед выполнением каждого ajax-запроса. Этот обработчик предшествует выполнению любых других обработчиков ajax. Устанавливается он с помощью функции $.ajaxPrefilter():

$.ajaxPrefilter(function(options, originalOptions, jqXHR){
  // Изменяем настройки (options), проверяем базовые настройки (originalOptions) и объект jqXHR
});

Где
options — настройки текущего запроса,
originalOptions — настройки по умолчанию,
jqXHR — jqXHR-объект данного запроса.

В Prefilters удобно обрабатывать пользовательские настройки (т.е. новые, неизвестные библиотеке настройки, указанные в запросе). Например, можно ввести собственную настройку abortOnRetry, при включении которой незавершенные запросы будут сбрасываться, в случае, если на этот-же url поступает следующий запрос:

var currentRequests = {};
 
$.ajaxPrefilter(function(options, originalOptions, jqXHR){
  if(options.abortOnRetry){
    if(currentRequests[options.url]){
      currentRequests[options.url].abort();
    }
    currentRequests[options.url] = jqXHR;
  }
});

В ajaxPrefilter удобно обрабатывать и существующие настройки. Например так можно изменить кросс-доменный запрос на перенаправленный через сервер своего домена:

$.ajaxPrefilter(function(options){
  if(options.crossDomain){
    options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url );
    options.crossDomain = false;
  }
});

Кроме этого, можно указывать значения dataType на которых сработает prefilter. Так, к примеру, можно указать типы json и script:

$.ajaxPrefilter( "json script", function(options, originalOptions, jqXHR){
  // Изменяем настройки (options), проверяем базовые настройки (originalOptions) и объект jqXHR
});

И наконец, можно изменить значение dataType, вернув необходимое значение:

$.ajaxPrefilter(function(options){
  // изменим dataType на script, если url соответствует определенным условиям
  if (isActuallyScript(options.url)){
    return "script";
  }
});

Такой подход гарантирует не только то, что запрос изменит свой тип на script, но и то, что остальные prefilter-обработчики с указанием этого типа в первом параметре, будут также выполнены.

Converters

Этот принцип заключается в установке обработчика, который сработает, если указанный в настройках dataType не совпадет с типом данных, присланных сервером.

Converters является настройкой ajax, поэтому может быть задан глобально:

// так можно задать обработчик, который сработает, если вместо
// указанного вами в dataType типа mydatatype придут данные типа text
$.ajaxSetup({
  converters:{
    "text mydatatype":function( textValue ){
      if(valid( textValue )){
        // обработка переданного текста
        return mydatatypeValue;
      } else {
        // если присланные сервером данные совсем не соответствуют ожидаемым,
        // можно вызвать исключение.
        throw exceptionObject;
      }
    }
  }
});

Converters поможет при введении собственного (пользовательского) dataType. Важно отметить, что в названии такого dataType должны использоваться только строчные буквы! Запрос данных, упомянутого выше типа "mydatatype", мог бы выглядеть следующим образом:

$.ajax( url,{
  dataType:"mydatatype"
});

Converters может быть задан и не глобально (т.е. для конкретного запроса). В следующем примере, будет продемонстрирован запрос к серверу, ответ от которого должен будет прийти в xml, после чего конвертирован в обычный текст (способ конвертации будет задан нами в параметре converters и будет действовать только для этого запроса), а из текста в "mydatatype" (используя заданный глобально converters):

$.ajax( url, {
  dataType: "xml text mydatatype",
  converters: {
    "xml text": function( xmlValue ) {
      // здесь будут вытащены нужные текстовые данные из предоставленного xml
      return textValue;
    }
  }
});