JavaScript/Ajax实现无刷新展示数据库内容的代码优化咨询

你当前的写法能跑出基础效果，但存在多个严重的性能、体验和安全问题，完全不适合实际使用：

• 轮询间隔设置为1ms是致命错误：相当于每秒向后端发起1000次请求，客户端浏览器的CPU、内存，后端服务器、数据库都会被瞬间打满，属于完全不可用的配置。
• 每次请求全量拉取全表渲染：哪怕只新增1条留言，也要查询所有历史数据、拼接完整HTML、全量替换DOM，数据量稍大就会出现明显卡顿，且全量替换innerHTML会打断用户正在进行的滚动、选中文本等操作，体验极差。
• 缺失必要的健壮性处理：原生XHR请求没有错误捕获，网络异常、后端报错时会静默失败；后端没有做写入逻辑的SQL注入防护，每次请求都重复新建数据库连接，额外消耗资源。
• 提交后无法做到真正即时展示：必须等下一次轮询才能看到自己发的内容，会有明显的延迟感。

针对简易喊话留言板的需求，按优先级调整即可：

1. 先修正轮询逻辑
   临时过渡可以把轮询间隔调整到3000ms（3秒）以上，减少无效请求。如果要更好的实时性+更低的资源消耗，后续可以换成SSE（服务器推送事件）替代短轮询，由后端维护连接，有新消息时主动推给前端，不需要前端反复发请求，比WebSocket更适合这种单向消息展示的场景。
2. 改成增量数据拉取
   后端不要直接返回渲染好的HTML，改为返回JSON格式数据。给每条留言加自增主键ID，前端每次请求时带上本地已加载的最新留言ID，后端只查询ID大于该值的新内容返回，没有新内容就返回空，大幅减少数据传输量和数据库查询压力。前端拿到新数据后，只把新条目追加到表格末尾，不要全量替换整个表格的DOM。
3. 优化提交体验
   表单提交用Ajax发送POST请求，提交成功后立刻把用户刚发的内容插入到页面列表里，不需要等待轮询更新，用户感知是发送后即时显示。后端处理写入时必须用预处理语句，避免SQL注入风险。
4. 补全错误处理
   给所有请求加异常捕获，网络出错时给出简单提示，不要静默失败。

前端页面（index.html） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>简易留言板</title>
  <style>
    table { border-collapse: collapse; margin: 20px 0; }
    td { border: 1px solid #ccc; padding: 8px 12px; }
    .form { margin: 20px 0; }
  </style>
</head>
<body>
  <!-- 提交表单 -->
  <div class="form">
    <input type="text" id="nameInput" placeholder="输入留言内容">
    <button id="submitBtn">发送</button>
  </div>
  <!-- 留言表格 -->
  <table id="msgTable">
    <thead>
      <tr>
        <td>#</td>
        <td>留言内容</td>
      </tr>
    </thead>
    <tbody id="msgList"></tbody>
  </table>

  <script>
    const msgList = document.getElementById('msgList');
    const nameInput = document.getElementById('nameInput');
    const submitBtn = document.getElementById('submitBtn');
    // 记录本地最新的留言ID，初始为0
    let lastId = 0;

    // 拉取新留言
    async function fetchNewMsg() {
      try {
        // 只拉取比lastId大的新内容
        const res = await fetch(`get_msg.php?last_id=${lastId}`);
        const data = await res.json();
        if (data.code !== 0) throw new Error(data.msg);
        // 把新留言追加到列表
        data.data.forEach(item => {
          const tr = document.createElement('tr');
          tr.innerHTML = `<td>${item.id}</td><td>${item.name}</td>`;
          msgList.appendChild(tr);
          // 更新最新ID
          lastId = item.id;
        });
      } catch (err) {
        console.error('拉取留言失败:', err);
      }
    }

    // 提交留言
    async function submitMsg() {
      const content = nameInput.value.trim();
      if (!content) return;
      submitBtn.disabled = true;
      try {
        const res = await fetch('add_msg.php', {
          method: 'POST',
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          body: `name=${encodeURIComponent(content)}`
        });
        const data = await res.json();
        if (data.code !== 0) throw new Error(data.msg);
        // 提交成功立刻把内容插到页面，不用等轮询
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${data.data.id}</td><td>${data.data.name}</td>`;
        msgList.appendChild(tr);
        lastId = data.data.id;
        nameInput.value = '';
      } catch (err) {
        alert('发送失败，请重试');
      } finally {
        submitBtn.disabled = false;
      }
    }

    // 页面加载完先拉一次历史留言，之后每3秒拉取新内容
    window.addEventListener('load', () => {
      fetchNewMsg();
      setInterval(fetchNewMsg, 3000);
      submitBtn.addEventListener('click', submitMsg);
      // 回车提交
      nameInput.addEventListener('keydown', e => {
        if (e.key === 'Enter') submitMsg();
      });
    });
  </script>
</body>
</html>

拉取留言接口（get_msg.php） #

<?php
$host_name = '你的数据库地址';
$database = '你的库名';
$user_name = '你的账号';
$password = '你的密码';

$link = new mysqli($host_name, $user_name, $password, $database);
if ($link->connect_error) {
  echo json_encode(['code' => 1, 'msg' => '数据库连接失败']);
  exit;
}
// 设置字符集
$link->set_charset('utf8mb4');

$lastId = intval($_GET['last_id'] ?? 0);
// 只查比last_id大的新留言
$stmt = $link->prepare("SELECT id, name FROM tb_data WHERE id > ? ORDER BY id ASC");
$stmt->bind_param("i", $lastId);
$stmt->execute();
$result = $stmt->get_result();
$list = [];
while ($row = $result->fetch_assoc()) {
  $list[] = $row;
}
echo json_encode(['code' => 0, 'data' => $list]);
$stmt->close();
$link->close();
?>

提交留言接口（add_msg.php） #

<?php
$host_name = '你的数据库地址';
$database = '你的库名';
$user_name = '你的账号';
$password = '你的密码';

$link = new mysqli($host_name, $user_name, $password, $database);
if ($link->connect_error) {
  echo json_encode(['code' => 1, 'msg' => '数据库连接失败']);
  exit;
}
$link->set_charset('utf8mb4');

$name = trim($_POST['name'] ?? '');
if (empty($name)) {
  echo json_encode(['code' => 1, 'msg' => '内容不能为空']);
  exit;
}
// 预处理写入，防SQL注入
$stmt = $link->prepare("INSERT INTO tb_data (name) VALUES (?)");
$stmt->bind_param("s", $name);
if ($stmt->execute()) {
  // 返回刚插入的内容和ID
  echo json_encode([
    'code' => 0,
    'data' => [
      'id' => $stmt->insert_id,
      'name' => $name
    ]
  ]);
} else {
  echo json_encode(['code' => 1, 'msg' => '写入失败']);
}
$stmt->close();
$link->close();
?>

如果后续要进一步降低服务器压力，可以把3秒短轮询换成SSE，实现有新消息才推送，完全不需要定时发请求，实时性也更高。

内容的提问来源于stack exchange，提问作者snork