案例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 总结:这个以后应该会经常用到,没什么技术难点,自己多看多理解

 

posted on 2017-01-04 22:10  雨点的名字  阅读(1001)  评论(0编辑  收藏  举报