AJAX для Front-End разработчика: Пример AJAX запроса с Vanilla JS

Исходя из предыдущей статьи Введение в AJAX, ниже представлен пример, который использует XMLHttpRequest API для инициализации AJAX запроса.

Пример AJAX

Взгляните на основную структуру:

<div>
    <img src="/Einstein.jpg" alt="Einstein">
    <button id="request">Learn more about Einstein</button>
    <div id="bio"></div>
</div>

Выглядит это следующим образом:

ajax пример

Что нам нужно сделать: при нажатии на кнопку, выполняется AJAX запрос. Затем появляется элемент с id bio и в качестве содержания которого, будет использован ответ сервера. Данные ответа - статичны и сохранены в файле Bio.txt.

Файл мы загрузили на сервер Codepen, чтобы избежать ряд проблем.

Ниже приводим код AJAX запроса:

var btn = document.getElementById('request');
var bio = document.getElementById('bio');
 
var request = new XMLHttpRequest();
 
request.onreadystatechange = function() {
  if(request.readyState === 4) {
    bio.style.border = '1px solid #e8e8e8';
    if(request.status === 200) { 
      bio.innerHTML = request.responseText;
    } else {
      bio.innerHTML = 'An error occurred during your request: ' +  request.status + ' ' + request.statusText;
    } 
  }
}
 
request.open('Get', 'Bio.txt');
 
btn.addEventListener('click', function() {
  this.style.display = 'none';
  request.send();
});

Разбиваем на этапы

Давайте разберем этот запрос на несколько этапов:

  • Создание объекта XMLHttpRequest.
  • Описываем функцию, которая будет работать, при отправке ответа сервером. Объект XMLHttpRequest имеет свойство onreadystatechange которое хранит эту функцию. Каждый раз, когда изменяется состояние запроса, выполняется данная функция обратного вызова.
  • Проверка других свойств объекта XMLHttpRequest. Во-первых, свойство readyState определяет состояние нашего AJAX запроса. На всем протяжении AJAX вызова, его значение изменяется и может получать значения от 0 до 4 (например, значение 4 означает что ответ доступен). Во-вторых, свойство status проверяет, успешен запрос или нет (например значение 200 означает успех). Если предположить, что мы получаем ответ и AJAX запрос успешен, мы обновляем содержание целевого элемента. В противном случае, мы выводим сообщение с информацией, извлеченной из объекта XMLHttpRequest.
  • Указываем тип запроса с помощью метода open. Этот метод принимает два параметра запроса и три необязательных параметра. Первый параметр запроса определяет HTTP метод (GET или POST). Второй параметр определяет URL, к которому мы будем отправлять запрос. Первый необязательный параметр, использует значение boolean, которое определяет асинхронный запрос (по умолчанию значение true) или синхронный. Два других необязательных параметра могут быть использованы для аутентификации.
  • Отправка запроса происходит по нажатию кнопки, используя метод send, кроме того, изначально мы скрываем кнопку.

Если вам необходимо иметь поддержку IE6 и более ранних версий, вы должны создать экземпляр объекта ActiveXObject (см. Шаг 1).

Следующее изображение показывает тело нашего запроса в консоли браузера.

ajax тело запроса

Финальный результат выглядит следующим образом:

ajax успешный запрос

Если запрос не найдет необходимый файл, вы увидите следующее сообщение:

ajax неверный запрос

Если запускать пример локально, то скорее всего, сообщение об ошибке будет отличаться:

ajax локальный запрос

Демонстрационный пример в Codepen:

See the Pen AJAX Demo With Vanilla JavaScript by Envato Tuts+ (@tutsplus) on CodePen.

Заключение

В этом уроке мы узнали как реализовать простой AJAX запрос используя Vanilla JavaScript.

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

Перевод статьи An Example of AJAX with Vanilla Javascript

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.