AJAX异步校验
Posted 人间烟火地三鲜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX异步校验相关的知识，希望对你有一定的参考价值。
前台JS代码
/*异步验证用户名的输入格式以及是否存在*/
function CheckUsername(){
/*取到用户名输入框*/
var nametxt = document.getElementById("username");
/*获取输入的用户名值*/
var username = nametxt.value;
/*获取到装错误信息的span框*/
var sp = document.getElementById("usernameError");
var regex = /^[a-z0-9]{4,12}$/i;
/*创建异步函数*/
var xhr = createXmlHttp();
/*设置监听*/
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4){
if(xhr.status == 200){
/*为信息提示框赋文本*/
sp.innerhtml = xhr.responseText;
/*为信息提示框赋样式*/
sp.className = "infoError";
}
}
}
/*打开链接 · 不加时间戳则会引起浏览器的缓存*/
xhr.open("GET", "${pageContext.request.contextPath}/user_FindByName.action?time="+new Date().getTime()+"&username="+username, true);
/*发送*/
xhr.send();
}
function createXmlHttp(){
var xmlHttp;
try{//Firefox, Opera8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch(e){
try {//IE
xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
} catch (e) {}
}
return xmlHttp;
}
后台action代码
/**
* AJAX异步校验用户名
* @return String
* @throws IOException
*/
public String FindByName() throws IOException{
/*调用service进行查询*/
User existUser = userService.FindByUsername(user.getUsername());
/*获取response对象，向页面输出信息*/
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
/*判断是否为空*/
if(existUser != null){
//用户名已经存在，不能注册
/*有异常则向上抛出*/
response.getWriter().println("<font color=‘red‘>用户名已存在,不可用！</font>");
} else{
//用户名不存在，可以注册
response.getWriter().println("<font color=‘green‘>用户名可以使用！</font>");
}
/*AJAX操作，不需要页面跳转*/
return NONE;
}
以上是关于AJAX异步校验的主要内容，如果未能解决你的问题，请参考以下文章