AJAX检测用户名是否存在的方法（利用ajax查询数据库）真没想到

101 0 0

<!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>

# 随心笔谈