Разработка сайтов в Донецке, ДНР. Как использовать функцию jQuery ajax() для асинхронных HTTP-запросов

Ajax — это технология, которая позволяет разработчикам выполнять асинхронные HTTP-запросы без необходимости полного обновления страницы. Чтобы сделать процесс менее громоздким, чем в чистом JavaScript, разработчики годами используют библиотеку jQuery. В моей статье «Введение в сокращенные методы Ajax в jQuery» я рассмотрел некоторые из наиболее часто используемых сокращенных методов Ajax в jQuery: $.get (), $.post () и $.load (). Это удобные методы выполнения запросов Ajax в несколько строк кода.

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

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

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

$.ajax (url[, settings])

$.ajax ([settings])

Параметр urlпредставляет собой строку, содержащую URL-адрес, который вы хотите получить с помощью вызова Ajax, а settingsлитерал объекта, содержащий конфигурацию для запроса Ajax.

В своей первой форме эта функция выполняет запрос Ajax, используя urlпараметр и опции, указанные в settings. Во второй форме URL указывается в settingsпараметре или может быть опущен, в этом случае запрос осуществляется на текущую страницу.

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

Параметр settings_

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

accepts: тип содержимого, отправленный в заголовке запроса, который сообщает серверу, какой ответ он примет в ответ.

async: Установите этот параметр для falseвыполнения синхронного запроса.

beforeSend: функция обратного вызова перед запросом, которую можно использовать для изменения jqXHRобъекта перед его отправкой.

cache: установите этот параметр, falseчтобы запрашиваемые страницы не кэшировались браузером.

complete: Функция, которая будет вызываться по завершении запроса (после successвыполнения errorобратных вызовов и).

contents: объект, который определяет, как библиотека будет анализировать ответ.

contentType: Тип содержимого данных, отправляемых на сервер.

context: Объект для использования в качестве контекста (this) всех обратных вызовов, связанных с Ajax.

converters: объект, содержащий преобразователи типа данных в тип данных.

crossDomain: установите для этого свойства значение, trueчтобы инициировать междоменный запрос (например, JSONP) в том же домене.

data: данные для отправки на сервер при выполнении запроса Ajax.

dataFilter: функция, используемая для обработки необработанных данных ответа XMLHttpRequest.

dataType: тип данных, ожидаемых от сервера.

error: функция, которая будет вызываться в случае сбоя запроса.

global: активировать ли глобальные обработчики событий Ajax для этого запроса.

headers: объект дополнительных заголовков для отправки на сервер.

ifModified: Установите этот параметр, trueесли вы хотите, чтобы запрос был успешным только в том случае, если ответ изменился с момента последнего запроса.

isLocal: Установите этот параметр, trueесли хотите, чтобы jQuery распознавал текущую среду как «локальную».

jsonp: строка для переопределения имени функции обратного вызова в запросе JSONP.

jsonpCallback: указывает имя функции обратного вызова для запроса JSONP.

mimeType: Строка, указывающая тип пантомимы для переопределения типа пантомимы XHR.

password: пароль, который будет использоваться с XMLHttpRequest в ответ на запрос аутентификации доступа HTTP.

processData: Установите этот параметр, falseесли вы не хотите, чтобы данные, переданные в dataпараметр (если это уже не строка), обрабатывались и преобразовывались в строку запроса.

scriptAttrs: определяет объект с дополнительными атрибутами для использования в запросе «script» или «jsonp».

scriptCharset: устанавливает атрибут charset в теге script, используемом в запросе, но применяется только при использовании транспорта «script».

statusCode: объект числовых HTTP-кодов и функций, которые будут вызываться, когда ответ имеет соответствующий код.

success: Функция, которая будет вызываться в случае успешного выполнения запроса.

timeout: число, указывающее время ожидания (в миллисекундах) для запроса.

traditional: Установите это значение, trueесли хотите использовать традиционный стиль сериализации параметров.

type: тип запроса, который может быть «POST» или «GET».

url: строка, содержащая URL-адрес, на который отправляется запрос.

username: имя пользователя, которое будет использоваться с XMLHttpRequest в ответ на запрос аутентификации доступа HTTP.

xhr: обратный вызов для создания объекта XMLHttpRequest.

xhrFields: объект, который нужно установить на собственном объекте XHR.

Это довольно длинный список, не так ли? Что ж, как разработчик, вы, вероятно, перестали читать этот список на пятом или шестом элементе, я думаю, но это нормально. Следующий раздел будет более захватывающим, потому что мы задействуем эту $.ajax () функцию и некоторые из этих опций.

Собираем все вместе

В этом разделе мы увидим эту функцию и некоторые ее параметры в действии.

Первый пример$.ajax ()

Мы начнем с простой демонстрации, которая воспроизводит тот же код, который мы разработали в предыдущей статье, но на этот раз мы примем $.ajax (). Код, о котором я говорю, показан ниже для вашего удобства:

$ ('#main-menu a’).on ('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’).on ('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 () функции извлекает название и описание моего выступления Современный интерфейс глазами PHP-разработчика.

Код для достижения этой цели выглядит следующим образом:

$.ajax ({

url: 'http: //api.joind.in/v2.1/talks/10889',

data: {

format: 'json’

},

error: function () {

$ ('#info’).html ('An error has occurred’) ;

},

dataType: 'jsonp’,

success: function (data) {

var $title = $ ('').text (data.talks[0].talk_title) ;

var $description = $ ('').text (data.talks[0].talk_description) ;

$ ('#info’)

.append ($title)

.append ($description) ;

},

type: 'GET’

}) ;

В приведенном выше фрагменте я использовал несколько свойств, перечисленных выше. Прежде всего, вы можете видеть, что я использую вторую форму $.ajax (), которая позволяет мне указать URL-адрес, на который отправляется запрос, как свойство (url) литерала объекта. Поскольку API Joind.in принимает запрос JSONP, в приведенном выше коде я устанавливаю тип запроса, который хочу использовать, указав dataTypeсвойство. Затем я использовал это dataсвойство, чтобы определить тип формата, который я хочу получить с сервера в соответствии с требованиями API. Однако в последнем случае эти данные требуются как часть строки запроса GET, поэтому я также указываю параметр typeсвойства GETв качестве его значения. Наконец, я написал errorобратный вызов для отображения сообщения в случае ошибки иsuccessобратный вызов для отображения заголовка и описания выступления в случае успеха.

Живая демонстрация этого кода показана ниже:

Вывод

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

Чтобы еще лучше понять потенциал этой функции, я рекомендую вам поиграть с примерами кода и попытаться изменить код, чтобы использовать некоторые другие параметры, принимаемые settingsпараметром.