Функция $.ajax()

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

$.ajax(<Объект с опциями>)

Функция возвращает ссылку на объект XMLHttpRequest. Единственный параметр представляет собой объект, состоящий из пар "опция/значение". Могут быть указаны следующие опции.

  • url — URL-адрес обработчика на сервере.
  • type — метод передачи данных (GET (значение по умолчанию) или POST).
  • data — данные, которые будут переданы на сервер. Параметры и значения должны быть указаны следующим образом.
{
   Параметр1: "Значение1",
   Параметр2: "Значение2",
   ...
   ПараметрN: "ЗначениеN"
}

В случае если параметры или значения содержат запрещенные символы, то они будут автоматически перекодированы с помощью метода encodeURIComponent(). В качестве значения опции data можно также указать сформированную строку запроса. В этом случае заботиться о допустимости символов необходимо самим.

txt=%D0%A2%D0%B5%D0%BA%D1%81%D1%82&id=80
  • dataType — ожидаемый тип данных в ответе сервера. Если опция не указана, то тип будет определяться автоматически по MIME-типу в заголовках ответа сервера. Можно указать следующие типы данных.
  • text — простой текст; ответ будет получен через свойство responseText.
  • html — HTML-документ; ответ будет получен через свойство responseText.
  • xml — XML-документ; ответ будет получен через свойство responseXML объекта XMLHttpRequest. Свойство будет доступно, только если в заголовках ответа сервера указан MIME-тип application/xml или text/xml. Кроме того, XML-документ должен быть иметь правильную структуру и соответствовать спецификации DOM.
  • script — JavaScript-код; после получения код исполняется в глобальном контексте. Если данные были получены с того же домена, то внутри функции, указанной в опции success, будут доступны данные в виде обычного текста. Данные также могут быть получены с другого домена. В случае получения данных с другого домена, внутри функции, указанной в опции success, данные будут иметь значение undefined. Кроме того, следует учитывать, что при загрузке данных с другого домена, функция, указанная в опции success, будет вызвана независимо от результата.
  • json — ответ в формате JSON; после получения данные автоматически выполняются с помощью функции eval(), и JSON-объект становится доступным внутри функции, указанной в опции success.
  • jsonp — ответ в формате JSONP; данные могут быть получены с другого домена. Чтобы отправить данные в этом формате, необходимо после параметров в URL-адресе указать конструкцию: <Параметр>=?. Название параметра может быть произвольным. Если в конце запроса указан вопросительный знак, то данные будут отправлены не с помощью технологии AJAX, а путем создания тега <script> с указанием URL-адреса в параметре src. Вместо вопросительного знака будет вставлено произвольное значение. Значение из конструкции <Параметр> необходимо указать перед данными в формате JSON в скрипте на сервере. Сами данные указываются внутри круглых скобок.
  • async — тип запроса. Могут быть заданы следующие значения.
  • true — асинхронный запрос (выполнение текущего скрипта не приостанавливается до получения ответа); значение по умолчанию.
  • false — синхронный запрос (выполнение текущего скрипта будет продолжено только после получения ответа сервера).
  • cache — управление кешированием. Опция имеет смысл только при запросах методом GET. Могут быть заданы следующие значения.
  • true — ответ может быть помещен в кеш веб-браузера. Если в заголовках ответа сервера указано запрещение кеширования, то данные не будут помещены в кеш.
  • false — запрещение кеширования. Если указано это значение, то к строке запроса будет добавлен параметр _=<Случайное число>.
GET /ajax.php?_=1247862154453&txt=5 HTTP/1.1
  • timeout — максимальное время выполнения запроса в миллисекундах.
  • contentType — позволяет указать значение заголовка Content-Type. По умолчанию при запросах методом POST имеет значение application/x-www-form-urlencoded.
  • processData — если указано значение false, то данные, указанные в опции data, не будут преобразовываться в строку запроса. Например, можно передать массив.
$.ajax({
   url: "/ajax.php",
   data: [1,2,3],
   dataType: "text",
   processData: false,
   success: function(data) {
      alert(data);
   }
});

В результате строка запроса будет выглядеть так.

GET /ajax.php?1,2,3 HTTP/1.1

Если опция имеет значение true или не указана, то результат будет другим.

GET /ajax.php?undefined=undefined&undefined=undefined
&undefined=undefined HTTP/1.1
  • ifModified — если указать значение true, то запрос будет успешным только в том случае, если данные изменились. Для этого в первом запросе будет добавлен следующий заголовок.
If-Modified-Since: Thu, 01 Jan 1970 00:00:00 GMT

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

If-Modified-Since: Sun, 25 Jan 2009 23:48:56 GMT

Если сервер вернет код статуса 304 (документ без изменений), то функция, указанная в опции success, вызвана не будет.

  • jsonp — позволяет указать название параметра для JSONP-запроса. При указании этой опции нет необходимости в конструкции <Параметр>=?.
$.ajax({
   url: "http://site1/ajax.php",
   data: "txt=test",
   dataType: "jsonp",
   jsonp: "callback",
   success: function(data) {
      alert(data.param1);
   }
});

Строка запроса будет выглядеть следующим образом.

GET /ajax.php?callback=jsonp1247869542750&_=1247869544031
&txt=test HTTP/1.1
  • scriptCharset — позволяет указать кодировку данных при значениях опции dataType, равных "jsonp" или "script".
  • username — логин для HTTP-авторизации.
  • password — пароль для HTTP-авторизации.
  • beforeSend — ссылка на функцию, которая будет вызвана до передачи запроса на сервер. С помощью этой функции можно, например, добавить или изменить заголовки запроса. Формат функции:
function <Название функции>(<Объект XMLHttpRequest>) {
   // ...
}

В качестве примера изменим значение заголовка User-Agent.

beforeSend: function(obj) {
   obj.setRequestHeader("User-Agent", "MyRobot");
}
  • dataFilter — ссылка на функцию, которая будет вызвана сразу после получения ответа с сервера, но до обработки данных с помощью jQuery. Внутри функции необходимо возвращать обработанные данные. Формат функции:
function <Название функции>(<Данные>[, <Тип данных>]) {
   // Обрабатываем данные
   return <Данные>; // Возвращаем обработанные данные
}
  • complete — ссылка на функцию, которая будет вызвана по окончании запроса, независимо от успешности его выполнения. Формат функции:
function <Название функции>(<Объект XMLHttpRequest>[, 
                            <Статус>]) {
   // ...
}
  • success — ссылка на функцию, которая будет вызвана в случае успешного выполнения запроса. Формат функции:
function <Название функции>(<Данные>[, <Статус>]) {
   // ...
}

Через параметр <Данные> доступны данные, обработанные с учетом значения опции dataType.

  • error — ссылка на функцию, которая будет вызвана при ошибке. Формат функции:
function <Название функции>([<Объект XMLHttpRequest>[, 
    <Текст ошибки>[, <Исключение>]]]) {
   // ...
}

Параметр <Текст ошибки> может возвращать следующие значения: null, "timeout", "error", "notmodified" или "parsererror". Параметр <Исключение> позволяет получить информацию об ошибке при значении null в параметре <Текст ошибки>. Например, в веб-браузере Opera при обращении к другому домену в параметре <Исключение> будет следующее значение:

[Error:
name: Error
message: Security violation
]

Все указанные опции можно указать в функции $.ajaxSetup(). В этом случае это будут значения по умолчанию для всех запросов. Формат функции:

$.ajaxSetup(<Объект с опциями>)

Рассмотрим пример.

$.ajaxSetup({                  // Запрос методом GET
   url: "/ajax.php",           // URL-адрес
   dataType: "html",           // Тип возвращаемых данных
   cache: false,               // Запрет кеширования
   success: function(data) {   // При удачном запросе
      alert(data);
   },
   error: function(obj, err) { // При ошибке
      alert("Ошибка: " + err);
   }
});
$.ajax({ // Все опции запроса указаны в $.ajaxSetup()
   data: { id:1, txt:"Данные" } // Передаваемые данные
});

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе