| 标题 | 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(); } } } } |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。