4.4 AJAX и работа с сетью
5 из 5 шагов пройдено
4 из 4 баллов  получено

Урок 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 играют ключевую роль в создании динамичных и интерактивных веб-приложений, позволяя разработчикам асинхронно обмениваться данными с сервером. Это делает веб-приложения более отзывчивыми и улучшает пользовательский опыт. Владение этими технологиями является важным навыком для современного веб-разработчика.


Будьте вежливы и соблюдайте наши принципы сообщества. Пожалуйста, не оставляйте решения и подсказки в комментариях, для этого есть отдельный форум.
Оставить комментарий
Нет обсуждений. Начните первое.