AJAX

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>