用Ajax实现用户名的校验
UserDao类
1 public boolean checkUserName(String name) { 2 Connection conn = JdbcUtil.getConnection(); //得到与数据库连接，方法之前写过知道就好 3 PreparedStatement ps = null; 4 ResultSet rs = null; 5 boolean flag = false; 6 String sql = "select * from ajaxuser where username=?"; 7 try { 8 ps = conn.prepareStatement(sql); 9 ps.setString(1, name); 10 rs = ps.executeQuery(); 11 if (rs.next()) { 12 flag = true; //如果有下一个说明数据库中有这个用户名，那么返回为true 13 } 14 } catch (SQLException e) { 15 e.printStackTrace(); 16 } 17 return flag; 18 }
CheckUserNameServlet类
1 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 2 response.setContentType("text/xml;charset=UTF-8"); //采用XML输出 3 PrintWriter out =response.getWriter(); //同样是write写出 4 String username=request.getParameter("username"); //表单输入的用户名 5 UserDao dao=new UserDao(); 6 boolean flag =dao.checkUserName(username); //把表单中输入的用户名和数据库中进行核对 7 StringBuilder sb =new StringBuilder();//因为是输出为xml格式，所以要输出下面这种格式 8 //<response><a>0</a></response> <response><a>1</a></response> 9 sb.append("<response>"); 10 sb.append("<a>"); 11 if(flag){ 12 sb.append("1"); //说明如果存在在自定义标签a中value值为1 13 }else{ 14 sb.append("0"); //没有为0 15 } 16 sb.append("</a>"); 17 sb.append("</response>"); 18 String xml=sb.toString(); //完成拼接后转为String类型 19 out.write(xml); //再把这一整个xml格式输出 20 out.flush(); //立即执行 21 out.close(); 22 }
Jsp界面
1 <script type="text/javascript"> 2 var XMLHttpReq; 3 4 function createXMLHttpRequest() { //这里和上面一样得到XMLHttpRequest对象 5 if (window.XMLHttpRequest) { 6 7 XMLHttpReq = new XMLHttpRequest(); 8 } else if (window.ActiveXObject()) { 9 10 try { 11 XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); 12 } catch (e) { 13 XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 14 } 15 } 16 } 17 function back(){ 18 alert(XMLHttpReq.readyState); 19 if(XMLHttpReq.readyState==4){//判断对象状态是否完成 20 if(XMLHttpReq.status==200){ 21 //这里相当于得到<response><a>0</a></response>这个标签 22 var xmlData=XMLHttpReq.responseXML; 23 var un=document.getElementById("un"); 24 //得到a标签的第一个子标签，也就是文本标签的value值 25 var flag =xmlData.getElementsByTagName("a")[0].firstChild.nodeValue; 26 if(flag==1){ 27 un.innerHTML="该邮箱已被注册,请重新输入...."; //这就是span的作用了 28 }else if(flag==0){ 29 un.innerHTML="恭喜该邮箱可以使用.."; 30 }} }} 31 function checkUserName(){ 32 var username=document.getElementById("username").value; 33 var url="CheckUserNameServlet?username="+username; 34 createXMLHttpRequest(); 35 1 XMLHttpReq.onreadystatechange=back; //这里back可以没有括号也可以有 36 XMLHttpReq.open("GET",url,true); //按照道理这补和下一步一定要放在1的上面，不然这两部还没有执行 37 XMLHttpReq.send(null); //上面的back方法就已经执行了，其实是没有多大区别，这主要是readyState 38 方法的特点，每一次值改变都会触发onreadystatechange方法，放在上面和下面唯一区别就是放在下面back方法多执行一次，但也没有关系，因为back方法了只有一个判断，只有最后一次readyState=4时，才为true，所以没有关系具体的自己理解 39 } 40 </script> 41 <body> 42 <form action="" > //这里不写也可以因为上面url写了 43 用户名:<input type="text" name="username" id="username" onblur="checkUserName()"><span id ="un"></span><br/> //这里的span标签主要是用来回显用的很机智 44 密码:<input type="password" name="password" ><br/> 45 <input type="submit" value="注册"> 46 </form> 47 48 总结：这个以后应该会经常用到，没什么技术难点，自己多看多理解
原文：http://www.cnblogs.com/qdhxhz/p/6250412.html