AJAX PHP

PHP - 使用 AJAX 实现动态更新

AJAX（Asynchronous JavaScript and XML，异步 JavaScript 和 XML）允许网页在后台与服务器通信，而不会干扰现有页面的显示和行为。这使得动态更新和更具交互性的用户体验成为可能。

尽管“X”最初代表 XML（可扩展标记语言），但现代 AJAX 由于易于与 JavaScript 配合使用，通常使用 JSON（JavaScript Object Notation，JavaScript 对象表示法）进行数据交换。

AJAX PHP 示例：实时搜索建议

此示例演示了当用户在输入字段中键入时，网页如何在不进行页面完全刷新的情况下，从服务器上的 PHP 脚本获取建议。

实时示例占位符：

<!-- 占位符：想象这里有一个输入字段 -->
<label for="search">开始输入一个名字：</label>
<input type="text" id="search" name="search" onkeyup="showHint(this.value)">
<p>建议：<span id="txtHint"></span></p>

当用户在输入字段中输入时，建议会显示在下方。

示例讲解：前端 (HTML 和 JavaScript)

当用户键入字符时（onkeyup 事件），会调用 showHint() JavaScript 函数。

现代 JavaScript 通常使用 fetch API 发起 AJAX 请求。

以下是使用 fetch 的更新 HTML 结构和 JavaScript 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Search Suggestions</title>
    <style>
        #txtHint { color: green; }
        .error { color: red; }
    </style>
</head>
<body>

<h1>Live Search Example</h1>
<p>**在下面的输入字段中开始输入名字：**</p>
<form onsubmit="return false;"> <!-- 阻止表单提交 -->
    <label for="search">名字：</label>
    <input type="text" id="search" name="search" onkeyup="showHint(this.value)">
</form>
<p>建议：<span id="txtHint"></span></p>

<script>
async function showHint(str) {
    const hintElement = document.getElementById("txtHint");
    if (str.length == 0) {
        hintElement.innerHTML = "";
        hintElement.className = ''; // 清除任何错误类
        return;
    }

    try {
        // 构造 PHP 脚本的 URL，将输入作为查询参数传递
        const url = `gethint.php?q=${encodeURIComponent(str)}`;

        // 使用 fetch API 发起请求
        const response = await fetch(url);

        // 检查请求是否成功（状态码 2xx）
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        // 获取响应文本
        const data = await response.text();

        // 使用响应更新提示元素
        hintElement.innerHTML = data;
        hintElement.className = ''; // 成功时清除错误类

    } catch (error) {
        console.error('Error fetching suggestions:', error);
        hintElement.innerHTML = "获取建议时发生错误。";
        hintElement.className = 'error'; // 添加错误类用于样式设置
    }
}
</script>

</body>
</html>

代码解释 (JavaScript)：

showHint 函数被标记为 async，以便使用 await。
它检查输入字符串 (str) 是否为空；如果为空，则清空提示区域并返回。
它构造后端 PHP 脚本 (gethint.php) 的 url，并将用户输入 (str) 作为 URL 编码的查询参数 q 附加。
fetch(url) 启动一个异步 HTTP GET 请求。
await response.ok 检查 HTTP 状态码是否表示成功（例如 200 OK）。
await response.text() 将响应主体读取为纯文本。
txtHint span 元素的 innerHTML 会用接收到的数据进行更新。
try...catch 块处理在 fetch 过程中可能出现的网络错误或问题。
encodeURIComponent() 确保输入字符串安全地包含在 URL 中。
表单上的 onsubmit="return false;" 阻止了浏览器默认的表单提交行为。

示例讲解：后端 (PHP - `gethint.php`)

PHP 脚本接收查询参数 (q)，搜索预定义的名称列表，并返回匹配的建议作为纯文本（或对于更复杂的数据，可能返回 JSON）。

以下是一个改进的 gethint.php 脚本：

<?php
// 包含名字的数组（使用现代短数组语法）
$names = [
    "Anna", "Amanda", "Amy",
    "Brittany", "Bella",
    "Cinderella", "Cindy", "Chloe",
    "Diana", "Doris",
    "Eva", "Eve", "Evita", "Elizabeth", "Ellen", "Emily",
    "Fiona",
    "Gunda", "Grace",
    "Hege", "Hannah",
    "Inga", "Isabella",
    "Johanna", "Jessica",
    "Kitty", "Kayla",
    "Linda", "Liza", "Lily",
    "Nina", "Natalie",
    "Ophelia", "Olivia",
    "Petunia", "Penelope",
    "Raquel", "Riley",
    "Sunniva", "Sophia", "Scarlett",
    "Tove",
    "Unni",
    "Violet", "Vicky", "Victoria",
    "Wenche", "Willow",
    // 根据需要添加更多名字
];

// 从 URL 获取 'q' 查询参数
$query = $_GET["q"] ?? ''; // 使用 null 合并运算符以确保安全

$hint = "";

// 仅当查询不为空时才查找建议
if ($query !== "") {
    $queryLower = strtolower($query);
    $len = strlen($queryLower);
    $matches = [];

    foreach ($names as $name) {
        // 检查名字的开头是否与查询匹配（不区分大小写）
        if (strncasecmp($queryLower, $name, $len) === 0) {
            $matches[] = htmlspecialchars($name); // 对输出进行净化，防止 XSS
        }
    }

    // 格式化提示字符串
    if (!empty($matches)) {
        $hint = implode(", ", $matches);
    } else {
        $hint = "no suggestion";
    }
}

// 输出提示字符串（或 "no suggestion"）
// 如果需要，设置内容类型（尽管 text/html 通常是默认的）
// header('Content-Type: text/plain');
echo $hint;
?>

代码解释 (PHP)：

使用现代短数组语法 []。
使用 $_GET["q"] ?? '' 安全地获取查询参数 q。
将查询转换为小写 (strtolower) 以进行不区分大小写的比较。
使用 foreach 遍历 $names 数组。
使用 strncasecmp() 进行高效、不区分大小写的字符串开头比较。
将匹配的名字收集到 $matches 数组中。
在将每个匹配项添加到数组之前，对其使用 htmlspecialchars() 以防止如果名字包含特殊字符可能导致的 XSS 问题。
implode(", ", $matches) 将找到的名字连接成一个逗号分隔的字符串。
输出结果字符串或“no suggestion”。
考虑设置 Content-Type 头部（例如，如果返回 JSON 则设置为 text/plain 或 application/json）以提高清晰度，尽管浏览器通常可以正确处理纯文本。

这种 AJAX 模式是创建响应式 Web 应用程序的基础，这些应用程序可以根据用户交互或服务器事件动态更新页面的部分内容。