Организация запросов к PHP без обновления страницы

Детальные примеры и расширенные сценарии

Пример 1: Отправка JSON и получение ответа от PHP

// client.js
async function sendJson() {
  const payload = { username: 'test', email: 'test@example.com' };
  const response = await fetch('/api/register.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
  const result = await response.json();
  console.log('Ответ сервера:', result);
}

PHP обрабатывает JSON:

<?php
// api/register.php
$input = json_decode(file_get_contents('php://input'), true);
if (empty($input['username'])) {
  http_response_code(400);
  echo json_encode(['error' => 'Имя пользователя обязательно']);
} else {
  echo json_encode(['success' => true, 'message' => 'Пользователь создан']);
}
?>

Результат: В консоли браузера появится объект с полем success или error. Код показывает, как принимать JSON на сервере и возвращать ошибки.

Пример 2: Загрузка файла без перезагрузки через FormData

<input type="file" id="fileInput" />
<button onclick="uploadFile()">Загрузить</button>

async function uploadFile() {
  const file = document.getElementById('fileInput').files[0];
  const formData = new FormData();
  formData.append('document', file);
  try {
    const response = await fetch('/upload.php', { method: 'POST', body: formData });
    const data = await response.json();
    alert('Загружен файл: ' + data.filename);
  } catch (err) {
    console.error(err);
  }
}

PHP:

<?php
// upload.php
if ($_FILES['document']['error'] === UPLOAD_ERR_OK) {
  $filename = uniqid() . '_' . $_FILES['document']['name'];
  move_uploaded_file($_FILES['document']['tmp_name'], 'uploads/' . $filename);
  echo json_encode(['filename' => $filename]);
} else {
  http_response_code(500);
  echo json_encode(['error' => 'Ошибка загрузки']);
}
?>

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

Пример 3: Polling – периодические запросы к PHP для проверки новых данных

// Запрос каждые 5 секунд
async function poll() {
  try {
    const res = await fetch('/api/new_messages.php');
    const messages = await res.json();
    if (messages.length) {
      updateChat(messages);
    }
  } catch (e) {
    console.error('Polling error', e);
  }
  setTimeout(poll, 5000);
}
poll();

PHP возвращает массив новых сообщений. Этот подход прост в реализации, но создаёт постоянную нагрузку на сервер. Для реального времени лучше использовать WebSocket или Server-Sent Events.

Пример 4: Обработка ошибок и таймаутов в fetch

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 3000); // таймаут 3 сек

try {
  const response = await fetch('/api/slow.php', { signal: controller.signal });
  clearTimeout(timeoutId);
  if (!response.ok) {
    // Обработка HTTP ошибок (4xx, 5xx)
    const errorData = await response.json();
    console.error('Сервер вернул ошибку:', errorData);
    return;
  }
  const data = await response.json();
  console.log('Данные:', data);
} catch (error) {
  if (error.name === 'AbortError') {
    console.error('Запрос был отменён по таймауту');
  } else {
    console.error('Сетевая ошибка', error);
  }
}

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

Пример 5: Работа с заголовками ответа PHP для предотвращения кэширования

<?php
// api/nocache.php
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Pragma: no-cache');
header('Expires: 0');
echo json_encode(['time' => time()]);
?>

Клиент каждый раз будет получать свежие данные. Это важно для AJAX-запросов, где нужна актуальная информация.

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