Введение в АЯКС
AJAX — мечта разработчика, потому что вы можете:
- Чтение данных с веб-сервера — после загрузки страницы
- Обновите веб-страницу без перезагрузки страницы
- Отправка данных на веб-сервер — в фоновом режиме
Пример AJAX
Let AJAX change this text
Объяснение примера AJAX
HTML-страница
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
HTML-страница содержит раздел <div> и <button>.
Раздел <div> используется для отображения информации с сервера.
<кнопка> вызывает функцию (если она нажата).
Функция запрашивает данные с веб-сервера и отображает их:
Функция loadDoc()
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Что такое АЯКС?
AJAX = синхронный J avaScript и X ML .
AJAX — это не язык программирования.
AJAX просто использует комбинацию:
- Встроенный
XMLHttpRequestобъект браузера (для запроса данных с веб-сервера) - JavaScript и HTML DOM (для отображения или использования данных)
AJAX — вводящее в заблуждение название. Приложения AJAX могут использовать XML для передачи данных, но в равной степени распространена передача данных в виде обычного текста или текста JSON.
AJAX позволяет обновлять веб-страницы асинхронно, обмениваясь данными с веб-сервером за кулисами. Это означает, что можно обновлять части веб-страницы без перезагрузки всей страницы.
Как работает АЯКС
- 1. На веб-странице происходит событие (страница загружается, нажимается кнопка)
- 2. Объект XMLHttpRequest создается с помощью JavaScript.
- 3. Объект XMLHttpRequest отправляет запрос на веб-сервер.
- 4. Сервер обрабатывает запрос
- 5. Сервер отправляет ответ обратно на веб-страницу.
- 6. Ответ читается JavaScript
- 7. Правильное действие (например, обновление страницы) выполняется с помощью JavaScript.
Современные браузеры (Fetch API)
Современные браузеры могут использовать Fetch API вместо объекта XMLHttpRequest.
Интерфейс Fetch API позволяет веб-браузеру выполнять HTTP-запросы к веб-серверам.
Если вы используете объект XMLHttpRequest, Fetch может сделать то же самое более простым способом.