JavaEE使用Ajax实现用户名查重(原生JavaScript)

使用XMLHTTPRequest对象来实现异步刷新
XMLHttpRequest对象的常用属性与方法：

readyState

XMLHTTPRequest对象发送的HTTP请求状态值，5种值

状态值	简介说明
0	XMLHTTPRequest对象未初始化
1	XMLHTTPRequest对象已经发送请求并执行open()方法，且完成相关资源的准备
2	XMLHTTPRequest对象请求发送完毕，且执行了send()方法，但是没有收到响应
3	XMLHTTPRequest对象开始读取响应信息，且收到HTTP响应的头部信息，响应体没有接收完毕
4	XMLHTTPRequest对象将响应信息全部接收完毕

当响应为4时，才代表接收完毕

status

HTTP相应的状态码

状态码	含义
200	服务器正常响应
400	无法找到请求资源
403	没有访问权限
404	访问资源存在，即路径可能错误
500	服务器内部错误，一般是代码问题

只有当status为200时才能响应正常

onreadystatechange

回调函数

responseText

响应格式为String

responseXML

响应格式为XML

open(method，url，asynchronous)

method：http的请求方式，post与get两种请求方式
url：服务端地址
asynchronous：请求的异步还是同步，ajax方式下使用异步，值为true与false

setRequestHeader（name，value）

设置HTTP头信息，使用post方式时需要设置，get方式一般不需要
get方式不许需要设置此方法
post方式：

上传方式	方法格式
包含文件上传	setRequestHeader（“Content-Type”，“multipart/form-data”）
不包含文件上传	setRequestHeader（“Content-Type”，“application/x-www-form-urlencoded;charset=UTF-8”））

send()

提交方式	使用
get	send() 或是send(null)
post	send(参数值)

代码

servlet

servlet中的doGet方法，doPost方法调用doGet

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		String account = request.getParameter("account");
		PrintWriter out = response.getWriter();
		System.out.println("test");
		try {
			boolean flag = new UserService().isExistAccount(account);
			if(flag) {
				System.out.println("不可用");
				out.write("true");		//该账号不可用
			}else {
				System.out.println("可用");
				out.write("false");     //该账号不可用
			}
			out.close();
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

逻辑层(service)

逻辑层里面包含了一个方法

	public boolean isExistAccount(String account) throws ClassNotFoundException, SQLException {
		return new UserDao().isExistAccount(account);
	}

持久层(dao)

   /**
	 * @param account 账号
	 * @return true为账号已存在  false 则账号不存在
	 * @throws ClassNotFoundException
	 * @throws SQLException
	 */
	public boolean isExistAccount(String account) throws ClassNotFoundException, SQLException {
		ResultSet rs = null;
		String sql = "select * from user where account=?";
		Object[] params = {account};
		rs = DBUtils.userQuery(sql, params);
		return rs.next()==true ? true : false;
		/*
		 * if(rs.next()) { return true; }else { return false; }
		 */
	}

DBUtil工具类的查询方法

	private static final String USER = "root"; 
	private static final String PASSWORD = "123456"; 
	private static final String URL = "jdbc:mysql:///web?useUnicode=true&characterEncoding=utf-8&useSSL=false"; 
	static Connection conn;
	static PreparedStatement pstmt;
	static ResultSet rs;
	/**
	 * 获取连接对象
	 * @return
	 * @throws SQLException
	 * @throws ClassNotFoundException
	 */
	public static Connection getConn() throws SQLException, ClassNotFoundException {
		Class.forName("com.mysql.jdbc.Driver");
		conn = DriverManager.getConnection(URL, USER, PASSWORD);
		return conn;	
	}
	/**
	 * 通用的查询
	 * @param sql SQL语句
	 * @param params 占位符即问号所需要的代替得值
	 * @return 返回一个集合
	 * @throws ClassNotFoundException
	 * @throws SQLException
	 */
	public static ResultSet userQuery(String sql, Object[] params) throws ClassNotFoundException, SQLException{
		//select * from customer where id=?
		conn = getConn();
		pstmt = conn.prepareStatement(sql);
		for(int i = 0; i < params.length; i++ ) {
			pstmt.setObject(i + 1, params[i]);
		}
		rs = pstmt.executeQuery();
		return rs;
	}
	/**
	 * 关闭资源 
	 * @param rs
	 * @param stmt
	 * @throws SQLException
	 */
	public static void closeSource(ResultSet rs, Statement stmt ) throws SQLException {
		if(rs != null) rs.close();
		if(stmt !=null)stmt.close();
	}

JS中的代码

    var tel = this.document.getElementById("tel");
    tel.onblur = function(){
    	//alert("SSDS")
        flag = !checkTel(this.value.trim());
        checkUserAccount();
//        checkUserAccountPost();
        changeTip(flag,telTip);
        
    }
    /*
 * JavaScript Document
 *
 */

function checkUserAccount(){
    var account = document.getElementById("tel").value;
    //通过Ajax异步方式请求服务端，获取对象
    var xHttp = getObcect();
    //设置回调函数
    xHttp.onreadystatechange = function (){
    	//状态码200且XMLHttpRequest对象的readyState属性为4
        if(xHttp.readyState == 4 && xHttp.status == 200){
            //接收服务端消息
            var data = xHttp.responseText;		//服务端以字符串格式返回
            var oEm = document.getElementById("telTip");
            if(data == "true"){
            	//账号不可用
                oEm.innerHTML = "该账号不可用"
                oEm.style.display = "block" ;
                oEm.style.color = "red" ;
            }else if(data == "false"){
            	//该账号可用
            	//alert("账号可用")
            	oEm.style.display = "none";
            }
        }
    }
    xHttp.open("get","ajax.do?account="+account);
    xHttp.send(null);   
}

function checkUserAccountPost(){
    var account = document.getElementById("tel").value;
//    alert(account)
    //通过Ajax异步方式请求服务端，获取对象
    var xHttp = getHttpObject();
    //设置回调函数
    	xHttp.onreadystatechange = function (){
    	//状态码200且XMLHttpRequest对象的readyState属性为4
        if(xHttp.readyState == 4 && xHttp.status == 200){
            //接收服务端消息
            var data = xHttp.responseText;		//服务端以字符串格式返回
            var oEm = document.getElementById("telTip");
            if(data == "true"){
            	//账号不可用
                oEm.innerHTML = "该账号不可用"
                oEm.style.display = "block" ;
                oEm.style.color = "red" ;
            }else if(data == "false"){
            	//该账号可用
            	//alert("账号可用")
            	oEm.style.display = "none";
            }
        }
    }
	    xHttp.open("POST","ajax.do");
	    //设置post方式头信息
		xHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
	    xHttp.send("account="+account); //account的值是由id从标签中获取得到，并非name
    }

//定义获取到XMLHttpRequest的方法
function getHttpObject(){
	//创建XMLHttpRequest
	var xHttp = null;
	//判断是否是IE低版本浏览器
	if(window.XMLHttpRequest){
		xHttp = new XMLHttpRequest();
	}else{
		//IE低版本浏览器
		xHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xHttp;
}

JSP中的

<input id="tel" type="text" name="account" placeholder="用户名">
<em id="telTip" >由10个数字组成！不能以0开头！</em>

有错请指正，部分资源取自bilibili颜群老师
https://www.bilibili.com/video/BV18s411u7EH?p=45
今日份作业，做完了记录一下