使用ajax进行登陆验证

需求分析：通过ajax进行登陆验证，即如果输入的用户名数据库中存在，就提示用户该用户名已经存在。

我看了下，实现不是很困难，下面是代码，写下来也算巩固ajax的知识。

1.建立一个登陆页面

   <body>  
        ajax验证用户名是否存在<p>  <br>
        <form action="" method="get" name="form">                
            输入用户名：  
            <input type="text"  id="userName" name="name" onblur="validate()">  
            <span id="info"></span>  
            <br>  
           <input type="submit" value="登陆"> 
        </form>   
    </body>

2.上面我们看到，当用户的鼠标移开text文本框时，便会调用validate()函数，下面便是ajax的调用过程代码

<script type="text/javascript">
    var req;
       
    function validate() {
        //获取表单提交的内容
        var idField = document.getElementById("userName");
        //访问DoAjax这个servlet，同时把获取的表单内容idField加入url字符串，以便传递给DoAjax
        var url = "./DoAjax?id=" + escape(idField.value);                
        //创建一个XMLHttpRequest对象req
        if(window.XMLHttpRequest) {
            //IE7,Firefox,Opera支持
            req = new XMLHttpRequest();
        }else if(window.ActiveXObject) {
            //IE5,IE6支持
            req = new ActiveXObject("Microsoft.XMLHTTP");
        }
        /*
         open(String method,String url,boolean )函数有3个参数
         method参数指定向servlet发送请求所使用的方法，有GET,POST等
         boolean值指定是否异步，true为使用，false为不使用。
       	  我们使用异步才能体会到Ajax强大的异步功能。
         */
        req.open("GET",url,true);
        //onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态
        req.onreadystatechange = callback;
        //send函数发送请求
        req.send(null);                
    }

    function callback() {
        if(req.readyState == 4 && req.status == 200) {
            var check = req.responseText;
            show (check);
        }
    }

    function show(str) {
        if(str == "OK") {
            var show = "<font color='green'>恭喜！！用户名可用！</font>";
            document.getElementById("info").innerHTML = show;
        }
        else if( str == "NO") {
            var show = "<font color='red'>对不起，用户名已经存在！！请重新输入！</font>";
            document.getElementById("info").innerHTML = show;
        }
    }
    </script>

3.由于要进行后台数据库的验证，因而数据库的建立是必不可少的，下面是数据库的建表语句

CREATETABLE`t_user`(
`id`int(11)NOTNULL,
`name`varchar(11)DEFAULTNULL,
PRIMARYKEY(`id`)
)ENGINE=InnoDBDEFAULTCHARSET=utf8

这里我们插入一条数据：name=qzp 以供ajax登陆验证
4.上面的准备工作做完以后，我们就可以开始servlet的验证，代码如下
注：此项目比较小，数据库的连接，查询等操作都写在一个类中，不过建议以后项目之中，还是要将数据库的连接，操作封装到一个类中，这样更加符合面向对象的设计。
还有发现有的同学不是很理解try{ }catch{ }的作用，看到他们的代码中catch{ }块都没有输出语句，这样出错调试时，导致控制台一片空白。其实，这就是少了e.printStackTrace();语句，他的作用就是打印输出错误信息，方便你的调试。

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.sqlException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;



public class DoAjaxServlet extends HttpServlet {
   
        /**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	protected void processRequest(HttpServletRequest request,HttpServletResponse response)
             throws ServletException,IOException {
        response.setContentType("text/html;charset=gb2312");
        PrintWriter out = response.getWriter();
        
        try {
            response.setContentType("text/html");
            response.setHeader("Cache-Control","no-store");
            response.setHeader("Pragma","no-cache");
            response.setDateHeader("Expires",0);
            String name = request.getParameter("id");
            try {
		  Class.forName("com.MysqL.jdbc.Driver");
		} catch (ClassNotFoundException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
		}
	    Connection conn=DriverManager.getConnection("jdbc:MysqL://localhost:3306/login","root","sa");
            String sql="select * from t_user where name=?";
            PreparedStatement pst=conn.prepareStatement(sql);
    	    pst.setString(1,name);
    	    ResultSet rs = pst.executeQuery();
            //如果用户名存在，则返回一个用户名已经存在的信息
            if(rs.next()){
    	         out.write("NO");    	         
    	   }
            else {
                out.write("OK");
            }
        } catch (sqlException e) {			
		e.printStackTrace();		
        } finally { 
            out.close();
        }
    } 

    @Override
    protected void doGet(HttpServletRequest request,HttpServletResponse response)
    throws ServletException,IOException {
        processRequest(request,response);
    } 

    @Override
    protected void doPost(HttpServletRequest request,response);
    }

    @Override
    public String getServletInfo() {
        return "Short description";
    }

}

5.最好附上web.xml的配置信息
如何检查配置信息是否正确呢，下方红色字体，看是否可以Ctrl进去，如果能直接进到那个类，就说明此处配置正确。
<servlet>
<servlet-name>DoAjax</servlet-name>
<servlet-class> DoAjaxServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>DoAjax</servlet-name>
<url-pattern>/DoAjax</url-pattern>
</servlet-mapping>
6.测试结果
大家可以看到，因为数据库中已经存在qzp的信息，所以输出qzp的信息以后，会提示该用户已经存在;输入别的数据则不会提示。

使用ajax进行登陆验证

猜你在找的Ajax相关文章