Json和Ajax

前后端分离思想

 *      1.前后端分离思想：

 *          在我们以前学习开发的过程中，服务器渲染jsp页面，当一个项目，有很多的并发量的时候，服务器就会花费大量的资源来渲染前端页面，造成

 *      大量的资源浪费 -> 前后端不分离

 *

 *      前后端不分离：指的是使用服务器来渲染前端页面

 *      前后端分离：指的是使用浏览器来渲染前端页面

 *

 *              服务器端渲染：以jsp为例 -> 使用服务器来生成整个html页面中的内容，将内容组织好以后交给浏览器进行显示

 *              客户端渲染： 前端拿到html页面和js等文件后，生成一颗DOM树，再从服务器端拿到想要显示的数据，通过DOM操作显示在页面上

 *

 *              服务器端渲染的优缺点：

 *                  优点：1.对客户机友好，浏览器端显示的速度会快一点 2.便于SEO进行收录（即搜索引擎）

 *                  缺点：1.服务器压力大，资源浪费多 2.后端工程师任务重（后端工程师又要写接口，又要写页面） 3.不利于团队协作开发 4.开发逻辑混乱

 *              客户端渲染的优缺点：

 *                  缺点：1.不利于SEO收录 2.对客户端硬件配置要求高

 *                  优点：1.便于团队开发 2.代码逻辑清晰 3.服务器压力小，可以做高并发 4.前后端耦合关系低（高内聚，低耦合）

 *

 *       2.前后端分离怎么实现？

 *          前端提供页面，后端提供数据，前端和后端通过一种约定好的数据格式进行数据交换（现在最常见的数据交换格式叫JSON）

 *          ps： 不是只能用json，只要能约定好一种数据交换格式，都可以用来做数据交互

 *

 *          举例：

 *          JSON->User（轻量化）：{

 *              username:zhangsan,

 *              password:xxxxx,

 *              salt:xxxx

 *          }

 *

 *          xml->User(重量化) :

 *          <properties name="username" value="zhangsan"></>

 *          <properties name="password" value="xxxx"></>

 *          <properties name="salt" value="xxxx"></>

 *

 *       3.前后端分离的程度：

 *          1.代码分离（最简单的前后端分离）： 说白了前端写前端代码，后端写后端代码 ->

 *          举例： 在tomcat中 servlet提供数据 html通过ajax获得servlet提供的数据，通过DOM显示在页面中，前端页面还是用后端的服务器来保存的

 *          2.部署分离：把前端页面部署到前端服务器上，后端服务器只有后端的代码，通过代理服务器进行连接

 *          3.职责分离：前端工程师去写前端的服务器，写前端页面，将前端页面部署到前端服务器上，后端工程师写后端服务器，提供数据给前端服务器的页面

 *

 *      4.前端后分离以后：

 *          后端工程师在工作中注意的事件：

 *              1.高并发，高可用，高性能

 *              2.安全性

 *              3.业务逻辑

一、JSON:json是一种轻量级的，用于数据交换的语言

1、格式：

JSON的格式：

 *          {

 *              key01:value01,

 *              key02:value02,

 *              ....

 *              key n : value n

 *          }

二、AJAX

 什么叫AJAX:异步javascript和xml -> 是一门技术，有很多的实现方法，通过原生的js可以做ajax，通过jquery可以做，通过其他方法都可以实现ajax
        本质上就是可以通过js在网页不刷新的情况下发送http请求

        通过jquery来发送ajax：
            $.ajax({
                url:"" ->请求的路径
                type:"" ->请求的方式
                contentType:"" -> 请求的文件类型
                asyn:"" ->设置ajax是异步还是同步的，如果设置为false表示同步，在ajax请求没有处理完之前页面会卡住不动
                data:"", ->向后端发送的数据
                dataType:"" -> 向后端发送的数据类型
                success:function (data){
                    //当请求成功的时候，调用这个方法，这个方法的data参数是后端向前端响应的数据
                ],
                error:function(e){
                    //当请求失败的时候，调用这个方法，这个方法的参数是错误信息
                }
            })
    

跟js中的对象语法基本一致,一个大括号内表示的是一个对象

 *

 *      可以将json文件与java bean互相转换，一个java bean对象 就是一个json对象 {}，一个List<java bean> -> [{},{},{}]

 *

 *      如何将一个java对象转化成json:

 *          使用fastJson库

 *          1.将java对象转化为json -> JSONObject jsonobejct = JSONObject.toJson(object)

 *          2.将arraylist转化为json -> JSONArryar jsonarrary = JSONArray.toJson(list<>)

 *

public class JSON01 {
    public static void main(String[] args) {
        List<User> users = new ArrayList<>();
        User user = new User();
        user.setUsername("zhangsan");
        user.setPassword("123456");

        User user1 = new User();
        user1.setUsername("lisi");
        user1.setPassword("12321451241252");

        users.add(user);
        users.add(user1);


        JSONObject jsonObject = (JSONObject) JSONObject.toJSON(user);
        JSONArray jsonArray = (JSONArray) JSONArray.toJSON(users);
        System.out.println(jsonObject);
        System.out.println(jsonArray);
    }
}

 *      如果将json字符串转化为js对象：

 *          1.使用jquery的$.parseJson()来进行转换

 *          2.ajax的返回值会自动解析json为js对象

 *          3.JSON.parse(str)

 *

@WebServlet("/demo")
public class DemoServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json;charset=utf-8");

        User user = new User();
        user.setUsername("zhangsan");
        user.setPassword("1235564231519");

        JSONObject jsonObject = (JSONObject) JSONObject.toJSON(user);
        PrintWriter printWriter = resp.getWriter();
        printWriter.println(jsonObject);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.js"></script>
   
</head>
<body>

    <button id="btn">点我发ajax</button>
    <h1 id="h1">当前登录的用户是：</h1>
</body>
</html>
<script>
    $("#btn").click(function () {
        $.ajax({
            url:"/web_war_exploded/demo",
            type:"GET",
            success:function (data) {
                $("#h1").append(data.username);
            }
        })
    })
</script>