Ajax——异步检查用户名是否存在示例

2016-02-19 09:21 36 1 收藏

下面这个Ajax——异步检查用户名是否存在示例教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - Web开发 】

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

来源:http://www.tulaoshi.com/n/20160219/1590519.html

延伸阅读
标签: 电脑入门
修改用户是用户们在操作过程中,很喜欢做的一件事,如何才能让电脑的登录用户名变成自己的名字或喜欢的名字呢?或许对于Windows系统来说,要做到这点其实并不是太难,但是对于MAC电脑来说,要修改登录用户名,就显得比较麻烦一些了。那么具体该如何操作呢,下面就一起来看看吧。 修改Mac电脑用户名的方法: 1、当你打开 Terminal(终端),...
标签: Web开发
验证注册用户名必须为字母,或者字母+数字,或者全中文,字母是3-20个字符,中文是3-10个 [Ctrl+A 全选]
标签: Web开发
var xmlHttp;  uName() //用户名失去焦点时  {   if(all.uname.=="")   {    all.l1.innerHTML="不能为空!";    setTimeout("close(1)",1500);    return;   }   else   {    xmlHttp=new&nbs...
标签: 电脑入门
知道怎么去掉iis的登录用户名和密码吗? 方法: 安装了iis之后,打开默认网站 http://localhost/ 时弹出一个登陆窗口要求输入用户名和密码解决办法。 开始-运行-gpedit.msc-回车。 计算机配置--管理模板-windows 组件-Internet Exporer-Internet控制面板-安全页-Internet区域:双击登陆选项;选择已启用;登陆选项-自动使用当前用户名和密...
标签: Web开发
username1: "(^[a-zA-Z]{1}([a-zA-Z0-9_]){4,14}|(^[\u4E00-\uFA29]{1}+[a-zA-Z0-9\u4E00-\uFA29]{2,7}))$", 代码如下: script !-- function checkStr(str){ // [\u4E00-\uFA29]|[\uE7C7-\uE7F3]汉字编码范围 var re1 = new RegExp("^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9])*$"); if (!re1.test(str)){ alert("否"); return f...

经验教程

576

收藏

7
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部