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/>

密&nbsp;&nbsp;码:<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();

}

}

}

}


您可能感兴趣的文章:

  • Ajax异步提交表单数据的说明及方法实例
  • jquery ajax同步异步的执行最终解决方案
  • Ajax异步无刷新对局部数据更新
  • ajax异步刷新实现更新数据库
  • jquery ajax 同步异步的执行 return值不能取得的解决方案
  • 详谈 Jquery Ajax异步处理Json数据.
  • ajax 同步请求和异步请求的差异分析
  • AJAX下的请求方式以及同步异步的区别小结
  • jquery ajax 同步异步的执行示例代码
  • Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
  • js+AJAX异步从优酷专辑中采集所有视频及信息
  • ajax 同步和异步XMLHTTP代码分析
  • Ajax 对象 包含post和get两种异步传输方式
  • Ajax异步(请求)提交类 支持跨域
张贴在3