通过JavaScript的Ajax的get与post方式实现
使用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
今日份作业,做完了记录一下