Що таке AJAX?
AJAX розшифровується як асинхронний JavaScript та XML . Це не мова програмування. Це технологія для розробки кращих, швидших та інтерактивних веб-додатків із використанням HTML, CSS, JavaScript та XML.
- HTML: Мова розмітки гіпертексту (HTML) використовується для визначення структури веб-програми.
- CSS: Каскадна таблиця стилів (CSS) використовується для надання зовнішнього вигляду та стилю веб-додатку.
- JavaScript: JavaScript використовується для створення веб-програми інтерактивною, цікавою та зручною для користувачів.
- XML: Розширювана мова розмітки (XML) - це формат для зберігання та транспортування даних з веб-сервера.
Що означає асинхронний в AJAX?
Асинхронність означає, що веб-програма може надсилати та отримувати дані з веб-сервера, не оновлюючи сторінку. Цей фоновий процес надсилання та отримання даних із сервера разом із оновленням різних розділів веб-сторінки визначає асинхронну властивість / функцію AJAX.
Як працює AJAX
AJAX використовує вбудований у браузер об’єкт XMLHttpRequest для запиту даних з веб-сервера та HTML DOM для відображення або використання даних.
Об'єкт XMLHttpRequest : Це API у формі об'єкта, методи якого допомагають у передачі даних між веб-браузером та веб-сервером.
HTML DOM : Коли веб-сторінка завантажується, браузер створює об’єктну модель документа на сторінці.

Створіть об'єкт XMLHttpRequest:
var xhttp = new XMLHttpRequest();
Властивості об'єкта XMLHttpRequest:
readystate
є властивістю об'єкта XMLHttpRequest, який містить статус XMLHttpRequest.
- 0: запит не ініціалізований
- 1: встановлено з’єднання із сервером
- 2: запит отримано
- 3: обробка запиту
- 4: запит закінчено і відповідь готова
`` onreadystatechange '' - це властивість об'єкта XMLHttpRequest, яке визначає функцію, що викликається при зміні властивості readyState.
`` статус '' - це властивість об'єкта XMLHttpRequest, яке повертає номер статусу запиту
- 200: "ОК"
- 403 Заборонено"
- 404 Не знайдено"
Методи об’єкта XMLHttpRequest: Щоб надіслати запит веб-серверу, ми використовуємо методи open () та send () об’єкта XMLHttpRequest.
xhttp.open("GET", "content.txt", true); xhttp.send();
Створіть функцію changeContent () за допомогою JavaScript:
function changeContent() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("foo").innerHTML = this.responseText; } }; xhttp.open("GET", "content.txt", true); xhttp.send(); }
Приклад AJAX для зміни вмісту веб-сторінки:
The XMLHttpRequest Object
Change Content function changeContent() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("foo").innerHTML = this.responseText; } }; xhttp.open("GET", "content.txt", true); xhttp.send(); }
Файл content.txt
повинен бути присутнім у кореневому каталозі веб-програми.