案例1.用Ajax实现用户名的校验

2年前 (2022) 程序员胖胖胖虎阿

223 0 0

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