Jquery实现AJAX异步通信

本文介绍: Aja x（Async hr on ousJav aScri pta ndXML），直译为“异步的Jav aScri p t与”，是一种创建交互式网页应用的网页开发技术，用于创建快速动态网页，由杰西·詹姆士·贾瑞特所提出。与传统的We b 应用相比，Ajax通过浏览器与服务器进行少量的数据交换就可以实现网页的异步更新，在不重新加载整个网页的情况下，即可对网页进行更新。……

Ajax的简介

Ajax的特点

Ajax向后端发送请求

发送请求后端数据回显

Ajax的简介

Ajax（Async h ro nous Jav aScri p t a nd XML），直译为“异步的Ja vaScri p t与XML技术”，是一种创建交互式网页应用的网页开发技术，用于创建快速动态网页，由杰西·詹姆士·贾瑞特所提出。与传统的We b 应用相比，Ajax通过浏览器与服务器进行少量的数据交换就可以实现网页的异步更新，在不重新加载整个网页的情况下，即可对网页进行更新。

Ajax的特点

优点 1.局部刷新页面，减少用户心理和实际的等待时间，带来更好的用户体验

2.按需取数据，减轻服务器的负担，最大程度减少冗余请求

3.异步方式与服务器通信，不需要打断用户的操作，具有更加迅速地响应能力

4.基于 xml 标准化，并被广泛支持，不需要安装插件等，进一步促进页面和数据的分离

缺点 1.Ajax只是局部刷新，所以页面的后退按钮是没用的

2.对流媒体还有移动设备的支持不是太好

3.Ajax大量使用了JavaScri p t和Ajax引擎，这些取决于浏览器的支持

4.客户端过肥，太多客户端代码造成开发商的成本，编写复杂、容易出错，冗余代码比较多，破坏了web的原有标准

Ajax向后端发送 请求

导入jQue ry。

&lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;</script>

html

<head>
<script>
        function  a(){
            $.ajax({
                url: "/a1.action",
                data:{
                    name: $("#username").val()
                },
                success:function (data) {
                    alert("成功"+data)
                }
            })
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" onblur="a()">
<a href="/login.action">点我</a>
</body>

controller

@RequestMapping("/a1")
public void a1(String name, HttpServletResponse response) throws IOException {
    if("aaa".equals(name)){
        response.getWriter().print("true");
    }else{
        response.getWriter().print("false");
    }
}

发送 请求后端数据回显

实体类

@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
    private Integer id;
    private String loginname;
    private String password;
}

controller层，从数据库里面获取数据，也可以伪造数据返回前端

@RequestMapping("/userlist")
@ResponseBody
public List<User> userlist(){
    return userService.queryAll();
}

前端页面,通过得到的数据在Ajax里面将其展示到body

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" id="btn" value="获取用户数据"/>
    <table width="80%" align="center">
        <tr>
            <td>编号</td>
            <td>账号</td>
            <td>密码</td>
        </tr>
        <tbody id="content">
        </tbody>
    </table>
</div>

</body>
<script src="/static/js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        $("#btn").click(function (){
            $.post("/userlist.action",function (data) {
                let list = data
                var html='';
                for (let i = 0; i < list.length; i++) {
                    console.log(list[i])
                    html += '<tr>' +
                        '<td>' + list[i].id +'</td>' +
                        '<td>' + list[i].loginname +'</td>' +
                        '<td>' + list[i].password +'</td>' +
                        '</tr>'
                }
                $("#content").html(html);
            })
        })
    })

</script>
</html>