利用ajax进行异步请求验证

来源：动视网责编：小采时间：2020-11-27 20:17:18

利用ajax进行异步请求验证

利用ajax进行异步请求验证: 场景描述：登录程序大家都不陌生，但如果要注册，则必须保证用户的ID不能重复，这种检测用户ID的操作可以通过Ajax完成。表结构： <html> <head><title>异步验证</title></head> <body>

推荐度：

点击下载本文 文档为doc格式

导读利用ajax进行异步请求验证: 场景描述：登录程序大家都不陌生，但如果要注册，则必须保证用户的ID不能重复，这种检测用户ID的操作可以通过Ajax完成。表结构： <html> <head><title>异步验证</title></head> <body>

场景描述：

登录程序大家都不陌生，但如果要注册，则必须保证用户的ID不能重复，这种检测用户ID的操作可以通过Ajax完成。

表结构：

<html>
<head><title>异步验证</title></head>
<body>
<script language="JavaScript">
	var xmlHttp;
	var flag;
	function createXMLHttp(){
	if (window.XMLHttpRequest){	// 创建XMLHttpRequest核心对象
	xmlHttp = new XMLHttpRequest()	// 使用FireFox内核
	}else {
	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");	// 使用IE内核的浏览器
	}
	}

	function checkUserid(userid){	// 显示信息
	createXMLHttp();	//
	// 设置请求,通过地址重写方式将userid传递到JSP中
	
	xmlHttp.open("POST","CheckServlet?userid="+userid);
	// 设置完请求后调用处理回调函数
	xmlHttp.onreadystatechange = checkUseridCallback;
	xmlHttp.send(null);	// 发送请求，不设置参数
	//document.getElementById("msg").innerHTML = "正在验证……";
	//alert("*******");

	}

	function checkUseridCallback(){	// 回调函数
	if (xmlHttp.readyState == 4){	// 数据返回完毕
	if (xmlHttp.status == 200){	// HTTP操作正常
	alert("*****8");
	var text = xmlHttp.responseText;// 接收返回内容
	if (text == "true"){
	flag = false;	// 无法提交表单
	document.getElementById("msg").innerHTML = "用户名ID重复，无法使用";
	}else {
	flag = true;	// 可以提交表单
	document.getElementById("msg").innerHTML = "恭喜！此用户ID可以注册";
	}
	}
	}
	}

	function checkForm(){	// 对表单判断能否进行提交操作
	return flag;
	}
</script>
	<form action="xxx.jsp" method="post" onsubmit="return checkForm()">
	用户ID：<input type="text" name="userid" onblur="checkUserid(this.value)"><span id="msg"></span><br>
	姓 名：<input type="text" name="name"><br>
	密 码：<input type="password" name="password"><br>
	<input type="submit" value="注册">
	<input type="reset" value="重置">
	</form>
</body>
<html>

Servlet.java（当然也可以配置成action，这个需要自己配置，不一定是要servlet的）

package zz.ajax;
import java.io.*;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.PreparedStatement;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckServlet extends HttpServlet{
	public static final String DBDRIVER = "org.gjt.mm.mysql.Driver";
	public static final String DBURL = "jdbc:mysql://localhost:3306/zz";
	public static final String DBUSER = "root";
	public static final String DBPASSWORD = "mysql";

	public void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException,java.io.IOException{
	this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException,java.io.IOException{
	request.setCharacterEncoding("GBK");
	response.setContentType("text/html");	// 设置回应的MIME
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	PrintWriter out = response.getWriter();	// 接收验证的userid
	String userid = request.getParameter("userid");
	try{
	Class.forName(DBDRIVER);	// 加载驱动
	conn = DriverManager.
	getConnection(DBURL, DBUSER, DBPASSWORD);	// 连接数据库

	String sql = "SELECT COUNT(userid) FROM user WHERE userid=?";
	pstmt = conn.prepareStatement(sql);
	pstmt.setString(1, userid);
	rs = pstmt.executeQuery();
	System.out.printf("*********");
	if (rs.next()){
	if (rs.getInt(1) > 0){	// 判断ID是否已存在
	out.print("true");	// 已存在
	}else {
	out.print("false");
	}
	}
	out.close();
	
	}catch (Exception e){
	e.printStackTrace();
	}finally {
	try{
	conn.close();
	}catch (Exception e){
	e.printStackTrace();
	}
	}
	}

}