Ajax——异步检查用户名是否存在示例
程序员文章站
2022-05-18 08:31:48
在任何网站注册用户的时候，都会检查用户是否已经存在。很久以前的处理方式是将所有数据提交到服务器端进行验证，很显然这种方式的用户体验很不好；后来有了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();
}
}
}
}
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();
}
}
}
}