Асинхронные ajax-запросы

Термин ajax появился в 2005 году как акроним словосочетания Asynchronous JavaScript And XML (асинхронный JavaScript и XML). Многие разработчики отнесли данный термин к сомнительным, поскольку они уже использовали подобный подход для взаимодействия с сервером, но зачастую без технологии, определенный в данном акрониме. В конечном счете, сегодня под термином AJAX понимается любая технология, позволяющая из браузера выполнять запросы к серверу, не затрагивая открытую WEB-страницу.

Обычно при взаимодействии с сервером без AJAX пользователь щелкает по ссылке или кнопке, отправляя заполненную форму на сервер; это сопровождается выполнением запроса к серверу. Сервер реагирует на запрос, возвращая пользователю новую WEB-страницу, которую браузер должен загрузить и отобразить на экране. Даже, если в результате выполнения данного запроса необходимо разблокировать или обновить несколько полей формы, сервер вернёт браузеру новую страницу. И пока сервер будет формировать новую страницу, а потом браузер будет её загружать, пользователю придется ждать.

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

На странице рассмотрено описание метода ajax, определение глобальных настроек методом ajaxSetup, список ajax-настроек и приведены примеры ajax-запросов.

Описание метода ajax

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

jQuery.ajax(url,[settings]);
jQuery.ajax(settings);
 

• url : строка определения URL, куда будет отправлен запрос (адрес запроса);
• settings : набор значений типа key/value, «завёрнутые» в фигурные скобки и представленные в формате литерала объекта. Значения settings определяют конфигурацию запроса, ни одна из настроек не является обязательной. По умолчанию настройки можно установить с помощью метода $.ajaxSetup().о

Отличие второго метода от первого связан с отсутствием url, который может быть определен значениями по умолчанию с использованием метода $.ajaxSetup()

jQuery.ajaxSetup(options);
 

$.ajaxSetup({
   url: "java-online.ru",
   type: "POST",
   global: false,
});

Примечание : на странице Интеграция JSP и jQuery приведены 2 примера использования метода ajax для отправки запросов сервлету на сервер. В примерах продемонстрировано определение параметра URL.

$.ajax({
  accepts: {
    customtype: 'application/x-some-custom-type'
  },
  // Инструкция по десериализации 'customtype'
  converters: {
    'text customtype': function(result) {
      // Do Stuff
      return newresult;
    }
  },
  // от сервера ожидается 'customtype'
  dataType: 'customtype'
});

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

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

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

$.ajax({
  url: "https://ajax-home.net/test.html",
  success: function() {
      alert('Успешное завершение запроса.');
  }
});

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

$.ajax({
  url: "https://ajax-home.net/test.html",
  beforeSend: function(xhr) {
    xhr.overrideMimeType("text/plain;charset=x-user-defined");
  }
}).done(function(data) {
    console.log( "Пример данных : ", data.slice(0, 100));
});

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

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

Выполнение ajax-запроса

Пример наиболее простого варианта вызова ajax-запроса без задания параметров : $.ajax(). Значения по умолчанию определены глобально с использованием $.ajaxSetup().

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

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

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

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

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

Выполнение запросов ajax происходит асинхронно. Если необходимо выполнить синхронный ajax-запрос, то следует отключить настройку async. В этом случае при ожидании ответа от сервера страница будет "подвисать".

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

Получение ответа от сервера

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

$.ajax({
    url: "https://ajax-home.net/test.html",
    success: function(data){
        alert("Получены следующие данные: " + data);
    }
});
 

Полученные от сервера данные типов text и xml будут доступны также и в jqXHR; в полях responseText и responseXML соответственно.

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

$.ajax({
    type: "POST",
    url: "test.php",
    data: {firstName : "John",
	       lastName : "Conner"},
    success: function(txt){
        alert(Поступили данные: " + txt);
    }
});

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

let code = $.ajax({
  url: "test.php",
  async: false
 }).responseText;

var xmlDoc = [create xml-document];
var xmlRequest = $.ajax({
  url: "test.php",
  processData: false,
  data: xmlDoc
});
 
xmlRequest.done (handleResponse);

let menuId = $("ul.nav").first().attr("id");
let request = $.ajax({
    url: "script.php",
    method: "POST",
    data: { id : menuId },
    dataType: "html"
});
 
request.done(function( msg ) {
    $("#log").html(msg);
});
 
request.fail(function(jqXHR, textStatus) {
    alert("Запрос не выполнен : " + textStatus);
});

$.ajaxSetup({
    converters: {
        "mydatatype json": function(result) {
            // Do stuff
            return newresult;
        }
    }
});
 

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