AJAX

AJAX

飞熊 • 2023年12月26日下午6:32 • 后端笔记 • 阅读 209

Ajax（Asynchronous JavaScript XML)异步请求

异步和同步区别

同步：多个操作不能同时进行，只能一个一个来，

异步：多个操作之间不需要相互等待，可以同时进行

用途：对页面进行局部更新；不需要更新整个页面

1.1. 在JS中使用Ajax

<body>
<script>
    let xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 使用GET请求方式 true表示异步 false表示同步
    xmlhttp.open("GET", "/aja", true);
    xmlhttp.send();
</script>
</body>

1.2. jQuery对Ajax的封装

1.2.1. ajax() 方法

参考：https://www.w3school.com.cn/jquery/ajax_ajax.asp

语法

    		// 发送Ajax请求
            $.ajax({
                //请求路径 ，url是必须的，下面都是可选的
                url: '/aja',
                //请求方式
                type: 'GET',
                //请求参数
                data: {username: 'anne', password: '666'},
                //期望服务器返回的数据格式
                dataType: 'xml',
                //请求成功后会执行的回调函数 data就是服务器返回的数据,status 是状态码，xhr是XMLHttpRequest对象
                success: function (data, status, xhr) {
                    // xml
                    console.log(data);
                    console.log(status);
                    console.log(xhr);
                },
                // 是否为异步 同步
                async: true
            })

服务器返回的数据格式有哪些？

“xml”: 返回 XML 文档，可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
“json”: 返回 JSON 数据。
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
“text”: 返回纯文本字符串

1.2.2. get() &post()

语法格式

            $.post(
                '/aja',  //  url路径
                {},  // 请求的参数数据
                function (data) {}, // 请求成功后的回调函数
                'html' // 期望服务器返回的数据格式
            );

发送get请求

  $.get('/aja', {
                username: $("input:text").val(),
                password: $('input:password').val()
            }, function (data, status, xhr) {
                console.log(data);
            }, 'text');

发送post请求

     $.post('/aja', {
                username: $("input:text").val(),
                password: $('input:password').val()
            }, function (data, status, xhr) {
                console.log(data);
            }, 'text');

1.2.3.案例

1.2.3.1.局部刷新搜索数据

页面代码

<body>
<!--本地资源引入-->
<script src="js/jquery-3.2.1.min.js"></script>
搜索词： <input type="text"> <br>
提示： <span id="show"></span>
<script>
    $(function () {
        // 键盘松开事件
        $('input:text').keyup(function () {
            $.get('/sea', {para: $('input:text').val()}, function (data) {
                $('#show').text(data)
            })
        })
    })
</script>
</body>

后台代码

@WebServlet("/sea")
public class SearchServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("get requet");
        //拿到搜索词
        String para = req.getParameter("para");
        String data = "";
        if ("a".equals(para)) {
            data = "anne anna";
        } else if ("t".equals(para)) {
            data = "tom tommy";
        } else if ("j".equals(para)) {
            data = "jerry json";
        }
        resp.getWriter().write(data);
    }
}