Без сомнения, Ajax взяла веб-разработку штурмом, и это одна из самых успешных парадигм когда-либо. В моей статье «Введение в сокращенные Ajax-методы jQuery» я рассмотрел некоторые из наиболее часто используемых сокращенных методов Ajax в jQuery: $.get() , $.post() и $.load() . Это удобные методы для создания Ajax-запросов в несколько строк кода.
Иногда нам нужно больше контролировать вызовы Ajax, которые мы хотим сделать. Например, мы хотим указать, что должно произойти в случае сбоя вызова Ajax или если нам нужно выполнить запрос Ajax, но его результат необходим только в том случае, если он получен в течение определенного периода времени. В таких ситуациях мы можем положиться на другую функцию, предоставляемую jQuery, с именем $.ajax() , которая является темой этого руководства.
Функция $.ajax()
Функция jQuery $.ajax() используется для выполнения асинхронного HTTP-запроса. Он был добавлен в библиотеку очень давно, начиная с версии 1.0. Функция $.ajax() — это то, что каждая функция, обсужденная в ранее упомянутой статье, вызывает за $.ajax() используя предустановленную конфигурацию. Подписи этой функции показаны ниже:
$.ajax(url[, options]) $.ajax([options])
Параметр url — это строка, содержащая URL, который вы хотите получить с помощью вызова Ajax, а options — это литерал объекта, содержащий конфигурацию для запроса Ajax.
В своей первой форме эта функция выполняет Ajax-запрос с использованием параметра url и параметров, указанных в options . Во второй форме URL-адрес указывается в options параметров или может быть опущен, в этом случае запрос выполняется на текущей странице.
Список опций, принимаемых этой функцией, описанный в следующем разделе, очень длинный. Итак, я буду держать их описание коротким. Если вы хотите подробно изучить их значение, вы можете обратиться к официальной документации $.ajax() .
option Параметр
Существует множество различных опций, которые вы можете указать, чтобы согнуть $.ajax() в соответствии с вашими потребностями. В списке ниже вы можете найти их имена и их описание, отсортированные в алфавитном порядке:
-
accepts: тип содержимого, отправляемый в заголовке запроса, который сообщает серверу, какой ответ он примет в ответ -
async: установите для этого параметра значениеfalseчтобы выполнить синхронный запрос -
beforeSend: функция обратного вызова перед запросом, которую можно использовать для изменения объектаjqXHRперед его отправкой -
cache: установите для этого параметра значениеfalseчтобы браузер не запрашивал кэширование запрашиваемых страниц. -
complete: функция, вызываемая после завершения запроса (послеsuccessи обратного вызова сerror) -
contents: объект, который определяет, как библиотека будет анализировать ответ -
contentType: тип содержимого данных, отправляемых на сервер -
context: объект для использования в качестве контекста (this) всех обратных вызовов, связанных с Ajax -
converters: объект, содержащий преобразователи dataType-to-dataType -
crossDomain: установите для этого свойства значениеtrueчтобы принудительно использовать междоменный запрос (например, JSONP) в том же домене. -
data: данные для отправки на сервер при выполнении Ajax-запроса. -
dataFilter: функция, используемая для обработки необработанных данных ответа XMLHttpRequest -
dataType: тип данных, ожидаемых от сервера -
error: функция, вызываемая в случае сбоя запроса -
global: запускать ли глобальные обработчики событий Ajax для этого запроса -
headers: объект дополнительных заголовков для отправки на сервер -
ifModified: установите для этого параметра значениеtrueесли вы хотите, чтобы запрос был успешным, только если ответ изменился с момента последнего запроса. -
isLocal: установите для этого параметра значениеtrueесли вы хотите, чтобы jQuery распознавал текущую среду как «локальную» -
jsonp: строка для переопределения имени функции обратного вызова в запросе JSONP -
jsonpCallback: указывает имя функции обратного вызова для запроса JSONP. -
mimeType: строка, указывающая тип mime для переопределения типа mime XHR. -
password: пароль, который будет использоваться с XMLHttpRequest в ответ на запрос аутентификации доступа HTTP -
processData: установите для этого параметра значениеfalseесли вы не хотите, чтобы данные, переданные параметруdata(если уже не строка), были обработаны и преобразованы в строку запроса. -
scriptCharset: устанавливает атрибут charset для тега script, используемого в запросе, но применяется только при использовании транспорта «script» -
statusCode: объект числовых HTTP-кодов и функций, вызываемых, когда ответ имеет соответствующий код -
success: функция, вызываемая в случаеsuccessвыполнения запроса. -
timeout: число, указывающее время ожидания (в миллисекундах) для запроса. -
traditional: установите значениеtrueесли хотите использовать традиционный стиль сериализации параметров -
type: тип запроса, который может быть «POST» или «GET» -
url: строка, содержащая URL, на который отправляется запрос -
username: имя пользователя, которое будет использоваться с XMLHttpRequest в ответ на запрос аутентификации доступа HTTP -
xhr: обратный вызов для создания объекта XMLHttpRequest -
xhrFields: объект для установки на собственный объект XHR
Это было довольно долго, не так ли? Ну, как разработчики, вы, вероятно, перестали читать этот список на пятом или шестом элементе, я думаю, но это нормально. Следующий раздел будет более захватывающим, потому что мы приведем в $.ajax() функцию $.ajax() и некоторые из этих опций.
Собираем все вместе
В этом разделе мы увидим эту функцию и некоторые ее опции в действии.
Первый пример $.ajax()
Мы начнем с простой демонстрации, которая воспроизводит тот же код, который мы разработали в предыдущей статье, но на этот раз мы примем $.ajax() . Код, о котором я говорю, показан ниже для вашего товара:
$('#main-menu a').click(function(event) { event.preventDefault(); $('#main').load(this.href + ' #main *', function(responseText, status) { if (status === 'success') { $('#notification-bar').text('The page has been successfully loaded'); } else { $('#notification-bar').text('An error occurred'); } }); });
Обновив этот фрагмент, чтобы использовать $.ajax() , мы получаем код, показанный ниже:
$('#main-menu a').click(function(event) { event.preventDefault(); $.ajax(this.href, { success: function(data) { $('#main').html($(data).find('#main *')); $('#notification-bar').text('The page has been successfully loaded'); }, error: function() { $('#notification-bar').text('An error occurred'); } }); });
Здесь вы можете видеть, что я использовал первую форму функции. Я указал URL-адрес для отправки запроса в качестве первого параметра, а затем объект параметров в качестве второго параметра. Последний использует только два из нескольких свойств, рассмотренных в предыдущем разделе: success и error чтобы указать, что делать в случае успеха или неудачи запроса соответственно.
Извлечение разговора из Joind.in с помощью $.ajax()
Второй пример, который я хочу обсудить, создает запрос JSONP для извлечения некоторой информации из службы Joind.in . Последний является веб-сайтом, на котором участники мероприятия могут оставлять отзывы о событии и его сеансах. В частности, я собираюсь создать фрагмент кода, который с помощью функции $.ajax() извлекает заголовок и описание моей беседы Modern front-end глазами разработчика PHP .
Код для достижения этой цели выглядит следующим образом:
$.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() , которая позволяет указать URL, на который отправляется запрос, в качестве свойства ( url ) литерала объекта. Поскольку API Joind.in принимает запрос JSONP, в приведенном выше коде я dataType тип запроса, который хочу использовать, указав свойство dataType . Затем я использовал свойство data чтобы определить тип формата, который я хочу получить от сервера в соответствии с требованиями API. Однако последний требует, чтобы эти данные были частью строки запроса GET-запроса, поэтому я также указываю в качестве значения свойства type GET параметр GET . Наконец, я написал обратный вызов для отображения сообщения в случае ошибки и обратный вызов для отображения заголовка и описания разговора в случае успеха.
Демонстрационная версия этого кода показана ниже и также доступна в виде JSfiddle :
Примечание: в случае, если вам нужна библиотека для встраивания выступления из Joind.in, я разработал библиотеку под названием JoindIn.js .
Вывод
В этом руководстве мы обсудили наиболее мощные функции Ajax, предлагаемые jQuery, $.ajax() . Это позволяет выполнять Ajax-запрос с большим контролем над тем, как запрос отправляется на сервер и как обрабатывается ответ. Благодаря этой функции у вас есть инструменты, необходимые для удовлетворения всех потребностей вашего проекта, если ни одна из сокращенных функций не подходит.
Чтобы еще лучше понять потенциал этой функции, я советую вам поиграть с примерами кода и попытаться изменить его, чтобы использовать некоторые другие параметры, принимаемые параметром options . Если вы хотите узнать больше о JavaScript, ознакомьтесь с библиотекой книг JavaScript в SitePoint Premium. Веселиться!