前言:
现在软件很讲究用户体验度,当我们在注册的时候,你是希望当你填完一系列信息之后点击注册时系统提示你用户名已经注册过,然后重新填写一遍信息,还是当你填完用户名就给提示??懒人都会选择后者对吧,来看看怎么实现的!
介绍:
这个效果的实现用到了AJAX,当用户离开用户名文本框输入时开始校验,需要在用户名标签中添加onblur事件,如下图:
接下来就需要在js中编写checkUsername()方法
js方法:
function checkUsername(){
//获取文本框值
var username=document.getElementById("username").value;
//1.创建Ajax核心对象XMLHttpRequest
var xhr=createXmlHttp();
//2.设置监听
xhr.onreadystatechange = function(){
//Ajax引擎状态为成功
if(xhr.readyState == 4){
//HTTP协议状态为成功
if(xhr.status == 200){
//显示返回结果信息
document.getElementById("span1").innerHTML = xhr.responseText; //请求结果内容
}
}
}
//3.打开连接
//设置请求方式为Get,设置请求的URL,设置为异步提交(true)
xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+ new Date().getTime()+"&username="+username,true);
//4.发送
xhr.send(null);
}
function cr