Асинхронное взаимодействие с сервером через PHP и JavaScript

Расширенные примеры использования AJAX с PHP

Пример 1: POST запрос с передачей JSON и обработка ошибок

<!-- index.html -->
<button id="sendBtn">Отправить данные</button>
<script>
document.getElementById('sendBtn').addEventListener('click', async () => {
  const payload = {
    userId: 123,
    email: 'user@example.com'
  };
  try {
    const response = await fetch('process.php', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(payload)
    });
    if (!response.ok) throw new Error('Сервер вернул ошибку ' + response.status);
    const result = await response.json();
    console.log('Успех:', result);
  } catch (err) {
    console.error('Ошибка запроса:', err);
  }
});
</script>

<!-- process.php -->
<?php
header('Content-Type: application/json');
$input = json_decode(file_get_contents('php://input'), true);
if (!$input || empty($input['email'])) {
  http_response_code(400);
  echo json_encode(['error' => 'Некорректные данные']);
  exit;
}
// имитация сохранения
$response = ['id' => $input['userId'], 'status' => 'saved'];
echo json_encode($response);

При успешной отправке в консоль выводится:
{id: 123, status: "saved"}
При ошибке (неверный email) выводится:
{error: "Некорректные данные"}

Пример 2: Загрузка файла с прогрессом (используя XMLHttpRequest)

<input type="file" id="fileInput" />
<progress id="progressBar" value="0" max="100"></progress>
<script>
document.getElementById('fileInput').addEventListener('change', function() {
  const file = this.files[0];
  const formData = new FormData();
  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload.php', true);

  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      const percent = Math.round((e.loaded / e.total) * 100);
      document.getElementById('progressBar').value = percent;
    }
  };

  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('Файл загружен:', xhr.responseText);
    } else {
      console.error('Ошибка загрузки');
    }
  };

  xhr.send(formData);
});
</script>

<!-- upload.php -->
<?php
header('Content-Type: application/json');
if (empty($_FILES['file'])) {
  http_response_code(400);
  echo json_encode(['error' => 'Файл не получен']);
  exit;
}
$uploadDir = 'uploads/';
if (!is_dir($uploadDir)) mkdir($uploadDir, 0777, true);
$path = $uploadDir . basename($_FILES['file']['name']);
move_uploaded_file($_FILES['file']['tmp_name'], $path);
echo json_encode(['path' => $path, 'size' => $_FILES['file']['size']]);

Прогресс заполняется, после завершения выводится:
{"path":"uploads/photo.jpg","size":204800}

Пример 3: Отправка данных формы с валидацией на PHP и ответом в JSON

<form id="regForm">
  <input name="username" placeholder="Имя пользователя" />
  <input name="email" type="email" placeholder="Email" />
  <button type="submit">Зарегистрироваться</button>
</form>
<div id="message"></div>
<script>
document.getElementById('regForm').addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  try {
    const response = await fetch('register.php', { method: 'POST', body: formData });
    const result = await response.json();
    if (result.success) {
      document.getElementById('message').innerHTML = 'Регистрация прошла успешно!';
    } else {
      document.getElementById('message').innerHTML = 'Ошибка: ' + result.error;
    }
  } catch (err) {
    document.getElementById('message').innerHTML = 'Сетевая ошибка';
  }
});
</script>

<!-- register.php -->
<?php
header('Content-Type: application/json');
$errors = [];
if (empty($_POST['username'])) $errors[] = 'Не указано имя';
if (empty($_POST['email']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) $errors[] = 'Некорректный email';
if (!empty($errors)) {
  http_response_code(422);
  echo json_encode(['success' => false, 'error' => implode(', ', $errors)]);
  exit;
}
// регистрация...
echo json_encode(['success' => true, 'user' => $_POST['username']]);

При корректных данных выводится:
{"success":true,"user":"John"}
При ошибке валидации:
{"success":false,"error":"Не указано имя, Некорректный email"}

Пример 4: Использование async/await с fetch и обработка разных статусов ответа

async function getUsers() {
  const url = 'api.php?type=users';
  try {
    const response = await fetch(url);
    if (!response.ok) {
      if (response.status === 404) throw new Error('Ресурс не найден');
      if (response.status === 500) throw new Error('Ошибка сервера');
      throw new Error('Неизвестная ошибка');
    }
    const users = await response.json();
    console.log('Пользователи:', users);
  } catch (err) {
    console.error(err.message);
  }
}
getUsers();

При успехе:
Пользователи: [{id:1, name:"Иван"}, {id:2, name:"Мария"}]
При ошибке 404:
Ресурс не найден