Пример AJAX на Vanilla JavaScript
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>
|
И ее визуализацию:

Мы хотим, чтобы по клику на кнопку срабатывал 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).
Скриншот ниже показывает визуализацию запроса в консоли браузера.

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

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

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

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