展会信息港展会大全

Ajax实现异步检查用户名是否存在示例
来源:互联网   发布日期:2016-01-26 10:18:52   浏览:1874次  

导读:在任何网站注册用户的时候,都会检查用户是否已经存在。很久以前的处理方式是将所有数据提交到服务器端进行验证,很显然这种方式的用户体验很不好;后来有 了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();

}

}

}

}

赞助本站

人工智能实验室

相关热词: Ajax 用户名

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港