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();

  }

  }

  }

  }