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"); } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。