档案
日志
相册
视频
分享
2008-05-20 | 利用Ajax实现对已存在用户名的验证
在进行各种用户注册功能开发的时候，经常需要对已有的用户名进行判断，如果当前注册的用户名或者电子邮件已经存在则提示用户改变，如不存在允许用户注册。
我们可以使用Ajax的异步请求功能实现此功能的开发，当用户在输入域中输入信息，当失去焦点时，向服务器发送异步请求，由服务端组件进行验证，返回XML格式或者JSON格式信息，在客户端脚本（JS）中利用DOM对返回数据进行操作、验证，根据验证结果提示用户。
首先开发服务器端组件，在此使用Servlet，通过获取的参数值（当前注册的用户名或电子邮件地址），利用数据库操作进行实际验证，返回相应的XML字符串（用户自己定义）。在这里格式为：
<results><result>yes/no</result></results>
当已经存在时，文本内容为yes，否则为no
开发的CheckServlet如下：（只列出doGet方法代码）
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Connection conn=null;
PreparedStatement pstmt=null;
ResultSet rst=null;
StringBuffer strB=new StringBuffer();
String username=request.getParameter("username");
try{
Class.forName("com.mysql.jdbc.Driver");
conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb","root","123456");
String strSQL="select * from Userinfo where username=?";
pstmt=conn.prepareStatement(strSQL);
pstmt.setString(1, username);
rst=pstmt.executeQuery();
strB.append("<results>");
strB.append("<result>");
if(rst.next()){
strB.append("yes");
}else{
strB.append("no");
}
strB.append("</result></results>");
response.setContentType("text/xml");
System.out.println(strB.toString());
response.getWriter().write(strB.toString());
}catch(ClassNotFoundException ex){
ex.printStackTrace();
}catch(SQLException ex){
ex.printStackTrace();
}
}
客户端代码是核心主体。准备两幅图片，作为验证成功或失败时显示的图片。代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function checkUser(){
createXMLHttpRequest();
var username=document.getElementById("username").value;
var queryString="checkServlet?username="+username;
xmlHttp.onreadystatechange=callback;
xmlHttp.open("GET",queryString,true);
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
makeResult();
}
}
}
function makeResult(){
var results=xmlHttp.responseXML.getElementsByTagName("result");
var content=results[0].firstChild.nodeValue;
var imgCheck=document.getElementById("check");
var imgError=document.getElementById("error");
if(content=='yes'){
imgError.style.display='block';
imgCheck.style.display='none';
document.getElementById("username").focus();
}else{
imgError.style.display='none';
imgCheck.style.display='block';
}
}
</script>
</head>
<body>
<form action="myaction.action" method="Post">
username:<input id="username" type="text" name="username" onblur="checkUser()"/>
<img id="check" src="images/check.gif" style="display:none"/><img id="error" style="display:none" src="images/error.gif"/>
<br>
password:<input id="password" type="text" name="password"/><br>
<input type="submit" value="register" style="enabled:false"/>
</form>
</body>
</html>
在此我们验证的是所注册的用户名是否存在，在输入注册的用户名后，离开焦点触发onblur事件，调用checkUser()方法，进而启动AJAX的处理过程。
makeResult方法通过获取的返回XML格式的内容决定是否验证成功，如果已经存在显示error.gif图片，并要求重新输入，如不存在则显示check.gif，此用户可以被注册。
注意返回的xml格式内容。
当输入已经存在的用户名admin时，已经存在，则显示错误，不能注册，重新输入，运行页面如下：
如果输入用户名superUser，则验证成功，还不存在，可以注册，运行页面如下：
分享
评论
想第一时间抢沙发么？