Урок 4.4: AJAX и работа с сетью
Цели урока:
- Понять, что такое AJAX и как он используется для асинхронных запросов к серверу.
- Изучить использование объекта `XMLHttpRequest` и Fetch API для отправки HTTP-запросов.
- Научиться обрабатывать ответы от сервера и динамически обновлять содержимое веб-страницы без её перезагрузки.
Введение
AJAX (Asynchronous JavaScript And XML) — это техника разработки веб-приложений, позволяющая веб-страницам асинхронно обмениваться данными с сервером. Это означает, что можно обновлять части веб-страницы без перезагрузки всей страницы.
1. `XMLHttpRequest`
`XMLHttpRequest` — это API, доступный в браузерах, который предоставляет клиентскую функциональность для передачи данных между клиентом и сервером.
- Пример использования `XMLHttpRequest`:
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
- Методы `XMLHttpRequest`:
- `open(method, url[, async])` — инициализирует новый запрос.
- `send([body])` — отправляет запрос на сервер.
- События `XMLHttpRequest`:
- `onreadystatechange` — срабатывает при изменении состояния запроса.
2. Fetch API
Fetch API предоставляет более современный и мощный способ работы с асинхронными запросами и управлением сетевыми ресурсами.
- Пример использования Fetch API:
fetch("https://api.example.com/data")
.then(response => response.json()) // преобразование ответа в JSON
.then(data => console.log(data))
.catch(error => console.error("Ошибка:", error));
- Основные преимущества Fetch API:
- Возвращает промисы, делая код более чистым и легким для чтения.
- Легко использовать для отправки запросов других типов (POST, PUT, DELETE).
3. Обработка ответов от сервера
- Обработка JSON:
Данные часто возвращаются в формате JSON, который легко использовать в JavaScript.
```javascript
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => {
console.log("Полученные данные:", data);
});
- Обработка ошибок:
Важно правильно обрабатывать возможные ошибки при запросах к серверу.
```javascript
fetch("https://api.example.com/data")
.then(response => {
if (!response.ok) {
throw new Error("Сетевая ошибка");
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error("Ошибка:", error));
Задание для самостоятельной работы
1. Создайте функцию для отправки GET-запроса к публичному API (например, https://jsonplaceholder.typicode.com/posts), используя Fetch API.
2. Выведите полученные данные на веб-страницу в виде списка.
3. Добавьте обработку ошибок для вашего запроса.
Заключение
AJAX и Fetch API играют ключевую роль в создании динамичных и интерактивных веб-приложений, позволяя разработчикам асинхронно обмениваться данными с сервером. Это делает веб-приложения более отзывчивыми и улучшает пользовательский опыт. Владение этими технологиями является важным навыком для современного веб-разработчика.