Без всякого сомнения, технология Ajax взяла веб-разработки штурмом и это одна из самых успешных парадигм, когда-либо созданных в этой отрасли. В данной статье я не буду обсуждать такие широко используемые методы как $.get(), $.post() и $.load(), а приоткрою вам занавес более глубокого понимания метода $.ajax().

Иногда нам нужно больше власти/контроля над функцией, чем обычно при работе с Ajax-запросами. К примеру, мы хотим указать, что должно произойти в случае, если вызов Ajax не удаётся, или выполнить запрос Ajax, но его результат нам нужен только в том случае, если он будет обработан в течение определенного времени. В таких ситуациях, мы можем рассчитывать на замечательную функцию $.ajax (), которая и является темой данного урока.

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

Функция $.ajax() от библиотеки jQuery используется для выполнения асинхронного HTTP-запроса. Она была добавлена в библиотеку много лет назад и крепко обосновалась там ещё с версии 1.0. В качестве аргумента функции $.ajax() передается объект, состоящий из пар ключ/значение, которые используются для инициализации и управления запросом.

$.ajax(url[, options])
$.ajax([options])

Параметр url является строкой и отвечает за адрес файла (по умолчанию: текущая страница), который нам нужно достичь посредством Ajax-запроса, в то время как options — параметры данного запроса.

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

Параметры Ajax-запроса

Существует множество различных параметров, которые вы можете указать при вызове функции $.ajax. В списке ниже вы можете найти их имена и их описание отсортированы в алфавитном порядке:

• async: По умолчанию, все запросы отсылаются асинхронно (т.е. значение true). Если Вам необходимо посылать запросы синхронно, установите данную опцию в false.
• beforeSend: Функция для модификации объекта XMLHttpRequest перед отправкой. Используйте её для установки пользовательских заголовков и т.д.;
• cache: Отключает кеширование браузером запрашиваемых Вами страниц;
• complete: Функция, которая исполняется всякий раз после завершения AJAX-запроса;
• contentType: Строка, которая содержит тип отправляемых на сервер данных;
• context: Объект, использованный в качестве контекста (this) для соответствующей callback-функции;
• crossDomain: Позволяет осуществлять переадресацию на другой домен на стороне сервера;
• data: Данные, которые будут отправлены на сервер;
• dataFilter: Функция, используемая для обработки «сырых» данных ответа XMLHttpRequest;
• dataType: Тип данных, который вы ожидаете получить с сервера;
• error: Функция, которая исполняется всякий раз после неудачного запроса;
• global: Определяет, нужно-ли вызывать глобальные обработчики событий AJAX для данного запроса;
• ifModified: Определяет, что запрос является успешным только тогда, когда ответ изменился с момента последнего запроса;
• jsonp: Переопределяет имя функциив в запросе jsonp;
• jsonpCallback: Указывает имя функции обратного вызова для запроса JSONP;
• password: Пароль, который будет использован для HTTP запроса авторизации;
• processData: По умолчанию, данные, переданные в параметр data в качестве объекта (с технической точки зрения, что-либо кроме строки), будут обработаны и преобразованы в строку запроса, для соответствия типу данных по умолчанию — «application/x-www-form-urlencoded». Если необходимо отослать документ DOM или другие специфические данные, то установите данную опцию в false.
• scriptCharset: Только для запросов типа GET со значениями jsonp’ или ’script’ в качестве dataType. Заставляет интерпретировать запрос как конкретную кодировку;
• success: Функция, которая исполняется всякий раз после удачного завершения запроса;
• timeout: Устанавливает локальное время ожидания для запроса;
• type: Тип запроса (»POST» или «GET»), по умолчанию «GET»;
• url: Отвечает за адрес файла (по умолчанию: текущая страница);
• username: Имя пользователя, которое будет использовано для HTTP запроса авторизации;
• xhr: Функция для создания объекта XMLHttpRequest;

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

Пример практического применения $.ajax()

Давайте создадим несложное демо, которое загружает с сервера некоторый текст посредством Ajax-запроса.

$('#action-button').click(function() {
   $.ajax({
      url: 'http://api.joind.in/v2.1/talks/10889',
      data: {
         format: 'json'
      },
      error: function() {
         $('#info').html('<p>An error has occurred</p>');
      },
      dataType: 'jsonp',
      success: function(data) {
         var $title = $('<h1>').text(data.talks[0].talk_title);
         var $description = $('<p>').text(data.talks[0].talk_description);
         $('#info')
            .append($title)
            .append($description);
      },
      type: 'GET'
   });
});

Вывод

В этом уроке мы рассмотрели самый мощный функционал взаимодействия с Ajax, из предлагаемых JQuery, $ .ajax (). Для того, чтобы еще лучше понять потенциал этой функции, я предлагаю вам поиграть с образцами кода, попытаться изменить его, используя некоторые другие параметры.