Advertisement
  1. Web Design
  2. Ajax

Пример AJAX на Vanilla JavaScript

Scroll to top
Read Time: 2 min
This post is part of a series called AJAX for Front-End Designers.
An Introduction to AJAX for Front-End Designers
A Beginner’s Guide to AJAX With jQuery

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

Данная статья – это продолжение нашего знакомства с AJAX. Ниже мы рассмотрим пример, в котором используется XMLHttpRequest API для инициализации AJAX запроса.

AJAX пример

Давайте рассмотрим вот такую базовую структуру:

1
      <div>
2
          <img src="Einstein.jpg" alt="Einstein">
3
          <button id="request">Learn more about Einstein</button>
4
          <div id="bio"></div>
5
      </div>

И ее визуализацию:

Example

Мы хотим, чтобы по клику на кнопку срабатывал AJAX запрос. Потом, появлялся элемент с ID bio и заполнялся данными из ответа. Данные статичны и хранятся в файле Bio.txt.

Обратите внимание: файл загружен на сервер Codepen. То есть проблемы с ограничением домена у нас не возникнет.

Ниже представлен AJAX код:

1
      var btn = document.getElementById('request');
2
      var bio = document.getElementById('bio');
3
4
      var request = new XMLHttpRequest();
5
6
      request.onreadystatechange = function() {
7
        if(request.readyState === 4) {
8
          bio.style.border = '1px solid #e8e8e8';
9
          if(request.status === 200) { 
10
            bio.innerHTML = request.responseText;
11
          } else {
12
          	bio.innerHTML = 'An error occurred during your request: ' +  request.status + ' ' + request.statusText;
13
          } 
14
        }
15
      }
16
17
      request.open('Get', 'Bio.txt');
18
19
      btn.addEventListener('click', function() {
20
        this.style.display = 'none';
21
        request.send();
22
      });

Разбираем все по шагам

Давайте разберем код выше:

  • Создается объект 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).

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

AJAX_Body

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

Success

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

Error

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

Error_Local

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

Заключение

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

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.