<!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;
}
}
<!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>
© 版权声明
文章版权归作者所有,未经允许请勿转载。