Ajax使用原生态JS验证用户名是否存在
本文实例为大家分享了JS验证用户名是否存在的具体代码，供大家参考，具体内容如下
直接上代码:
reg_ajax.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Ajax请求servlet实现用户名是否存在验证</title>
</head>
<body>
<scripttype="text/javascript">
/**
*得到XMLHttpRequest对象
*/
functiongetajaxHttp(){
varxmlHttp;
try{
//Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest();
}catch(e){
//InternetExplorer
try{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("您的浏览器不支持AJAX！");
returnfalse;
}
}
}
returnxmlHttp;
}
/**
*发送ajax请求
*url--请求到服务器的URL
*methodtype(post/get)
*con(true(异步)|false(同步))
*functionName(回调方法名，不需要引号,这里只有成功的时候才调用)
*(注意：这方法有二个参数，一个就是xmlhttp,一个就是要处理的对象)
*/
functionajaxrequest(url,methodtype,con,functionName){
//获取XMLHTTPRequest对象
varxmlhttp=getajaxHttp();
//设置回调函数（响应的时候调用的函数）
xmlhttp.onreadystatechange=function(){
//这个函数中的代码在什么时候被XMLHTTPRequest对象调用？
//当服务器响应时，XMLHTTPRequest对象会自动调用该回调方法
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
functionName(xmlhttp.responseText);
}
}
};
//创建请求
xmlhttp.open(methodtype,url,con);
//发送请求
xmlhttp.send();
}
functioncheckUsername(){
varusername=document.getElementById('username').value;
//调用ajax请求Servlet
ajaxrequest("userServlet?username="+username,"POST",true,ckUsernameResponse);
}
functionckUsernameResponse(responseContents){
if(responseContents=='yes'){
document.getElementById('usernameMsg').innerHTML="<fontcolor='red'>用户名存在</font>";
document.getElementById('username').style="background-color:red";
}else{
document.getElementById('usernameMsg').innerHTML="";
document.getElementById('username').style="background-color:white";
}
}
</script>
<table>
<tr>
<td>用户名</td>
<td><inputtype="text"id="username"onblur="checkUsername()"/></td>
<td><divid="usernameMsg"></div></td>
</tr>
<tr>
<td>邮箱</td>
<td><inputtype="text"id="email"/></td>
<td><divid="emailMsg"></div></td>
</tr>
</table>
</body>
</html>
请求的Servlet代码如下，UserServlet.java
packagecn.bestchance.servlet;
importjava.io.IOException;
importjava.util.ArrayList;
importjavax.servlet.ServletException;
importjavax.servlet.annotation.WebServlet;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
*ServletimplementationclassUserServlet
*/
@WebServlet("/userServlet")
publicclassUserServletextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
doPost(request,response);
}
/**
*@seeHttpServlet#doPost(HttpServletRequestrequest,HttpServletResponseresponse)
*/
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
Stringusername=request.getParameter("username");
//这里使用ArrayList代替从数据库中查询数据
ArrayList<String>userList=newArrayList<String>();
userList.add("admin");
userList.add("test");
userList.add("chance");
//验证用户名是否存在
booleanflag=false;
for(Stringstring:userList){
if(string.equals(username)){
flag=true;
break;
}
}
if(flag){//用户名已存在
response.getWriter().print("yes");
}else{//用户名不存在
response.getWriter().print("no");
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。