Java前后端分离（Ajax和Json）

为什么要前后端分离？

在以前的学习代码中，可以看出来我们在jsp页面页面上也通过EL表达式和jstl写了很多的java程序，这实际上在前端的页面中混入了很多后端的逻辑，这就是传统的web开发。在传统的web开发中,页面展示的内容以及页面之间的跳转逻辑,全都由后台来控制,这导致了前后端耦合度非常高,耦合度高则意味着,扩展性差,维护性差,等等问题

传统开发的问题如下:

耦合度高
调试麻烦,出现问题时往往需要前后台一起检查
开发效率低,前后端相互依赖,沟通成本,维护成本高
扩展性差,无法兼容其他终端
交互逻辑混乱(还记得分页显示吗),最终造成代码腐烂

在这里插入图片描述
上述问题产生的根本原因在于前后端没有明显的分界,严重耦合在一起,想要解决这些问题的核心也就是将前后端代码完全分开，所以我们需要利用我们的json和ajax来实现前后端的分离，也就是后端仅仅需要为前端以json形式来提供数据接口即可，这样在一定程度上可以减轻后端压力。简单说也就是MVC中后端仅仅负责M和service即可，页面的渲染和跳转逻辑由前端来做。

在这里插入图片描述

简单的说:

前后端分离在传统开发上增加了一个服务器处理静态资源,将View层和Controller层放到了前端,后台仅需处理数据存取相关以及业务逻辑相关

前端：负责View和Controller层。

后端：只负责Model层，业务处理/数据等。

前后端分离的优缺点

优点:

关注点分离,视图层和控制层逻辑移到了前端,后端更注重业务逻辑和系统构架
耦合大大降低,开发效率和维护效率都得到提高
错误友好,后台错误不影响前台界面展示
对于开发者,前后端不再需要过多的涉及彼此的开发语言

缺点:

前端开发者压力更大,需要关注Controller层

增加静态服务器后,系统结构更复杂

更多的HTTP请求,在移动端运行效率差

逻辑靠近前端,不同平台需针对性重复实现,(安卓iOS+web)

SEO优化无力,爬虫大多不支持ajax

前后端分离后的流程

Controller层中会使用流程控制来完成数据校验,数据解析,页面的跳转等动作,那么如何完成呢,这就需要使用到JavaScript了

那么一个前后端分离的项目,前端是如何完成最终的数据展示呢?

在这里插入图片描述
可以看到，这里想要获得一个完整的页面，我们需要访问两次服务器。但是这样也有好处，比如如果前端是其他的例如iOS,安卓,则无需请求静态页面,页面的绘制是由系统原始语言实现的,只需要向后台请求json数据即可。这样提高了后台数据的可重用性。

为什么我们需要JSON？

因为前后端分离后，我们就不能使用EL表达式来获取request域中的数据了，因为页面不在由tomcat服务器来部署，所以我们需要一种数据结构来发送给前端。

JSON全称(JavaScript Object Notation),js对象表示法,是一种轻量级数据交换格式，你可以将其看做Map数据结构,以键值对形式存储

为什么我们需要Ajax？

Ajax是客户端的一种请求方式,全称(Asynchronous Javascript And XML)

用于异步的向服务器发送HTTP请求并获取响应数据,异步的好处在于,请求期间浏览器不会卡死,可以正常响应用户操作;而常见的表单提交,和直接打开指定地址,都是同步的;

json和对象Bean相互转换
好啦，整理清楚思路后，我们来简单的看一下json和Ajax是如何使用的吧。

这里使用了阿里巴巴的fastjson。

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

import java.util.ArrayList;
import java.util.List;

public class JSONTest {
    
    

    public static void main(String[] args) {
    
    
        UserBean bean  = new UserBean();
        bean.name = "Jeason";
        bean.sex = "man";
        String s = JSON.toJSONString(bean);
        System.out.println(s);


        List<UserBean> list = new ArrayList<>();
        list.add( bean);
        list.add( new UserBean("Tom","man"));
        String s1 = JSON.toJSONString(list);
        System.out.println(s1);

        String json = "{\"name\":\"Jeason\",\"sex\":\"man\"}";
        UserBean bean1 = JSON.parseObject(json, UserBean.class);
        System.out.println(bean1);

        JSONObject jsonObject = new JSONObject();
        jsonObject.put("data",bean);
        System.out.println(jsonObject);


    }
}

输出如下：
{“name”:“Jeason”,“sex”:“man”}
[{“name”:“Jeason”,“sex”:“man”},{“name”:“Tom”,“sex”:“man”}]
UserBean{name=‘Jeason’, sex=‘man’}
{“data”:{“name”:“Jeason”,“sex”:“man”}}

使用Ajax进行异步请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>这是主页</h1>

<script>
    //发送一个异步请求
    $.ajax({
    
    
        url:"http://localhost:8080/day34_2/testJSON",
        success:function(data){
    
    
            console.log(data);
            document.body.insertAdjacentHTML("beforeend","<h1>%</h1>".replace("%",data.name));
            document.body.insertAdjacentHTML("beforeend","<h1>%</h1>".replace("%",data.sex));
            document.getElementById("img").src = "";
        },
        error:function(err){
    
    
            console.log(err);
            document.getElementById("img").src = "";
        }
    });
</script>
</body>
</html>

注意这里我们要引入query

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>