下面这个Ajax——异步检查用户名是否存在示例教程由小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!
在任何网站注册用户的时候,都会检查用户是否已经存在。很久以前的处理方式是将所有数据提交到服务器端进行验证,很显然这种方式的用户体验很不好;后来有了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" ""
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(){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("");
}
}
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/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();
}
}
}
}