4 ноя 2024 в 00:50

Полный гайд по AJAX — Как работать с асинхронными запросами в браузере

Простой

Ожидает приглашения

Если вы хоть раз сталкивались с понятием AJAX, то наверняка слышали о том, как важно уметь загружать данные без перезагрузки страницы. В этом гайде разберем основы AJAX и покажем, как его использовать для создания динамичных и отзывчивых веб-приложений.

Что такое AJAX?

AJAX (Asynchronous JavaScript and XML) — это не конкретная технология, а метод, объединяющий несколько технологий для создания асинхронных HTTP-запросов. Благодаря AJAX страницы могут обновляться частично, что повышает скорость и удобство работы с сайтом. AJAX помогает нам подгружать данные с сервера, отображать их на странице и взаимодействовать с сервером, не перегружая браузер.

Главные составляющие AJAX:

XMLHttpRequest (XHR) — браузерный объект для создания HTTP-запросов. Сегодня его часто заменяют на Fetch API, но он все еще используется.
JSON — основной формат обмена данными в AJAX-запросах (XML практически вышел из употребления).
Асинхронность — благодаря этому страницы остаются интерактивными даже при загрузке данных.

Простой пример AJAX-запроса с XMLHttpRequest

Переходим к практике. Рассмотрим, как сделать AJAX-запрос с помощью XMLHttpRequest, начиная с самого простого запроса.

// 1. Создаем новый объект XMLHttpRequest
const xhr = new XMLHttpRequest();

// 2. Открываем запрос: метод GET, URL и асинхронно = true
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);

// 3. Настраиваем обработчик для обработки данных после загрузки
xhr.onload = function() {
    if (xhr.status === 200) {
        // Парсим ответ в JSON
        const data = JSON.parse(xhr.responseText);
        console.log(data);
    } else {
        console.error("Ошибка загрузки данных:", xhr.statusText);
    }
};

// 4. Отправляем запрос
xhr.send();

Пояснения к коду:

Создаем объект XMLHttpRequest. Он и есть основной компонент AJAX-запроса.
Настраиваем запрос: указываем метод (GET) и URL, к которому обращаемся. Последний аргумент true делает запрос асинхронным.
Обработка ответа: после загрузки проверяем статус (должен быть 200 для успешного ответа), парсим JSON и работаем с данными.
Отправка запроса: метод send() выполняет запрос.

Пример с POST-запросом

Допустим, вам нужно не только получать, но и отправлять данные. В этом случае используется метод POST:

// Данные, которые хотим отправить
const data = JSON.stringify({ title: "AJAX Guide", body: "How to use AJAX", userId: 1 });

// Открываем запрос
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);

// Устанавливаем заголовки
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

// Обработчик для получения ответа
xhr.onload = function() {
    if (xhr.status === 201) {
        console.log("Данные отправлены:", xhr.responseText);
    }
};

// Отправляем запрос с данными
xhr.send(data);

Переход на новый уровень: Использование Fetch API

Хотя XMLHttpRequest работает неплохо, у него есть свои минусы: избыточная структура, сложное управление ошибками, обработка JSON. Fetch API — это более современный и простой способ для выполнения AJAX-запросов.

Базовый пример GET-запроса с Fetch API

fetch("https://jsonplaceholder.typicode.com/posts")
    .then(response =&gt; {
        if (!response.ok) throw new Error(`Ошибка: ${response.status}`);
        return response.json();
    })
    .then(data =&gt; console.log(data))
    .catch(error =&gt; console.error("Ошибка запроса:", error));

Пример POST-запроса с Fetch API

С fetch отправка POST-запроса выполняется также просто:

fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ title: "AJAX Guide", body: "How to use AJAX", userId: 1 })
})
    .then(response =&gt; {
        if (!response.ok) throw new Error(`Ошибка: ${response.status}`);
        return response.json();
    })
    .then(data =&gt; console.log("Ответ от сервера:", data))
    .catch(error =&gt; console.error("Ошибка запроса:", error));

Преимущества Fetch API:

Чистый и лаконичный синтаксис.
Поддержка промисов позволяет использовать then и catch, улучшая работу с асинхронностью.
Поддержка async/await делает код более читабельным.

Асинхронный синтаксис async/await

В JavaScript синтаксис async/await предоставляет еще более элегантный способ работы с асинхронностью. Рассмотрим пример с использованием async и await для FETCH-запроса.

async function fetchData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        if (!response.ok) throw new Error(`Ошибка: ${response.status}`);
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Ошибка запроса:", error);
    }
}

fetchData();

Теперь наш асинхронный код выглядит как синхронный, благодаря чему его легко читать и отлаживать.

AJAX и JSON: Работаем с полученными данными

После получения данных с сервера часто требуется динамически обновить страницу. Вот пример, который показывает, как создать список статей на странице:

<div id="posts"></div>

Здесь мы загружаем список постов с сервера и выводим их на страницу, динамически создавая элементы HTML.

Заключение

Надеюсь, эта статья помогла вам понять, что такое AJAX.

Хабы:

Ajax