Знакомство с укороченными Ajax методами jQuery

Ajax – одна из самых популярных клиентских методологий, помогающих в создании асинхронных веб-сайтов и веб-приложений.

Конечно, можно исполнять Ajax вызовы посредством сырого JavaScript, при этом, однако, одновременная работа с разными частями кода может показаться витиеватой и сложной (особенно когда приходиться поддерживать какой-нибудь доисторический браузер типа IE6).

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

За исключением $.ajax(), все методы имеют одну общую черту: они оперируют не с набором элементов, а вызываются непосредственно из jQuery объекта. Поэтому, вместо утверждения вида:

jQuery

$('p').ajax(...);

которое выбирает все параграфы на странице, а затем вызывает $.ajax() метод, мы напишем:

jQuery

$.ajax(...);

В данной статье мы рассмотрим три наиболее популярных укороченных ajax метода: load(), $.post(), и $.get().

load()

Первым рассмотрим метод load(). Он позволяет загружать данные с сервера и помещать возвращаемые данные (зачастую это код HTML) в соответствующие элементы набора. Синтаксис метода load:

load(url[, data][, callback])

Значение каждого параметра описано ниже:

• url : строка, задающая URL ресурса, к которому посылается запрос;
• data : необязательный параметр, данные, которые будут отправлены на сервер. Они должны быть представлены в форме объекта или в виде отформатированной строки-запроса. Если передается строка – методом запроса будет GET, если объект – POST. При пропуске этого параметра используется метод GET.
• callback : дополнительная callback-функция, вызываемая по завершении Ajax запроса. Эта функция принимает три параметра: текст ответа, статус запроса и объект jqXHR. Внутри callback-функции контекст (this) устанавливается каждому элементу коллекции, по одному за раз.

Трудно ли применять на практике? Рассмотрим на конкретном примере:

Допустим, ваш веб-сайт содержит элемент с ID main, в котором располагается основное содержимое. Наша задача заключается в реализации асинхронной загрузке главного контента страницы; на контент ведут ссылки, которые расположены в главном меню (ID которого main-menu). Мы хотим получать содержимое внутри конкретного элемента, так как другие части макета не должны меняться.

Данный подход не более чем дополнение. Так, пользователь, у которого отключен JavaScript, сможет просматривать веб-сайт с помощью обычного синхронного механизма. На сайте эта функциональная возможность применяется для улучшения его производительности. В текущем примере подразумевается, что все ссылки в меню – внутренние ссылки.

Используя jQuery и load() метод, мы можем решить поставленную задачу следующим образом:

jQuery

   $('#main-menu a').click(function(event) {
      // Предотвращаем поведение по умолчание
      // при котором страница загружается синхронно
      event.preventDefault();

      // Загружаем HTML-код с  this.href
      // внутрь элемента с ID #main
      $('#main').load(this.href);
   });

Постойте-ка! Ничего странного в этом коде не видите? Некоторые уже, наверно, отметили, что данный код извлекает весь HTML нужной страницы, а нам нужен лишь основной контент. Выполнение этого кода напоминает ситуацию с двумя зеркалами, стоящими друг напротив друга: зеркало находится внутри другого зеркала, которое, в свою очередь, находится внутри другого и так далее. Нам же нужен только главный контент запрашиваемых страниц.

Для решения этой проблемы нужно добавить селектор сразу после заданного URL. Воспользуемся этим советом, новый код будет таким:

jQuery

   $('#main-menu a').click(function(event) {
      event.preventDefault();

      $('#main').load(this.href + ' #main *');
   });

Теперь при извлечение страницы HTML код проходит фильтрацию, при которой выбираются потомки элемента, ID которого - main. Используется универсальный селектор (*) для того, чтобы исключить возможность нахождения #main внутри #main.

Callback-функция в load()

Параметр callback может быть использован, для оповещения пользователя о завершении действия. Чтобы проиллюстрировать это, поправим наш код.

Подразумевается, что имеется элемент, ID которого - notification-bar; он будет использоваться в качестве полосы уведомлений.

jQuery

   $('#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');
         }
      });
   });

Демо, с небольшими модификациями, для этого кода приведено ниже:

See the Pen jQuery Ajax пример с методом load().

описание метода .load() на jquery.page2page.ru

$.post()

Иногда действия не ограничиваются вставлением возвращаемого сервером контента в один или несколько элементов. Так, может возникнуть желание сначала извлечь данные, а после извлечения решить, что с ними делать. Сделать это помогут методы $.post() и $.get().

Принцип работы этих методов одинаков (исполнение запроса к серверу); сигнатуры и принимаемые ими параметры идентичны. Разница заключается лишь в том, что один посылает запрос POST, а другой – GET.

Напомню - POST используется, если запрос потенциально может изменить состояние на серверной стороне, тем самым вызывая различные ответы (реакции). В противном случае используется GET.

Сигнатура метода $.post() следующая:

$.post(url[, data][, callback][, type])

• url: строка, задающая URL ресурса, к которому посылается запрос;
• data: дополнительный параметр, строка или объект, посылаемые как часть запроса POST;
• callback: callback-функция исполняется, если запрос успешен. Внутри callback-функции контекст (this) присваивается объекту, олицетворяющему Ajax параметры, используемые во время вызова.
• Type: дополнительная строка, определяющая, как интерпретировать тело ответа. Принимаемые значение следующие: html, text, xml, json, script и jsonp. Может быть представлена строкой из нескольких, отделенных друг от друга, значений. В этом случае jQuery конвертирует один тип в другой. Например, если ответ представлен в виде текста, а нужно, чтобы он обрабатывался как XML, то можно написать ‛text xml“. Если этого не сделать, текст ответа передается callback-фннкции без всякой предварительной обработки и оценки, и 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"
}

Демо этого кода приведено ниже:

on CodePen.

Примечание: для кода на CodePen нужны запросы GET; только в этом случае Ajax будет работать. Принцип тот же.

$.get()

$.get() – один из предоставляемых jQuery способов для совершения запроса GET. Этот метод инициирует GET запрос к серверу с помощью заданного URL и дополнительных данных. Также после завершения запроса возможно выполнение callback-функции. Его сигнатура:

$.get(url[, data][, callback][, type])

Параметры те же, что и для $.post() метода; повторно их описывать не будем.

Функция $.get() востребована для тех ситуации, когда сервер возвращает один и тот же результат для заданного набора параметров; а также для ресурсов, результатами от пользования которых пользователи могли бы делиться. Например, GET идеален при пользовании транспортными услугами (при получении расписания поездов), когда разные люди, чьи запросы дат и времени в поиске совпадают, получают один и тот же результат. Кроме того, если страница отвечает на запрос GET, полученным результатом можно поделиться с другом - поможет магия URL.

Заключение

В этой статье были рассмотрены наиболее популярные укороченные методы jQuery. Они удобны в использовании при совершении запросов Ajax, и в своих исходных версиях позволяют добиться желаемого результата одной строкой кода.

Дополнительную информация по этим и другим методам можно найти здесь.

источник