案例1.用Ajax实现用户名的校验
用Ajax实现用户名的校验
java的验证类
1 public class UserDao { 2 public boolean checkUserName(String name) { //这里的name是网页上用户输入的用户名 3 Connection conn = JdbcUtil.getConnection(); //实现和和数据库的连接，这个方法这里没有写，只要知道这是用来连接数据库的 4 PreparedStatement ps = null; 5 ResultSet rs = null; 6 boolean flag = false; 7 String sql = "select * from ajaxuser where username=?"; 8 try { 9 ps = conn.prepareStatement(sql); 10 ps.setString(1, name); 11 rs = ps.executeQuery(); 12 if (rs.next()) { //如果数据库中有下一个，那就说明数据库中已经有相同的用户名了，那就返回true 13 flag = true; 14 } 15 } catch (SQLException e) { 16 e.printStackTrace(); 17 } 18 return flag; //没有重名返回false 19 } 20 }
MyServlet类主要通过Ajax是得到网页上的用户名，在把用户名放入到上面的方法中，在把得到的结果返回到界面
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 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <html> 3 <script type="text/javascript"> 4 var XMLHttpReq; 5 6 function createXMLHttpRequest() { //这是固定膜拜，因为浏览器有很多种所以判断，这个方法是得到XMLHttpRequest对象 7 if (window.XMLHttpRequest) { 8 9 XMLHttpReq = new XMLHttpRequest(); 10 } else if (window.ActiveXObject()) { 11 12 try { 13 XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); 14 } catch (e) { 15 XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 16 } 17 } 18 } 19 function back(){ 20 alert(XMLHttpReq.readyState); 21 if(XMLHttpReq.readyState==4){ //判断对象状态是否完成 22 if(XMLHttpReq.status==200){ 23 //这里相当于得到servlet输出的<response><a>0</a></response>这个标签 24 var xmlData=XMLHttpReq.responseXML; 25 var un=document.getElementById("un"); 26 //得到a标签的第一个子标签，也就是文本标签的value值 27 var flag =xmlData.getElementsByTagName("a")[0].firstChild.nodeValue; //就是得到0或者1 28 if(flag==1){ 29 un.innerHTML="该邮箱已被注册,请重新输入...."; //这就是span的作用了，用来回显 30 }else if(flag==0){ 31 un.innerHTML="恭喜该邮箱可以使用.."; 32 }} }} 33 function checkUserName(){ 34 var username=document.getElementById("username").value; //得到客户端输入的name 35 var url="MyServlet?username="+username; 36 createXMLHttpRequest(); 37 1 XMLHttpReq.onreadystatechange=back; //这里back可以没有括号也可以有，每当change改变一次都会调用back方法 38 XMLHttpReq.open("GET",url,true); 39 XMLHttpReq.send(null); //上面的back方法就已经执行了，其实是没有多大区别，这主要是readyState方法的特点，每一次值改变都会触发onreadystate change方法，放在上面和下面唯一区别就是放在下面back方法多执行一次，但也没有关系，因为back方法了只有一个判断，只有最后一次readyState=4时，
才为true，所以没有关系具体的自己理解 41 } 42 </script> 43 <body> 44 <form action="" > //这里可以不写因为上面url写了 45 用户名:<input type="text" name="username" id="username" onblur="checkUserName()"><span id ="un"></span><br/> //这里的span标签主要是用来回显 用的很机智 46 密码:<input type="password" name="password" ><br/> 47 <input type="submit" value="注册"> 48 </form> 49 </body> 50 </html> 51 52 总结：这个以后应该会经常用到，没什么技术难点，自己多看多理解
