AJAX (Asynchronous JavaScript and XML) — это технология, позволяющая веб-страницам асинхронно обмениваться данными с сервером без перезагрузки всей страницы.
Принципиально AJAX работает следующим образом:
- Событие в браузере: Пользователь совершает действие (например, клик на кнопку) или происходит другое событие, инициирующее AJAX-запрос.
- Объект
XMLHttpRequest (или fetch API): JavaScript создает объект XMLHttpRequest (или использует более современный fetch API), который отвечает за отправку запроса на сервер.
- Отправка запроса: С помощью этого объекта отправляется HTTP-запрос (обычно GET или POST) на сервер.
- Серверная обработка: Сервер получает запрос, обрабатывает его (например, извлекает данные из базы данных), и формирует ответ. Формат ответа может быть разным: XML, JSON, HTML или простой текст. Чаще всего используется JSON.
- Получение ответа: Объект
XMLHttpRequest (или fetch API) получает ответ от сервера.
- Обработка ответа на стороне клиента: JavaScript обрабатывает полученный ответ.
- Обновление DOM: JavaScript динамически обновляет содержимое веб-страницы (DOM) на основе полученных данных, не выполняя полного перезагрузки.
Ключевые преимущества:
- Async: Операции выполняются асинхронно, не блокируя взаимодействие пользователя со страницей.
- Dynamic: Позволяет обновлять части страницы без полной перезагрузки.
- Performance: Уменьшает объем передаваемых данных и ускоряет работу веб-приложений.
Пример использования XMLHttpRequest:
javascript
Пример использования fetch API:
javascript