利用ajax实现用户名不唯一验证

1. 在前端页面中，通过监听输入框的键盘抬起事件，获取输入的用户名。

2. 发送一个ajax请求到后端，传递用户名参数。

3. 后端接收到请求后，查询数据库中是否存在该用户名。

4. 如果存在该用户名，则返回错误信息给前端。如果不存在，则返回成功信息。

5. 前端页面根据返回的信息，显示相应的提示，例如红色字体提示“用户名已存在”或绿色字体提示“用户名可用”。

以下是大致的示例代码：

前端页面：

<input type="text" id="username" onkeyup="checkUsername()" />

<div id="username_tip"></div>

<script>
function checkUsername() {
  var username = document.getElementById("username").value;
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'check_username.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        if (response.result === 'fail') {
          document.getElementById("username_tip").innerHTML = "<span style='color: red;'>用户名已存在</span>";
        } else {
          document.getElementById("username_tip").innerHTML = "<span style='color: green;'>用户名可用</span>";
        }
      }
    }
  };
  xhr.send('username=' + encodeURIComponent(username));
}
</script>

后端代码（使用PHP语言）：

<?php
$db_host = 'localhost';
$db_name = 'test';
$db_user = 'root';
$db_pass = '';

$username = $_POST['username'];

try {
  $dsn = "mysql:host=$db_host;dbname=$db_name;charset=utf8mb4";
  $pdo = new PDO($dsn, $db_user, $db_pass);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  $stmt = $pdo->prepare("SELECT COUNT(*) FROM users WHERE username = ?");
  $stmt->execute([$username]);
  $count = $stmt->fetchColumn();

  if ($count > 0) {
    echo json_encode(array("result" => "fail"));
  } else {
    echo json_encode(array("result" => "success"));
  }

} catch(PDOException $e) {
  echo json_encode(array("result" => "error", "message" => $e->getMessage()));
}
?>