PHP 与浏览器 Ajax：从 JSONP 迁移到 Fetch

<label for="keyword">搜索建议</label>
<input id="keyword" type="search" autocomplete="off" aria-controls="suggestions">
<ul id="suggestions"></ul>
<p id="suggestion-status" role="status" aria-live="polite"></p>

const input = document.querySelector('#keyword');
const list = document.querySelector('#suggestions');
const status = document.querySelector('#suggestion-status');

let debounceTimer = 0;
let activeController;
let requestSequence = 0;

input.addEventListener('input', () => {
  window.clearTimeout(debounceTimer);
  activeController?.abort();

  const query = input.value.trim();
  const sequence = ++requestSequence;

  if (query.length < 2) {
    list.replaceChildren();
    status.textContent = '至少输入两个字符。';
    return;
  }

  debounceTimer = window.setTimeout(() => {
    void loadSuggestions(query, sequence);
  }, 180);
});

async function loadSuggestions(query, sequence) {
  const controller = new AbortController();
  activeController = controller;

  try {
    const params = new URLSearchParams({ q: query });
    const response = await fetch(`/api/suggestions.php?${params}`, {
      headers: { Accept: 'application/json' },
      signal: controller.signal,
    });

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }

    const payload = await response.json();
    if (sequence !== requestSequence) return;
    if (!Array.isArray(payload.items)) {
      throw new TypeError('Invalid suggestion response');
    }

    const fragment = document.createDocumentFragment();
    for (const item of payload.items) {
      if (!item || typeof item.label !== 'string') continue;
      const option = document.createElement('li');
      option.textContent = item.label;
      fragment.append(option);
    }

    list.replaceChildren(fragment);
    status.textContent = list.childElementCount > 0
      ? `找到 ${list.childElementCount} 条建议。`
      : '没有匹配结果。';
  } catch (error) {
    if (error instanceof DOMException && error.name === 'AbortError') return;
    if (sequence !== requestSequence) return;

    list.replaceChildren();
    status.textContent = '暂时无法获取搜索建议，请稍后重试。';
  }
}

<?php
require_once __DIR__ . '/bootstrap.php';

header('Content-Type: application/json; charset=utf-8');
header('Cache-Control: no-store');

function sendJson(int $status, array $body): void
{
    http_response_code($status);
    echo json_encode($body, JSON_UNESCAPED_UNICODE | JSON_THROW_ON_ERROR);
    exit;
}

if (($_SERVER['REQUEST_METHOD'] ?? '') !== 'GET') {
    header('Allow: GET');
    sendJson(405, ['error' => 'method_not_allowed']);
}

$query = $_GET['q'] ?? null;
if (!is_string($query) || !mb_check_encoding($query, 'UTF-8')) {
    sendJson(400, ['error' => 'invalid_query']);
}

$query = trim($query);
if ($query === '' || mb_strlen($query, 'UTF-8') > 50) {
    sendJson(400, ['error' => 'invalid_query']);
}

$escapedQuery = strtr($query, ['!' => '!!', '%' => '!%', '_' => '!_']);

try {
    $statement = $pdo->prepare(
        "SELECT label FROM suggestions
         WHERE label LIKE :prefix ESCAPE '!'
         ORDER BY popularity DESC
         LIMIT 10"
    );
    $statement->execute(['prefix' => $escapedQuery . '%']);
    $labels = $statement->fetchAll(PDO::FETCH_COLUMN);

    $items = array_map(
        static fn (string $label): array => ['label' => $label],
        $labels,
    );
    sendJson(200, ['items' => $items]);
} catch (Throwable $error) {
    error_log('Suggestion query failed: ' . $error::class);
    sendJson(500, ['error' => 'server_error']);
}
?>