Данная статья – это продолжение нашего знакомства с 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. А в последней части мы рассмотрим более сложный пример. Следите за обновлениями!