AJAX（Asynchronous JavaScript and XML）

1 什么是AJAX？

AJAX = Asynchronous JavaScript and XML。AJAX 是一种用于创建快速动态网页的技术。AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。

2 原生JS实现AJAX

//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

//2. 建立连接
/*
    参数：
        1. 请求方式：GET、POST
            * get方式，请求参数在URL后边拼接，send方法为空参
            * post方式，请求参数在send方法中定义
        2. 请求的URL：
        3. 同步或异步请求：true（异步）或 false（同步）
 */
xmlhttp.open("GET","ajaxServlet?username=tom",true);

//3.发送请求
xmlhttp.send();

//4.接受并处理来自服务器的响应结果
//获取方式 ：xmlhttp.responseText
//什么时候获取？当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
    //判断readyState就绪状态是否为4，判断status响应状态码是否为200
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       //获取服务器的响应结果
        var responseText = xmlhttp.responseText;
        alert(responseText);
    }
}

3 JQeury实现AJAX

 - $.ajax()
    * 语法：$.ajax({键值对});
     //使用$.ajax()发送异步请求
        $.ajax({
            url:"ajaxServlet1111" , // 请求路径
            type:"POST" , //请求方式
            //data: "username=jack&age=23",//请求参数
            data:{"username":"jack","age":23},
            success:function (data) {
                alert(data);
            },//响应成功后的回调函数
            error:function () {
                alert("出错啦...")
            },//表示如果请求响应出现错误，会执行的回调函数

            dataType:"text"//设置接受到的响应数据的格式
        });
 - $.get()：发送get请求
    * 语法：$.get(url, [data], [callback], [type])
        * 参数：
            * url：请求路径
            * data：请求参数
            * callback：回调函数
            * type：响应结果的类型
 - $.post()：发送post请求
    * 语法：$.post(url, [data], [callback], [type])
        * 参数：
            * url：请求路径
            * data：请求参数
            * callback：回调函数
            * type：响应结果的类型

4 AJAX小项目：按钮注销用户

• 前端代码

        $(function () {
            $("#btn-logout").click(function () {
                $.ajax({
                    url: "${pageContext.request.contextPath}/delete",
                    type: "POST",
                    data: {
                        "username": $("#username").val(),
                        "password": $("#password").val(),
                        "checkCode": $("#checkCode").val()
                    },
                    success: function (data) {
                        alert(data);
                    },
                    error: function () {
                        alert("删除失败！请核对学号、密码和验证码！！！");
                    },
                    dataType: "text"
                })
            });
        })

• 后端代码

        // 1.设置request编码，防止乱码
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        // 2.获取参数：学号、密码和验证码
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String checkCode = req.getParameter("checkCode");

        System.out.println(username + " " + password + " " + checkCode);

        // 3.获取生成的验证码并验证（需要删除Session中记录的验证码，实现验证码只能用一次的效果）
        HttpSession session = req.getSession();
        String CHECKCODE = (String) session.getAttribute("CHECKCODE");
        session.removeAttribute("CHECKCODE");

        // 4.验证验证码是否一致，如果不一致，返回错误信息
        if (!CHECKCODE.equalsIgnoreCase(checkCode)) {
            resp.getWriter().write("验证码错误！");
            return;
        }

        // 5.如果验证码一致，根据用户名密码查询用户，如果该用户存在，且用户名密码一致，删除该用户
        UserService userService = new UserServiceImpl();
        User user = userService.findOneByNameAndPass(username, password);
        System.out.println(user);
        if (user.getUser_name() == null) {
            resp.getWriter().write("该用户不存在！");
            return;
        }
        if (username.equals(user.getUser_name()) && password.equals(user.getUser_pass())) {
            boolean flag = userService.delete(username);
            if (flag) {
                resp.getWriter().write("删除成功，今后不会自动安全上报！");
                return;
            } else {
                resp.getWriter().write("删除失败，服务器内部错误，请联系管理员手动删除！");
                return;
            }
        } else {
            resp.getWriter().write("用户名或密码错误！");
            return;
        }