526互联

Java后端04（Ajax异步加载）

发布时间 2023-08-03 16:45:21作者: te9uila

Ajax异步加载

jsp涉及到的问题

  1. 每次哪怕是页面的局部修改，都会导致服务器重新获取，页面的所有信息，导致 jsp 页面的效率非常低下
  2. 前端 jsp 页面无法脱离服务器运行
  3. 前端和后端无法分离开发，开发效率低下

Ajax介绍

​ Ajax 是由谷歌开发，底层是通过 js 开发的技术，如果页面内容只是局部发生修改，不需要重新加载整个页面，而是局部加载，这个技术正是我们前后端分离的基础

前后端不分离图示（通过 Tomcat 进行处理）

前后端分离图示（反向代理实现前后端分离）

⭐反向代理通过 nginx 负载均衡来实现

hutool 工具包

导入工具包（maven 坐标）

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-json</artifactId>
    <version>5.8.18</version>
</dependency>

VO 软件包介绍 + 一个小栗子

​ ViewObject 存放的是前端所需要所希望接收的数据对象，为前端进行服务，前端需要什么，这里就封装成什么样子

// 一个栗子
public class ResultVO<T> {
    private boolean isOK;
    /**
     * 用于后端给前端传输的消息，类似存储响应编码等数据
     */
    private String mess;
    /**
     * 后端需要返回给前端的数据
     */
    private T t;
}

// js原生代码。。。极度繁琐且痛苦
let xmlHttp;
function check(){
    // 获取表单输入值
    let name = document.getElementById("name").value;
    // 定义url路径，进行参数拼接
    let url = "http://localhost:8080/checkName?name=" + name;
    // 创建 Ajax 所需要的 xhr 对象
    xmlHttp = new XMLHttpRequest();
    // 定义 Ajax 请求的响应函数
    xmlHttp.onreadystatechange=checkResult;
    // 设置请求所发送的 url 和请求的 method
    xmlHttp.open("GET",url,true);
    // 利用 Ajax 对象向指定 url 发送请求，send() 代表请求所携带的参数
    // 由于在上方已经拼接了参数，所以 send() 传参传null
    xmlHttp.send(null);
    // 如果没有提前拼接参数，则将数据以 js 的方式进行传递
    // xmlHttp.send({"name":name});
}
// 响应函数
function checkResult(){
    // readyState: 请求状态（0-请求未初始化，1-服务器连接已经建立，2-请求已经被接受，3-请求处理中，4-请求已经完成，并且响应已经就绪）
    // status: 响应编码（200-ok，404-找不到服务器）
    // responseText: 服务器返回的响应内容
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
        // 反序列化
        let jsonObject = JSON.parse(xmlHttp.responseText);
        document.getElementById("checkResult").innerHTML = jsonObject.mess;
    }
}

// 后台处理servlet
@WebServlet("/checkName")
public class CheckNameServlet extends HttpServlet {
    private final CategoryService categoryService = new CategoryServiceImpl();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 参数接收
        String name = req.getParameter("name");
        // 获取分类集合
        List<Category> categories = categoryService.list();
        boolean flag = false;
        loop:for (Category category : categories) {
            if(category.getName().equals(name)){
                flag = true;
                break loop;
            }
        }
        ResultVO vo = new ResultVO<>();
        if(flag){
            // 找到目标名
            vo.setOK(true);
            vo.setMess("存在目标信息");
        }else{
            // 没找到目标名
            vo.setOK(false);
            vo.setMess("没有找到匹配的信息");
        }
        // 将响应内容转换成 json 进行返回给 Ajax (借助响应对应的输出流)
        resp.getWriter().write(JSONUtil.toJsonStr(vo));
    }
}

Jquery ajax ---通过 Jquery 优化 js 原生代码

  1. $.ajax方式 ------ 好使，真滴好使！！！！！
$(function(){
    $('#name').blur(function(){
        // 设置url
        let url = "checkName";
        // 获取表单值
        let value = $(this).val();
        // 写 ajax 请求
        $.ajax({
            url:url,
            // 严格遵守 JSON 格式
            data:{"name":value},
            // 设置请求方式，默认GET
            method:"GET",
            // 响应成功之后所对应的响应函数
            // result:表示响应数据
            success:function(result){
                let jsObject = JSON.parse(result);
                $('#checkResult').html(jsObject.mess);
            }
        })
    })
})
  1. $.get方式 （专门用来发送 GET 请求）------ 没啥变化，就短了点，个人感觉还不如上边的
$(function(){
    $('#name').blur(function(){
        // 设置url
        let url = "checkName";
        // 获取表单值
        let value = $(this).val();
        // 写 get 请求
        $.get(
            url,
            {"name":value},
            function(result){	
                let jsObject = JSON.parse(result);
                $('#checkResult').html(jsObject.mess);
            }
        )
    })
})
  1. $.post方式 （专门用来发送 POST 请求）------ 和 $.get 大同小异，真心不如第一个好使吧，有一说一
$(function(){
    $('#name').blur(function(){
        // 设置url
        let url = "checkName";
        // 获取表单值
        let value = $(this).val();
        // 写 post 请求
        $.post(
            url,
            {"name":value},
            function(result){
                let jsObject = JSON.parse(result);
                $('#checkResult').html(jsObject.mess);
            }
        )
    })
})
  1. 一行实现 ------ 什么玩意？一行。。。一坨答辩，又不清晰，又记不住，何必呢
$(function(){
    $('#name').blur(function(){
        $('#checkResult').load("checkName?name=" + $(this).val());
    })
})