Theory and Tasks for Students - Spring 2019
AJAX в jQuery

Обычно при загрузке страницы браузер сам отправляет запросы - в основном GET для загрузки документа и дополнительных файлов. При отправлении данных формы можно указать метод POST, но в любом случае происходит окрытие целевого адреса и загрузка новой страницы.
AJAX (Asynchronous Javascript And Xml) - технология, позволяющая с помощью Javascript отправлять HTTP-запросы без перезагрузки страницы - отсюда и асинхронность. Нативными средставми это делается при помощи объектов класса XMLHttpRequest (XHR), в jQuery этот объект спрятан за несколькими методами, предоставляющими более лаконичный и удобный синтаксис с тем же функционалом.

Один из простых методов - $(selector).load(url, data, callback). Он записывает в выбранные селектором элементы данные, получамые по адресу url. Если необходимо, можно передать второй аргумент data - дополнительные данные для сервера. Если был передан объект, то тип запроса будет POST, в противно случае - GET. Кроме того, можно указать третий аргумент callback - функцию, которая будет выполнена после получения ответа от сервера. Эта функция может принимать до трёх аргументов: responseText - строка, полученная от сервера; status - одна из строк success | notmodified | error | timeout | parsererror; xhr - jQuery объект XMLHttpRequest, использовавшийся для этого запроса.

В случае, если не нужно записывать полученные данные в какой-либо элемент, можно использовать функции $.get(url, data, callback, dataType) и $.post(url, data, callback, dataType). Аргументы те же самые, что у load(), а аргумент dataType - одна из строк, сообщающая jQuery, как необходимо интерпретировать ответ сервера:

  • text - строка текста, без дополнительной обработки;
  • xml, html - будет создан объект документа соответствующего типа;
  • json - будет создан объект Javascript из его текстовой записи;
  • script - данные будут выполнены как скрипт, небезопасно;
  • jsonp - данные будут выполнены как скрипт, содержащий только описание объекта в качестве аргумента специальной глобальной фукнции, небезопасно;

Все AJAX запросы ограничиваются "политикой одинакового источника" (Same Origin Policy) - это ограничение не позволяет получать ответ с домена, отличного от домена источника. Т.е. страница сайта example.com не сможет получить ответ c адреса ex.com, если последний не разрешает обмен, используя CORS (Cross Origin Resource Sharing). Запросы к данным типа script и jsonp реализуется нескольки другим способом, с помощью самого тега <script>, и ограничению на источники не подвержен.

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

  • async - true | false, определяет, будет ли запрос отправлен асинхронно относительно потока выполнения Javascript или нет;
  • cache - true | false, определяет, будет ли результат запроса кеширован или нет;
  • data - данные, передаваемые серверу;
  • dataType - интерпретация получаемых от сервер данных;
  • url - адрес запроса;
  • type - "get" | "post", тип запроса;
  • context - объект this для функций обратного вызова(callbacks);
  • contentType - строка, по умолчанию "application/x-www-form-urlencoded; charset=UTF-8", определяет способ "упаковки" отправляемых данных;
  • timeout - число, обозначающее время в милисекундах, по истечению которого будет считаться, что сервер не ответил;
  • url - адрес запроса;
  • beforeSend - function(xhr, settings), выполнится непосредственно перед отправлением запроса;
  • success - function(data, status, jqxhr), выполнится при успешном получении ответа сервера;
  • error - function(jqxhr, status, error), выполнится при ошибке запроса;
  • complete - function(jqxhr, status), выполнится после обработчиков success и error;
  • dataFilter - function(data, type), выполнится перед success для предварительной обработки данных.