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