Интеграция PHP с базами данных и JavaScript: ключевые подходы

Как выполнить асинхронный запрос с помощью XMLHttpRequest?

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

var xhr = new XMLHttpRequest();
xhr.open('GET', 'get_users.php', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
    if (xhr.status === 200) {
        var users = JSON.parse(xhr.responseText);
        console.log(users);
    } else {
        console.error('Ошибка ' + xhr.status);
    }
};
xhr.onerror = function() {
    console.error('Сетевая ошибка');
};
xhr.send();

Как упростить AJAX-запросы с помощью jQuery?

Библиотека jQuery предоставляет удобный метод $.ajax. Пример:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.ajax({
    url: 'get_users.php',
    method: 'GET',
    dataType: 'json',
    success: function(users) {
        $.each(users, function(i, user) {
            $('#user-list').append('<p>' + user.name + '</p>');
        });
    },
    error: function(xhr, status, error) {
        console.error(status + ': ' + error);
    }
});
</script>

Как обработать данные формы на PHP без перезагрузки страницы, используя JavaScript?

Отправка формы через Fetch API с методом POST. Пример: добавление нового пользователя.

// add_user.php
<?php
require 'config.php';
header('Content-Type: application/json');
$input = json_decode(file_get_contents('php://input'), true);
if (!$input || empty($input['name']) || empty($input['email'])) {
    http_response_code(400);
    echo json_encode(['error' => 'Заполните все поля']);
    exit;
}
$stmt = $pdo->prepare('INSERT INTO users (name, email) VALUES (:name, :email)');
$stmt->execute(['name' => $input['name'], 'email' => $input['email']]);
echo json_encode(['success' => true, 'id' => $pdo->lastInsertId()]);
?>

// frontend part
fetch('add_user.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({name: 'Иван', email: 'ivan@example.com'})
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

Как организовать двустороннюю связь в реальном времени между PHP и JavaScript?

Для приложений чата или уведомлений используются WebSocket. PHP-сервер (например, на базе Ratchet) устанавливает постоянное соединение. JavaScript использует WebSocket API.

// Пример серверной части (server.php) с Ratchet
<?php
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
require 'vendor/autoload.php';

class Chat implements MessageComponentInterface {
    protected $clients;
    public function __construct() {
        $this->clients = new \SplObjectStorage;
    }
    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
    }
    public function onMessage(ConnectionInterface $from, $msg) {
        foreach ($this->clients as $client) {
            if ($from !== $client) {
                $client->send($msg);
            }
        }
    }
    public function onClose(ConnectionInterface $conn) {
        $this->clients->detach($conn);
    }
    public function onError(ConnectionInterface $conn, \Exception $e) {
        $conn->close();
    }
}
$server = IoServer::factory(
    new Http\HttpServer(
        new Ws\WsServer(
            new Chat()
        )
    ),
    8080
);
$server->run();
?>

// JavaScript клиент
var ws = new WebSocket('ws://localhost:8080');
ws.onmessage = function(event) {
    console.log('Получено: ' + event.data);
};
ws.onopen = function() {
    ws.send('Привет сервер!');
};

Как получать обновления с сервера в реальном времени без WebSocket?

Можно использовать Server-Sent Events (SSE). Сервер отправляет поток данных, клиент слушает EventSource.

// sse.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
while (true) {
    // Запрос к БД (например, новая запись)
    $stmt = $pdo->query("SELECT COUNT(*) as cnt FROM users");
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    echo "data: " . json_encode(['count' => $row['cnt']]) . "\n\n";
    ob_flush();
    flush();
    sleep(5);
}
?>

// JavaScript
var source = new EventSource('sse.php');
source.onmessage = function(event) {
    var data = JSON.parse(event.data);
    document.getElementById('count').textContent = data.count;
};