Json和Ajax

最新推荐文章于 2025-06-02 18:04:07 发布

夏天-->！

最新推荐文章于 2025-06-02 18:04:07 发布

阅读量228

点赞数

分类专栏： javaweb Web 文章标签： tomcat

本文链接：https://blog.youkuaiyun.com/zyh661120/article/details/119760881

版权

javaweb 同时被 2 个专栏收录

3 篇文章

订阅专栏

Web

3 篇文章

订阅专栏

前后端分离思想

*      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>