Ajax——异步检查用户名是否存在示例_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();
}
}
}
}

时间: 2024-02-19 12:45:37

Ajax——异步检查用户名是否存在示例_AJAX相关的相关文章

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

在任何网站注册用户的时候,都会检查用户是否已经存在.很久以前的处理方式是将所有数据提交到服务器端进行验证,很显然这种方式的用户体验很不好:后来有 了Ajax,有了异步交互,当用户输完用户名继续填写其他信息的时候,Ajax就将信息发到了服务器去检查该用户名是否已经被注册了,这样如果用户名已经 存在,不用等用户将所有数据都提交就可以给出提示.采用这种方式大大改善了用户体验. regist.jsp 复制代码 代码如下: <%@ page language="java" contentT

Ajax异步方式实现登录与验证_AJAX相关

本文实例讲述了Ajax异步方式实现登录与验证的详细代码,分享给大家供大家参考.具体如下: 登录代码 这个是使用Bootstrap3的组件功能实现的 <div class="login_con_R"> <h4>登录</h4> <FORM id="loginFormId" class="form-horizontal" action="login" method="post&qu

ajax异步加载图片实例分析_AJAX相关

本文实例讲述了ajax异步加载图片的方法.分享给大家供大家参考,具体如下: 图片一般比较大,所以他们都是在基本网页加载后才逐渐加载上的,整个加载的过程非常不雅观,或者是从模糊逐渐变清晰,或者是从上往下拓展开(当然你也可以认为这些都是不错的特效).如果是通过定时更换img的src属性来实现图片的动态更换,由此带来的闪烁更让它难以接受,这可不是用alt属性就能让人愉快的. 联系时下比较热门的,号称"无"刷新的AJAX技术,利用XMLHttpRequest对象发起异步请求,待图像加载完毕再动

jquery的ajax同步和异步的理解及示例_AJAX相关

之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题.最近的项目用了到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除. 而异步则这个AJAX代码运行中的时候其他代码一样可以运行. jquery的async:false,这个属性 默认是true:异步,false:同步. 复制代码 代码如下: $.ajax({ type: "post",

$.ajax()方法进行网页间传值示例_AJAX相关

ajaxtext1.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <script type="text/javascript" language="javascript" src="jquery.js"></script> <

jquery ajax 向后台传递数组参数示例_AJAX相关

需求: 在JS中向后台传递数组参数 分析: JS中的数组是弱类型的可以放任何类型(对象.基本类型),但是如果数组中放的是对象类型,传递到后台是显示的只能是对象字符串--[object Object],原因如下: 在后台接收的时候,只能用request来接收,request.getParameterValues()方法返回的是一个String[],所以,应该是在前台传输的时候调用了对象的toString()方法,那么如果依然想传递对象怎么办?凉拌! 但是可以使用JSON字符串来实现,在后台把JSO

一个伪ajax图片上传代码实现示例_AJAX相关

复制代码 代码如下: <?php if($_FILES){ ?> <script> window.parent.ajaxUploadPicture.uploadCallback('yun_qi_img/5099213b07eca8065380ce7f75e95dda144ad348269.jpg'); </script> <?php die; } ?> <!DOCTYPE html> <html> <head> <s

jquery easyUI中ajax异步校验用户名_jquery

以前无聊写过一个小东西,其中有一个功能就是添加用户,当时并没有考虑用户名重复的问题,今日闲来无事,打算利用ajax的异步刷新来校验用户名是否存在.自己也是新手,刚刚大三,哈哈写的不对的地方请指出. 放上效果图: 首先是编写前的准备 我并不是用原生的js来写的ajax而是用的jqueryeasyUI框架中的ajax,所以在使用之前就必须要引入jquery的js文件. <link rel="stylesheet" type="text/css" href=&quo

jQuery异步验证用户名是否存在示例代码_jquery

现在有个需求就是异步验证用户名是否存在.用的技术是jQuery异步验证和struts2(其实springMVC也是一样的道理,都只是一个控制器). 表单: 复制代码 代码如下: <input class="width150" maxlength="32" type="text" id="dept_name" name="dept.dept_name" value="${dept.dept_n