Отправка информации на сервер без обновления страницы: PHP и асинхронные запросы

Расширенные примеры асинхронной отправки данных

Дополнительные сценарии для углублённого понимания.

Пример 1: Загрузка файла с индикацией прогресса

С использованием XMLHttpRequest, так как fetch не поддерживает onprogress для загрузки.

<form id="uploadForm">
    <input type="file" name="file" id="file" />
    <progress id="progress" value="0" max="100"></progress>
    <button type="submit">Загрузить</button>
</form>
<script>
const form = document.getElementById('uploadForm');
form.addEventListener('submit', function(e) {
    e.preventDefault();
    const xhr = new XMLHttpRequest();
    const formData = new FormData(form);
    xhr.upload.addEventListener('progress', function(event) {
        if (event.lengthComputable) {
            const percent = Math.round((event.loaded / event.total) * 100);
            document.getElementById('progress').value = percent;
        }
    });
    xhr.open('POST', '/upload.php', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('Успешно загружено');
        }
    };
    xhr.send(formData);
});
</script>

Результат: прогресс-бар заполняется по мере отправки файла.

Пояснение: событие progress на xhr.upload отслеживает отправку. На сервере PHP обрабатывает файл как обычно.

Пример 2: Параллельная отправка нескольких запросов

Используем Promise.all для одновременной отправки и обработки ответов.

const urls = ['/api/1', '/api/2', '/api/3'];
const promises = urls.map(url =>
    fetch(url, { method: 'POST', body: JSON.stringify({ id: 1 }) })
        .then(res => res.json())
);
Promise.all(promises)
    .then(results => console.log('Все ответы:', results))
    .catch(err => console.error('Один из запросов упал:', err));

Результат: массив из трёх объектов, если все успешны. При ошибке одного - срабатывает catch.

Пояснение: Promise.all завершится, когда все промисы будут выполнены. Если нужна толерантность к ошибкам, можно использовать Promise.allSettled.

Пример 3: Обработка ответа с разными статусами (401, 403, 500)

Сервер может возвращать разные HTTP статусы. Клиент должен корректно их обрабатывать.

fetch('/protected', { method: 'POST' })
    .then(response => {
        if (response.status === 401) {
            throw new Error('Не авторизован');
        }
        if (response.status === 403) {
            throw new Error('Доступ запрещён');
        }
        if (!response.ok) {
            throw new Error('Ошибка сервера');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(err => console.error(err.message));

Результат: в консоли сообщение об ошибке в зависимости от статуса.

Пояснение: проверяем статус до обработки JSON. Это позволяет различать типы ошибок.

Пример 4: Отправка с пользовательскими заголовками (X-CSRF-TOKEN)

Для защиты от CSRF атак часто требуется передавать токен в заголовке.

fetch('/action', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': 'csrf_token_here'
    },
    body: JSON.stringify({})
});

Результат: сервер получает заголовок и может проверить токен.

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

Пример 5: Работа с сессиями при асинхронных запросах

Сессии PHP поддерживаются автоматически, если передаются куки. При асинхронных запросах куки отправляются, если запрос на тот же домен.

// client.js
fetch('/session.php', { method: 'POST', credentials: 'same-origin' });
// server session.php
<?php
session_start();
$_SESSION['user'] = 'Гость';
echo json_encode(['status' => 'ok']);
?>

Результат: данные сессии сохраняются и доступны в последующих запросах.

Пояснение: опция credentials определяет, будут ли отправлены куки. Для кроссдоменных запросов требуется 'include'.