一个书上的Ajax登录验证的源码以及分析

来源：互联网发布：劳丽诗淘宝店叫什么编辑：程序博客网时间：2024/05/22 16:32

1 示例描述：

登陆注册程序中，必须保证每个用户ID不能重复。这种检测用户ID的操作用Ajax完成。

行为：当用户输入ID后，会使用Ajax将信息提交到服务器上进行验证，如果此ID没有被人使用，则提示可以使用。如果被人使用了，则提示错误信息。

2 建立database和user表并插入数据：

create database mld;

create table user( userid varchar(30) primary key,name varchar(30),passwo
rd varchar(32));

insert into user values("admin","administrator","admin");

3 编写注册表单页 regist..html的分析：

① 若是ID重复，则不能提交。

form中有一个onsubmit="return "事件

② form表单中，ID项填写完成，失去焦点后，就立刻开始检测并提示（核心）

ID里面有一个 onblur="核心业务名字"事件。

在ID后面有一个<span></span>将提示的信息显示出来。

4 regist.html的核心代码：

<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<script type="text/javascript">
var xmlHttp;
var flag;

//创建xmlHttp
function createXMLHttp() {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}

//3的②中的核心函数
function checkUserid(userid) {
createXMLHttp();
xmlHttp.open("POST", "CheckServlet?userid=" + userid);//查找ID的请求

//open post参数后面的资源，有可能是现成的内容，也有可能是另一个需要执行的代码。该xmlhttp接收这段执行代码的返回的内容
xmlHttp.onreadystatechange = checkUseridCallback;//回调函数
xmlHttp.send(null);//发送请求
doucument.getElementById("msg").innerHTML = "正在验证";
}
function checkUseridCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var text = xmlHttp.responseText;//接收"CheckServlet?userid=" + userid 返回的内容
if (text == "true") {
flag = false;//flag的意义在于，若是返回true，则说明ID重复，则无法提交。为了满足3的①的业务逻辑
document.getElementById("msg").innerHTML = "用户ID重复，无法使用！";
} else {
flag = true;
document.getElementById("msg").innerHTML = "此用户ID可以注册！";
}
}
}
}
function checkForm(){//form能否提交，取决于返回的flag的内容. 在form中：onsubmit="return checkForm()"
return flag;
}

</script>
</head>
<body>

<form action="regist.html" method="post" onsubmit="return checkForm()">
用户ID:<input type="text" name="userid" onblur="checkUserid(this.value)" /> //离开焦点调用js中的业务逻辑
<span id="msg"></span><br /> 姓  名:<input type="text"
name="name" /></br> 密  码:<input type="password" name="password" /></br>
<input type="submit" vaule="注册" /> <input type="reset" value="重置" />
</form>
</body>
</html>

5 ：由js中的逻辑很容易看出在servlet中我们要的是什么：

名字：CheckServlet

业务：检查其userid是否存在。

若存在，返回"true"

若不存在，返回“false”

6 CheckServlet.java 代码：

package org.lxh.ajaxdemo ;
import java.sql.* ;
import java.io.* ;
import javax.servlet.* ;
import javax.servlet.http.* ;
public class CheckServlet extends HttpServlet{
public static final String DBDRIVER = "org.gjt.mm.mysql.Driver" ;
public static final String DBURL = "jdbc:mysql://localhost:3306/mldn" ;
public static final String DBUSER = "root" ;
public static final String DBPASS = "0000" ;//我的mysql数据库的密码
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
this.doPost(request,response) ;
}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
request.setCharacterEncoding("GBK") ;
response.setContentType("text/html") ;
Connection conn = null ;
PreparedStatement pstmt = null ;
ResultSet rs = null ;
PrintWriter out = response.getWriter() ;//返回用response返回。因为在js中是用post方法，所以在这里直接用doPost
String userid = request.getParameter("userid") ;//接收参数
try{
Class.forName(DBDRIVER) ;
conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS) ;
String sql = "SELECT COUNT(userid) FROM user WHERE userid=?" ;
pstmt = conn.prepareStatement(sql) ;
pstmt.setString(1,userid) ;
rs = pstmt.executeQuery() ;
if(rs.next()){
if(rs.getInt(1)>0){// 用户ID已经存在了
out.print("true") ;//返回true
} else {
out.print("false") ;//返回false
}
}
}catch(Exception e){
e.printStackTrace() ;
}finally{
try{
conn.close() ;
}catch(Exception e){}
}
}
}

6 部署servlet 到web.xml并启动服务器然后就可以执行了

0 0