Поднимите руку, если вы никогда не слышали термин Аякс . Бьюсь об заклад, почти у всех вас есть руки вниз, близко к их телу. Ajax, изначально обозначавший асинхронный JavaScript и XML , является одной из наиболее часто используемых клиентских методологий, помогающих создавать асинхронные веб-сайты и веб-приложения.
Выполнение Ajax-вызовов с использованием необработанного JavaScript, конечно, возможно, но работа со всеми различными частями кода может быть проблемой. Это еще более верно, если вам нужно поддерживать доисторический браузер, такой как Internet Explorer 6.
К счастью для нас, jQuery предоставляет набор методов, которые решают эти проблемы для нас, позволяя нам сосредоточиться на задаче, которую мы хотим выполнить с помощью кода. jQuery предлагает основной метод, называемый $.ajax() , который легко настраивается для удовлетворения любых ваших потребностей. Он также предоставляет набор сокращенных методов , называемых сокращенными, потому что они являются просто обертками для $.ajax() с предустановленной конфигурацией, каждый из которых служит одной цели.
Все, кроме $.ajax() имеют одну общую особенность: они не работают с набором элементов DOM, а вызываются непосредственно из объекта jQuery. Таким образом, вместо того, чтобы иметь утверждение вроде:
$('p').ajax(...);
который выбирает все абзацы на странице и затем вызывает метод ajax() , мы напишем:
$.ajax(...);
В этой статье мы обсудим три наиболее часто используемых сокращенных метода jQuery: load() , $.post() и $.get() .
load()
Первый метод, который мы обсудим, это load() . Это позволяет нам загружать данные с сервера и помещать возвращаемые данные (часто HTML-код) в элементы, соответствующие выбору. Прежде чем увидеть его в действии, давайте посмотрим на его подпись:
load(url[, data][, callback])
Значение каждого параметра описано ниже:
-
url: строка, указывающая URL ресурса, на который вы хотите отправить запрос; -
data: необязательная строка, которая должна быть строкой запроса с хорошим форматированием или объектом, который должен быть передан в качестве параметра запроса. Если передана строка, метод запроса будет GET, если передан объект, метод запроса будет POST. Если этот параметр не указан, используется метод GET; -
callback: дополнительная функция обратного вызова, вызываемая после завершения запроса Ajax. Эта функция принимает до трех параметров: текст ответа, строку состояния запроса и экземпляр jqXHR. Внутри обратного вызова контекст (this) устанавливается для каждого элемента коллекции, по одному за раз.
Это кажется трудным для использования? Давайте посмотрим на конкретный пример.
Представьте, что на вашем сайте есть элемент с идентификатором main который представляет основной контент. Мы хотим асинхронно загружать основное содержимое страниц, на которые ссылаются ссылки в главном меню, которое в идеале имеет main-menu качестве идентификатора. Мы хотим получить только содержимое внутри этого элемента, потому что другие части макета не меняются, поэтому их не нужно загружать.
Этот подход предназначен для улучшения, потому что если пользователь, посещающий веб-сайт, отключил JavaScript, он все равно сможет просматривать веб-сайт с помощью обычного синхронного механизма. Мы хотим реализовать эту функцию, потому что она может улучшить производительность веб-сайта. В этом примере мы предполагаем, что все ссылки в меню являются внутренними ссылками.
Используя jQuery и метод load() , мы можем решить эту задачу с помощью следующего кода:
$('#main-menu a').click(function(event) { // Prevents the default behavior which is // to load the page synchronously event.preventDefault(); // Load the HTML code referenced by this.href // into the element having ID of #main $('#main').load(this.href); });
Но ждать! Вы видите что-то не так с этим кодом? Некоторые из вас могут заметить, что этот код извлекает весь HTML-код указанной страницы, а не только основной контент. Выполнение этого кода приводит к ситуации, подобной наличию двух зеркал, одно перед другим: вы видите зеркало внутри зеркала внутри зеркала и так далее. Что мы действительно хотим, так это загружать только основное содержимое целевой страницы.
Чтобы решить эту проблему, jQuery позволяет нам добавлять селектор сразу после указанного URL. Используя эту функцию метода load() , мы можем переписать предыдущий код следующим образом:
$('#main-menu a').click(function(event) { event.preventDefault(); $('#main').load(this.href + ' #main *'); });
На этот раз мы извлекаем страницу, но затем фильтруем HTML-код, чтобы внедрить только потомков элемента с идентификатором main . Мы включили универсальный селектор (`*`), потому что мы хотим избежать наличия элемента #main внутри элемента #main ; мы хотим только #main внутри #main , а не #main .
Этот пример хорош, но он показывает только использование одного из доступных параметров. Давайте посмотрим больше кода!
Использование обратного вызова с load()
Параметр обратного вызова может использоваться для уведомления пользователя о завершении действия. Давайте обновим наш предыдущий пример в последний раз, чтобы использовать это.
На этот раз мы предположим, что у нас есть элемент с идентификатором notification-bar который будет использоваться как… ну, панель уведомлений.
$('#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'); } }); });
Демонстрационная версия этого кода с некоторыми незначительными улучшениями для демонстрации показана ниже:
Имея представление о load() , давайте переключим наше внимание на следующий метод.
$.post()
Иногда мы хотим не только внедрить содержимое, возвращаемое сервером, в один или несколько элементов. Мы можем захотеть получить данные и затем решить, что делать с ними после их получения. Для этого мы можем использовать методы $.post() или $.get() .
Они похожи в том, что они делают (выполняя запрос к серверу), и идентичны в своих подписях и принятых параметрах. Единственное отличие состоит в том, что один отправляет запрос POST, а другой — запрос GET. Довольно очевидно, не правда ли?
Если вы не помните разницу между запросом POST и запросом GET, следует использовать POST, если наш запрос может вызвать изменение состояния на стороне сервера, что приведет к различным ответам. В противном случае это должен быть запрос GET.
Подпись метода $.post() :
$.post(url[, data][, callback][, type])
Параметры описаны ниже:
-
url: строка, указывающая URL ресурса, на который вы хотите отправить запрос; -
data: необязательная строка или объект, который jQuery отправит как часть запроса POST; -
callback: функция обратного вызова, которая выполняется после успешного выполнения запроса. Внутри обратного вызова контекст (this) устанавливается для объекта, который представляет параметры Ajax, используемые в вызове. -
type: необязательная строка, указывающая, как интерпретируется тело ответа. Допустимые значения: html, text, xml, json, script и jsonp. Это также может быть строка из нескольких значений, разделенных пробелами. В этом случае jQuery преобразует один тип в другой. Например, если ответ является текстовым, и мы хотим, чтобы он обрабатывался как XML, мы можем написать «text xml». Если этот параметр не указан, текст ответа передается обратным вызовам без какой-либо обработки или оценки, и jQuery делает все возможное, чтобы угадать правильный формат.
Теперь, когда вы знаете, что может делать $.post() и каковы его параметры, давайте напишем некоторый код.
Представьте, что у нас есть форма для заполнения. Каждый раз, когда поле теряет фокус, мы хотим отправить данные поля на сервер, чтобы убедиться, что они действительны. Предположим, что сервер возвращает информацию в формате JSON. Типичным примером использования является проверка того, что выбранное пользователем имя пользователя еще не занято.
Для реализации этой функции мы можем использовать метод $.post() jQuery следующим образом:
$('input').blur(function() { var data = {}; data[this.name] = this.value; $.post( '/user', data, function(responseText) { if (responseText.status === 'error') { $('#notification-bar').html('<p>' + responseText.message + '<p>'); } } ); });
В этом коде мы отправляем POST-запрос на страницу, указанную относительным URL-адресом «/ user». Мы также используем второй параметр, data , для отправки на сервер имени и значения поля, которое теряет фокус. Наконец, мы используем обратный вызов, чтобы проверить, что значение свойства status возвращаемого объекта JSON является error , и в этом случае мы показываем сообщение об ошибке (хранится в свойстве message ) пользователю.
Чтобы дать вам лучшее представление о том, как может выглядеть объект JSON этого типа, вот пример:
{ "status": "error", "message": "Username already in use" }
Демонстрационная версия этого кода показана ниже:
Примечание. Код для CodePen требует использования GET-запроса вместо POST, чтобы Ajax работал, но идея по-прежнему применима.
Как я уже сказал, за исключением возможности сделать запрос GET, $.get() идентичен $.post() . По этой причине следующий раздел будет довольно коротким, и я сосредоточусь на некоторых случаях использования, а не на повторении той же информации.
$.get()
$.get() является одним из средств, предоставляемых jQuery для выполнения запроса GET. Этот метод инициирует запрос GET к серверу, используя указанный URL-адрес и предоставленные необязательные данные. Он также может выполнить обратный вызов, когда запрос был завершен. Его подпись выглядит следующим образом:
$.get(url[, data][, callback][, type])
Параметры те же, что и у метода $.post() поэтому я не буду их здесь повторять.
Функция $.get() хорошо подходит для тех ситуаций, когда ваш сервер всегда возвращает один и тот же результат для заданного набора параметров. Это также хороший выбор для ресурсов, которыми вы хотите, чтобы ваши пользователи могли поделиться. Например, запрос GET идеально подходит для транспортных услуг (таких как информация о расписании поездов), когда люди, ищущие ту же дату и время, должны получить тот же результат. Кроме того, если страница сможет ответить на запрос GET, пользователь сможет поделиться полученным результатом с другом — волшебство URL-адресов.
Вывод
В этой статье мы обсудили некоторые из наиболее часто используемых сокращенных методов Ajax в jQuery. Это очень удобные методы для выполнения Ajax-запросов, и, как мы видели, в их базовой версии можно достичь того, чего мы хотим, всего за одну строчку кода.
Посмотрите краткие документы Ajax от jQuery, чтобы узнать больше об этих и других методах. Хотя мы здесь не обсуждали другие, вы сможете использовать знания, полученные в этой статье, чтобы начать работать и с другими.