使用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.由于要进行后台数据库的验证，因而数据库的建立是必不可少的，下面是数据库的建表语句
CREATE TABLE `t_user` (
`id` int(11) NOT NULL,
`name` varchar(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8
这里我们插入一条数据：name=qzp 以供ajax登陆验证
4.上面的准备工作做完以后，我们就可以开始servlet的验证，代码如下
注：此项目比较小，数据库的连接，查询等操作都写在一个类中，不过建议以后项目之中，还是要将数据库的连接，操作封装到一个类中，这样更加符合面向对象的设计。
还有发现有的同学不是很理解try{ }catch{ }的作用，看到他们的代码中catch{ }块都没有输出语句，这样出错调试时，导致控制台一片空白。其实，这就是少了e.printStackTrace();语句，他的作用就是打印输出错误信息，方便你的调试。
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的信息以后，会提示该用户已经存在;输入别的数据则不会提示。
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, HttpServletResponse response)
throws ServletException, IOException {
processRequest(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的信息以后，会提示该用户已经存在;输入别的数据则不会提示。