AJAX
支持异步请求, 支持页面的局部刷新
核心对象 XMLHttpRequest 对象
同步和异步
同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态
异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死。get和post都是异步。
JQuery发送ajax请求
$.get() – 只能发送异步请求, 默认字符集:utf-8
$("#btn1").click(function () {
// 发送get的异步请求
$.get("/web08_war_exploded/Demo05Servlet", // 请求地址
"id=1&name=张三", // 提交的请求参数
function(response) {
console.log("响应回来");
console.log("响应回来的数据是: " + response);
$("#myDiv").html(response);
},
"text" // 响应回来的数据类型 text-普通文本
);
});
$.post() – 只能发送异步请求, 默认字符集:utf-8
$("#btn2").click(function () {
// 发送post的异步请求
$.post("/web08_war_exploded/Demo05Servlet", // 请求地址
// "id=1&name=" + $("#input").val(), // 提交的请求参数
{
id: 1,
name: $("#input").val()
},
function(response) {
// response是响应回来的数据
$("#myDiv").html(response);
},
"text" // 响应回来的数据类型 text-普通文本
);
});
$.ajax()
$("#btn3").click(function () {
$.ajax({
url: "/web08_war_exploded/Demo05Servlet", // 请求地址
data: {
id: 1,
name: $("#input").val()
}, // 请求参数
success: function(data) {
$("#myDiv").html(data.name + ", " + data.age);
}, // 响应回调函数
dataType: "json",// 响应数据类型
type: "GET",// 请求方式
async: false // 异步/同步, 默认true:异步
});
});
json数据格式
使用Ajax进行前后台数据交换
移动端与服务端的数据交换
json就是JS中的对象
json解析
java对象返回到前端变成json对象——优化复杂字符串的拼接
例:jackson解析
//封装响应信息的对象
public class ResponseInfo {
private boolean flag;
public ResponseInfo() {
}
public boolean isFlag() {
return flag;
}
public void setFlag(boolean flag) {
this.flag = flag;
}
}
@WebServlet("/CheckUserServlet")
public class CheckUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username=request.getParameter("username");
UserService us=new UserServiceImpl();
boolean isExists=us.checkUser(username);
response.setContentType("application/json;charset=utf-8");
//封装响应信息(isExists)的对象
ResponseInfo info=new ResponseInfo();
info.setFlag(isExists);
//java对象->json对象
ObjectMapper mapper=new ObjectMapper();
//用响应的流把info对象写出去
mapper.writeValue(response.getOutputStream(),info);
案例——判断用户名是否存在+validate自定义校验规则
$.validator.addMethod("校验规则名称",function(value,element,params){})
<script>
$(function() {
//自定义校验规则
$.validator.addMethod("checkUser",
// function 返回false, 校验不通过
// 返回true ,校验通过
function(value,element,params){
// value: 输入框内容
// element: 输入框标签
// params: 校验参数
// 校验用户名是否存在,
var flag = false;
$.ajax({
url: "/web08_war_exploded/CheckUserServlet",
data: {username: value},
success: function(data) {
//data.flag -> true -> 存在
//data.flag -> false -> 不存在
flag = !data.flag;
},
dataType: "json",
async: false
});
// 存在, 返回false
// 不存在, 返回true
return flag;
});
// 校验表单 {}: json就是JS的对象
$("#regForm").validate({
// 校验的规则
rules: {
// 校验的输入框 input 对应的name
username: {
// 用户名校验的选项
required: true,
minlength: 6,
maxlength: 18,
checkUser: true
},
password: {
required: true
},
repassword: {
required: true,
equalTo: password
},
gender: {
required: true
},
email: {
required: true,
email: true
},
checkcode: {
}
},
messages: {
username: {
required: "用户名不能为空",
minlength: '请输入6~18位',
maxlength: '请输入6~18位',
checkUser: '用户名已存在'
},
password: {
required: "密码不能为空"
},
repassword: {
required: "密码不能为空",
equalTo: "两次密码不一致"
},
gender: {
required: "必须选择性别"
},
email: {
required: "邮箱不能为空",
email: "请输入正确邮箱"
}
}
});
</script>