В мире веб-разработки пользователи все чаще ожидают от сайтов мгновенной реакции и плавной работы — без утомительных перезагрузок страниц. Именно здесь на помощь приходит AJAX — технология, позволяющая обновлять содержимое сайта «на лету», делая взаимодействие с ним быстрым и удобным.
В этом руководстве мы разберемся, как работает AJAX, зачем он нужен и как с его помощью превратить обычный сайт в динамичный и отзывчивый.
Что такое AJAX
AJAX (Asynchronous JavaScript and XML) — это способ обновлять данные на веб-странице, не перезагружая ее целиком.
Слово «асинхронный» значит, что код не ждет ответа от сервера, чтобы продолжить работу. Он отправляет серверу запрос, а сам продолжает выполнять другие задачи.
Например, когда мы листаем ленту в соцсетях, новые посты подгружаются сами без мигания экрана. Это и есть AJAX. Без него каждое обновление — например, отправка формы или загрузка новых сообщений в чате — заставляло бы страницу перезагружаться и раздражать пользователей.
Как работает AJAX
AJAX — не отдельная технология, а комбинация инструментов: JavaScript, Fetch API (или XMLHttpRequest) и DOM.
JavaScript для написания кода
Это язык программирования, который управляет всей логикой AJAX. JavaScript отправляет запросы на сервер, обрабатывает ответы и обновляет страницу. Без него AJAX невозможен, так как он «склеивает» все остальные инструменты.
Fetch API или XMLHttpRequest для общения с сервером и DOM для изменения страницы
DOM — это структура веб-страницы, с которой JavaScript работает, чтобы менять содержимое. Например, мы получаем новые данные с сервера, а DOM помогает вставить их в нужное место на странице.
XMLHttpRequest — это API для обмена данными между клиентом и сервером. Это старый способ отправки запросов, который чаще использовали до появления Fetch API.
XML в названии AJAX означает формат данных для обмена между сервером и страницей. Но JSON сейчас популярнее, потому что он проще и компактнее.
Например, JSON выглядит так:
{"name": "Алекс", "age": 25}
XML более громоздкий, с тегами вроде:
<name>Алекс</name>
Так выглядит GET-запрос с XMLHttpRequest, который получает данные о пользователе с id 1 с тестового API JSONPlaceholder и выводит их на страницу через DOM:
script.js
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1', true);
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
const output = document.getElementById('output');
output.textContent = `Имя: ${data.name}, Email: ${data.email}`;
} else {
console.log('Ошибка:', xhr.status);
}
};
xhr.onerror = function () {
console.log('Ошибка сети');
};
xhr.send();
index.html
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>AJAX с XMLHttpRequest</title> </head> <body> <h1>Данные пользователя</h1> <div id="output">Загрузка...</div> <script src="script.js"></script> </body> </html>
Здесь:
- const xhr = new XMLHttpRequest() создает объект XMLHttpRequest, который будет отправлять запрос.
- xhr.open(‘GET’, ‘https://jsonplaceholder.typicode.com/users/1’, true) настраивает запрос: метод GET, URL для API, и параметр true для асинхронного выполнения (это делает запрос AJAX).
- xhr.onload = function () { … } устанавливает, что делать, когда сервер ответит. Если статус ответа 200 (успех), парсим ответ с помощью JSON.parse, так как данные приходят в формате JSON (например, {«name»: «Leanne Graham», «email»: «Sincere@april.biz»}). Затем обновляем <div id=»output»> в index.html.
- xhr.onerror = function () { … } обрабатывает сетевые ошибки, например, если сервер недоступен.
- xhr.send() отправляет запрос на сервер.
Оба файла — script.js и index.html должны быть в одной папке. Если все корректно, то при открытии файла index.html на экране получим данные о пользователе 1:
«Имя: Leanne Graham, Email: Sincere@april.biz» вместо «Загрузка…».
Чтобы не создавать отдельно js и html файлы на своем компьютере, можно протестировать работу AJAX в специальном компиляторе:
Также можно использовать такие онлайн-компиляторы, как JSFiddle или CodePen:
- Вставьте HTML-код в раздел HTML.
- Вставьте JavaScript-код в раздел JS.
- Нажмите Run и проверьте результат в окне вывода. Это удобно для быстрого тестирования, но для реальных проектов лучше использовать локальные файлы или сервер.
- Fetch API — еще один интерфейс для получения ресурсов. Это более современный способ отправлять запросы на сервер и получать ответы. Он удобнее чем XMLHttpRequest, потому что использует простые, короткие команды и работает с Promise.
Promise — это объект в JavaScript, который помогает работать с асинхронными операциями. Он имеет три состояния:
- Ожидание (Pending): запрос отправлен, ответа пока нет.
- Успех (Fulfilled): сервер ответил, данные получены.
- Ошибка (Rejected): что-то пошло не так (например, сервер недоступен).
Вызов fetch(‘/data’) вернет Promise. К нему можно применять методы then() для обработки успешного ответа и catch() для обработки ошибок.
Например:
fetch(‘/data’)
//Получаем данные в формате JSON
.then(response => response.json())
//Выводим данные
.then(data => console.log(data))
//Обрабатываем ошибку
.catch(error => console.log(‘Ошибка:’, error));
fetch('/data')
//Получаем данные в формате JSON
.then(response => response.json())
//Выводим данные
.then(data => console.log(data))
//Обрабатываем ошибку
.catch(error => console.log('Ошибка:', error));
Здесь Fetch API отправляет запрос, а Promise позволяет дождаться ответа и обработать его, не блокируя остальной код.
Если обобщить, то AJAX-запрос с Fetch API — это вызов функции fetch() и последующая обработка ответа с помощью then() и catch().
С Fetch API скрипт получается лаконичнее, а результат тот же, что и при использовании XMLHttpRequest. К тому же, для работы с JSON в XMLHttpRequest приходится его парсить через JSON.parse(), а в Fetch API есть встроенная поддержка JSON.
Но в конечном итоге решение о том, что из них выбрать, будет зависеть от того, что используют в конкретном проекте.
Примеры AJAX-запросов с Fetch API
В качестве простого примера рассмотрим GET-запрос к серверу JSONPlaceholder с помощью Fetch API. В этот раз получим данные о пользователе с id 2 и отобразим их на странице.
Напишем script.js:
fetch('https://jsonplaceholder.typicode.com/users/2')
.then(response => response.json())
.then(data => {
const output = document.getElementById('output');
output.textContent = `Имя: ${data.name}, Email: ${data.email}`;
})
.catch(error => console.log('Ошибка:', error));
Также создадим index.html:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>AJAX Пример</title> </head> <body> <h1>Данные пользователя</h1> <div id="output">Загрузка...</div> <script src="script.js"></script> </body> </html>
- <div id=»output»> — это место, куда выведутся данные, полученные с сервера. Если запрос не удался, ошибка выводится в консоль.
- <script src=»script.js»> подключает JavaScript-файл, где будет код для AJAX-запроса.
Результат:
Получили данные пользователя 2.
Автозаполнение форм
Если ввести запрос в строку поиска, JavaScript отправит введенный текст на сервер через Fetch API. Сервер вернет подсказки в JSON, и JavaScript обновит список подсказок через DOM.
В качестве сервера возьмем открытый API для поиска книг Open Library.
Скрипт
const input = document.getElementById('search');
input.addEventListener('input', () => {
fetch(`https://openlibrary.org/search.json?q=${input.value}`)
.then(response => response.json())
.then(data => {
const list = document.getElementById('suggestions');
//Берем первые 5 книг для подсказок
const suggestions = data.docs.slice(0, 5).map(book => book.title);
list.innerHTML = suggestions.map(s => `<li>${s}</li>`).join('');
})
.catch(error => console.log('Ошибка:', error));
});
HTML
<h1>Поиск книг</h1> <input id="search" type="text" placeholder="Введите название книги"> <ul id="suggestions"></ul> <script src="script.js"></script>
Как это работает:
- Пользователь вводит текст в поле <input id=»search»>.
- JavaScript формирует URL, например, https://openlibrary.org/search.json?q=hobbit.
- Fetch API отправляет GET-запрос к Open Library API.
- Сервер возвращает JSON с результатами поиска, из которых мы берем заголовки книг (docs[].title) и выводим первые 5 в <ul id=»suggestions»>.
- Если запрос не удался, в консоли увидим ошибку.
Поиск координат
Для поиска координат определенного места на карте можно воспользоваться Nominatim API от OpenStreetMap. Базовые запросы к этому API можно выполнять без токена.
Скрипт
const input = document.getElementById('search');
input.addEventListener('input', () => {
clearTimeout(window.searchTimeout);
window.searchTimeout = setTimeout(() => {
fetch(`https://nominatim.openstreetmap.org/search?q=${input.value}&format=json&limit=5`)
.then(response => response.json())
.then(data => {
const list = document.getElementById('suggestions');
const suggestions = data.map(place => place.display_name);
list.innerHTML = suggestions.map(s => `<li>${s}</li>`).join('');
if (data.length > 0) {
const map = document.getElementById('map');
const { lat, lon } = data[0];
map.innerHTML = `<p>Координаты: ${lat}, ${lon}</p>`;
}
})
.catch(error => console.log('Ошибка:', error));
}, 1000);
});
HTML
<h1>Поиск на карте</h1> <input id="search" type="text" placeholder="Введите место"> <ul id="suggestions"></ul> <div id="map"></div> <script src="script.js"></script>
Как это работает:
- Пользователь вводит название места (например, «Москва») в <input id=»search»>.
- JavaScript формирует URL для Nominatim API, например, https://nominatim.openstreetmap.org/search?q=Москва&format=json&limit=5. Fetch API отправляет GET-запрос.
- Сервер возвращает JSON с координатами. Код выводит до 5 подсказок в <ul id=»suggestions»> и показывает координаты первого результата в <div id=»map»>.
- Также добавлена задержка (debounce) в 1 секунду, чтобы соблюдать лимит Nominatim (1 запрос/сек).
Подведем итоги
- AJAX — комбинация JavaScript, Fetch API (или XMLHttpRequest) и DOM.
- JavaScript управляет логикой, Fetch API или XMLHttpRequest отправляют запросы к серверу, DOM обновляет содержимое страницы.
- Работает AJAX следующим образом: JavaScript отправляет асинхронный запрос на сервер, получает данные и обновляет страницу через DOM. Асинхронность не блокирует страницу, в отличие от синхронных запросов.
- Для запуска AJAX можно создать HTML и JavaScript файлы, либо воспользоваться онлайн-компилятором.
