В чем разница между AJAX, XMLHttpRequest и fetch

AJAX (Asynchronous JavaScript and XML) — это концепция асинхронного обмена данными между клиентом и сервером без перезагрузки страницы. XMLHttpRequest (XHR) — это устаревший API для выполнения AJAX-запросов, сложный в использовании.

Fetch API — современная замена XHR, основанная на промисах, с более чистым синтаксисом.

Пример XHR:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = () => console.log(xhr.responseText);
xhr.send();

Пример fetch:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Ключевые отличия:

• Fetch использует промисы, XHR — колбэки.
• Fetch обрабатывает ошибки только при сбое сети (не при 404/500).
• XHR поддерживает прогресс загрузки, fetch — нет (нужен Response.body).
• Fetch более лаконичен и современен.