Приклад AJAX на Vanilla JavaScript

25

Від автора: ця стаття – це продовження нашого знайомства з AJAX. Нижче ми розглянемо приклад, в якому використовується XMLHttpRequest API для ініціалізації AJAX запиту.

AJAX приклад

Давайте розглянемо ось таку базову структуру:

Приклад AJAX на Vanilla JavaScript
Learn more about Einstein

І його візуалізацію:

Приклад AJAX на Vanilla JavaScript

Ми хочемо, щоб по кліку на кнопку спрацьовував 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 визначає стан запиту. Протягом всього запиту змінюється його стан від 0 до 4 (4 означає, що ми отримали відповідь з даними). Друге властивість, status показує успішність або неуспішність запиту (200 означає, що запит успішно пройшов). У цьому прикладі передбачається, що ми витягли дані, а AJAX запит пройшов успішно. Ми оновили контент потрібного елемента. Якщо запит не пройшов, ми відображаємо повідомлення з текстом з об’єкта XMLHttpRequest.

Задаємо тип запиту за допомогою методу open. Цей метод приймає два обов’язкових параметра і 3 опціональних. Перший параметр задає HTTP метод (GET або POST). У другому параметрі вказується URL сторінки, куди ми надсилаємо запит. У третьому параметрі можна вказати тип запиту синхронний або асинхронний (true або false). Для аутентифікації можна використовувати два додаткових параметра.

Надсилає запит по кліку на кнопку з допомогою методу send. Також на цьому етапі ми ховаємо кнопку.

Зверніть увагу: якщо вам потрібно підтримувати дуже старі версії Internet Explorer (IE 6 і нижче), вам необхідно створити об’єкт ActiveXObject. Скріншот нижче показує візуалізацію запиту в консолі браузера.

Приклад AJAX на Vanilla JavaScript

Демо виглядає так:

Приклад AJAX на Vanilla JavaScript

Якщо ж запросити файл, якого немає, то буде показано повідомлення:

Приклад AJAX на Vanilla JavaScript

Зверніть увагу: Якщо ви запустили цей приклад на локальному комп’ютері файл Bio.txt зберігається на ньому), то у вас буде інше повідомлення про помилку. Приміром, ви можете побачити наступне:

Приклад AJAX на Vanilla JavaScript

Нижче Codepen демо:

Висновок

У цьому уроці ми розглянули, як створити простий AJAX запит на vanilla JavaScript. У наступній статті серії ми розглянемо JQuery функції і методи для роботи з AJAX. А в останній частині ми розглянемо більш складний приклад. Слідкуйте за оновленнями!