Що таке AJAX та як вона працює

Сьогодні поговоримо про технологію, що у свій час змінила Web, назва якій AJAX.

Що таке AJAX

AJAX (Asynchronous JavaScript and XML) – технологія, що дозволяє здійснювати асинхронний обмін даними між клієнтом та сервером без потреби перезавантажувати сторінку.

Завдяки AJAX можна оновлювати окремі частини сторінки безпосередньо на клієнті.

Як працює технологія AJAX?

При використанні AJAX, клієнтська сторона (браузер) взаємодіє з сервером асинхронно, відправляючи запити та отримуючи відповіді без перезавантаження сторінки.

Сервер оброблює цей запит від клієнта (браузера) та повертає дані у форматі, зазвичай, JSON або XML. Після отримання відповіді, JavaScript виконує певні дії з цими даними, наприклад, оновлює вміст сторінки, додає нову інформацію або змінює вигляд елементів сторінки.

У яких випадках використовується AJAX?

AJAX широко використовується в веб-розробці для різних завдань:

Оновлення динамічного вмісту: AJAX дозволяє оновлювати лише певні частини сторінки без перезавантаження всього вмісту. Наприклад, в соціальних мережах чи месенджерах, можна оновлювати стрічку новин або коментарів без необхідності перезавантажувати всю сторінку.
Відправлення та отримання даних форм: За допомогою AJAX можна відправляти дані з форм, такі як авторизація, коментарі, повідомлення тощо, без перезавантаження сторінки. Це забезпечує більш зручний та безперервний досвід користувача.
Асинхронна перевірка чи валідація даних: AJAX дозволяє виконувати перевірку даних на сервері асинхронно. Наприклад, ви можете перевіряти наявність нових повідомлень або оновлень безпосередньо на сторінці без необхідності вручну перезавантажувати її.

Приклади використання AJAX у JavaScript

Отримання даних з сервера

function fetchData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var data = JSON.parse(this.responseText);
    }
  };
  xhttp.open("GET", "data.json", true);
  xhttp.send();
}

Відправка даних форми на сервер

function submitForm() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("result").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "submit.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  var data = "name=" + encodeURIComponent(document.getElementById("name").value);
  xhttp.send(data);
}

Висновок

AJAX дозволяє комфортно працювати з вебом, дозволяючи користувачу не очікувати постійних перезавантажень громіздких html шаблонів та перемальовувань DOM дерева.

Саме завдяки AJAX ми користуємось класними Web додатками, що не вимагають постійних перезавантажень сторінки.

5/5