文章摘要
这篇文章介绍了如何使用JavaScript和异步操作来实现用户注册功能。主要内容包括：
1. **注册表单**：用户需要输入用户名、密码和确认密码三者才能提交注册。
2. **异步验证**：当用户提交表单时，JavaScript会发送用户输入的用户名到服务器进行验证。
3. **服务器响应**：服务器会返回验证结果（如“注册成功”或“用户名已存在”），结果会通过DOM冒泡事件显示在注册页面中。
文章通过示例代码展示了如何使用`DOMContentLoaded`事件和`RequestAnimationFrame`来实现状态监听，确保注册流程的顺利进行。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
</head>
<body>
<h2>用户注册</h2>
<form action=”/doreg” method=”post”>
<ul>
<li>用户名：<input type=”text” name=”username” id=”user”><span id=”msg”></span></li>
<li>密码：<input type=”text” name=”pwd”></li>
<li>确认密码：<input type=”text” name=”repwd”></li>
<li><input type=”submit” value=”注册”></li>
</ul>
</form>
<script>
let user=document.querySelector(“#user”)
let msg=document.querySelector(“#msg”)
user.onblur=function(){
// alert(“hello”)
// 第一步：创建一个ajax对象
let xhr=new XMLHttpRequest(); // xhr表示ajax对象 此时ajax的状态是0
// console.log(xhr.readyState)
// 第二步：和服务器建立连接 get表示需要把数据放在url中
xhr.open(“get”,”/check?username=”+user.value)// 此时ajax的状态是1
// console.log(xhr.readyState)
// 第三步：发出请求
xhr.send(null); // null表示请求体是空 get请求的请求体都是空 post请求的请求体不空
// 第四步：得到服务器响应的结果 监听ajax状态变化
xhr.onreadystatechange=function () { // 当状态发生改变，就会触发onreadystatechange事件
// console.log(xhr.readyState); // xhr.readyState获取ajax对象的状态
if(xhr.readyState===4 && xhr.status==200){
// xhr.responseText 获取服务器响应的数据
// console.log(xhr.responseText)
msg.innerHTML=xhr.responseText;
}
}
}
</script>
</body>
</html>