Пример AJAX на Vanilla JavaScript

Russian (Pусский) translation by Andrey Bernatskiy (you can also view the original English article)

Данная статья – это продолжение нашего знакомства с 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 запрос. Потом, появлялся элемент с 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 запроса меняется его состояние от 0 до 4 (4 означает, что мы получили ответ с данными). Второе свойство, status показывает успешность или неуспешность запроса (200 означает, что запрос успешно прошел). В этом примере предполагается, что мы вытянули данные, а AJAX запрос прошел успешно, мы обновили контент нужного элемента. Если запрос не прошел, мы отображаем сообщение с текстом из объекта XMLHttpRequest.
Задаем тип запроса с помощью метода open. Этот метод принимает два обязательных параметра и 3 опциональных. Первый параметр задает HTTP метод (GET или POST). Во втором параметре указывается URL страницы, куда мы посылаем запрос. В третьем параметре можно указать тип запроса синхронный или асинхронный (значение по-умолчанию true). Для аутентификации можно использовать два дополнительных параметра.
Отправляет запрос по клику на кнопку с помощью метода send. Также на этом этапе мы прячем кнопку.

Обратите внимание: если вам нужно поддерживать очень старые версии Internet Explorer (IE6 и ниже), вам необходимо создать объект ActiveXObject (см. Шаг 1).

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

Итоговое демо выглядит так:

В другом случае, если же запросить файл, которого нет, то будет показано сообщение:

Обратите внимание: Если вы запустили этот пример на локальном компьютере (и файл Bio.txt хранится на нем), то у вас будет другое сообщение об ошибке. К примеру, вы можете увидеть следующее:

Ниже представлено демо на Codepen:

Заключение

В этом уроке мы рассмотрели, как создать простой AJAX запрос на vanilla JavaScript.

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