Ajax——异步检查用户名是否存在示例

前端技术 2023/09/01 AJAX
在任何网站注册用户的时候，都会检查用户是否已经存在。很久以前的处理方式是将所有数据提交到服务器端进行验证，很显然这种方式的用户体验很不好；后来有了Ajax，有了异步交互，当用户输完用户名继续填写其他信息的时候，Ajax就将信息发到了服务器去检查该用户名是否已经被注册了，这样如果用户名已经存在，不用等用户将所有数据都提交就可以给出提示。采用这种方式大大改善了用户体验。
regist.jsp
复制代码 代码如下:

<%@ page language=\"java\" contentType=\"text/html; charset=UTF-8\"
pageEncoding=\"UTF-8\"%>
<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
<title>Insert title here</title>
<script type=\"text/javascript\">
var xmlHttp;
//创建Ajax核心对象XMLHttpRequest
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject(\"Microsoft.XMLHTTP\");
}
}
function checkUsername(username){
createXMLHttp();

//设置请求方式为GET，设置请求的URL，设置为异步提交
xmlHttp.open(\"GET\",\"CheckServlet?username=\"+username,true);

//将方法地址复制给onreadystatechange属性
//类似于电话号码
xmlHttp.onreadystatechange = checkUsernameCallback();
//将设置信息发送到Ajax引擎
xmlHttp.send(null);
}
function checkUsernameCallback(){
//Ajax引擎状态为成功
if(xmlHttp.readyState == 4){
//HTTP协议状态为成功
if(xmlHttp.status == 200){
var text = xmlHttp.responseText;
if(text == \"true\"){
document.getElementById(\"msg\").innerHTML = \"此用户名已存在，无法使用！\";
}else{
document.getElementById(\"msg\").innerHTML = \"此用户名可以使用\";
}
}
}
}
</script>
</head>
<body>
<form action=\"regist.jsp\" method=\"post\">
用户名:<input type=\"text\" name=\"username\" onblur=\"checkUsername(this.value)\"><span id=\"msg\"></span><br/>
密  码:<input type=\"password\" name=\"password\"><br/>
<input type=\"submit\" value=\"注册\">
<input type=\"reset\" value=\"重置\">
</form>
</body>
</html>

CheckServlet.java
复制代码 代码如下:

public class CheckServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public static final String DBDRIVER = \"com.microsoft.sqlserver.jdbc.SQLServerDriver\";
public static final String DBURL = \"jdbc:sqlserver://localhost:1433;DatabaseName=bbs\";
public static final String DBUSER = \"sa\";
public static final String DBPASS = \"pass\";

public CheckServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding(\"UTF-8\");
response.setContentType(\"text/html\");
Connection conn = null;
PreparedStatement pst = null;
ResultSet rs = null;
PrintWriter out = response.getWriter();
String username = request.getParameter(\"usernaem\");
try{
Class.forName(DBDRIVER);
conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS);
String sql = \"select count(username) from user where username=?\";
pst = conn.prepareStatement(sql);
pst.setString(1,username);
rs = pst.executeQuery();
if(rs.next()){
if(rs.getInt(1)>0){//用户名已经存在了
out.print(\"true\");
}else{
out.print(\"false\");
}

}
}catch(Exception e){
e.printStackTrace();
}finally{
try{
conn.close();
}catch(Exception e){
e.printStackTrace();
}
}
}
}

本文地址：https://www.stayed.cn/item/1387

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案