使用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();语句，他的作用就是打印输出错误信息，方便你的调试。 @H_403_26@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相关文章