15天深度复习JavaWeb的详细笔记(十)——Filter、Listener、Ajax

傷城~ 2023-10-02 21:17 13阅读 0赞

#### 文章目录 ####

*  demo10-Filter、Listener、Ajax
 *   *  1，Filter
     *   *  1.1 Filter概述
         *  1.2 Filter快速入门
         *   *  1.2.1 开发步骤
             *  1.2.2 代码演示
         *  1.3 Filter执行流程
         *  1.4 Filter拦截路径配置
         *  1.5 过滤器链
         *   *  1.5.1 概述
             *  1.5.2 代码演示
     *  2，Listener
     *   *  2.1 概述
         *  2.2 分类
         *  2.3 代码演示
     *  3，Ajax
     *   *  3.1 概述
         *   *  3.1.1 作用
             *  3.1.2 同步和异步
         *  3.2 快速入门
         *   *  3.2.1 开发步骤
             *  3.2.2 服务端实现
             *  3.2.3 客户端实现
     *  4，axios
     *   *  4.1 基本使用
         *  4.2 快速入门
         *   *  4.2.1 后端实现
             *  4.2.2 前端实现
         *  4.3 请求方法别名
     *  5，JSON
     *   *  5.1 概述
         *  5.2 JSON 基础语法
         *   *  5.2.1 定义格式
             *  5.2.2 代码演示
             *  5.2.3 发送异步请求携带参数
         *  5.3 JSON串和Java对象的相互转换
         *   *  5.3.1 Fastjson 概述
             *  5.3.2 Fastjson 使用
             *  5.3.3 代码演示

## demo10-Filter、Listener、Ajax ##

### 1，Filter ###

#### 1.1 Filter概述 ####

Filter 表示过滤器，是 **JavaWeb 三大组件(Servlet、Filter、Listener)之一**

过滤器可以把对资源的请求拦截下来，从而实现一些特殊的功能。

如下图所示，浏览器可以访问服务器上的所有的资源（servlet、jsp、html等）

![在这里插入图片描述][08dd5374c517458099c6235b59a4e39d.png_pic_center]

而在访问到这些资源之前可以使过滤器拦截来下，也就是说在访问资源之前会先经过 Filter，如下图

![在这里插入图片描述][3c0adeee736445cebe7dfcb338bf8f5a.png_pic_center]

过滤器的用途:

*  `权限控制`、`统一编码处理`、 `敏感字符处理` 等等…

#### 1.2 Filter快速入门 ####

##### 1.2.1 开发步骤 #####

进行 `Filter` 开发分成以下三步实现

*  定义类，实现 Filter接口，并重写其所有方法(注意\*\*Filter接口和Servlet接口在同一个包下,\*\*是javax.servlet包下的,不要导错包了)

![在这里插入图片描述][9f018cb2a752453880fd871f5373c4ec.png_pic_center]

*  配置Filter拦截资源的路径：在类上定义 `@WebFilter` 注解。而注解的 `value` 属性值 `/*` 表示拦截所有的资源

![在这里插入图片描述][940cd601ca744f0cbb472e6e9fe1ada6.png_pic_center]

*  在doFilter方法中输出一句话，并放行

![在这里插入图片描述][84507fb373cd48aa8d44bed195a1a149.png_pic_center]

> 上述代码中的 `chain.doFilter(request,response);` 就是放行，也就是让其访问本该访问的资源。

##### 1.2.2 代码演示 #####

1.创建一个项目，在项目下创建 `hello.jsp` 页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
    <h2>Hello World!</h2>
    </body>
    </html>

2.在`pom.xml` 配置文件中添加servlet的坐标依赖和tomcat插件的坐标依赖

3.启动服务,在浏览器输入 `http://localhost:8080/demo09-filter_listener_ajax/hello.jsp` 访问 `hello.jsp` 页面，这里是可以访问到 `hello.jsp` 页面内容的

4.接下来编写过滤器。过滤器是 Web 三大组件之一，所以我们将 `filter` 创建在 `com.itheima.web.filter` 包下，起名为 `FilterDemo`

@WebFilter("/*")
    public class FilterDemo implements Filter {
        
        @Override
        public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        
            System.out.println("FilterDemo...");
        }
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
        
        }
        @Override
        public void destroy() {
        
        }
    }

5.重启启动服务器，再次重新访问 `hello.jsp` 页面，这次发现页面没有任何效果，但是在 `idea` 的控制台可以看到输出了`FilterDemo...`

6.上述效果说明 `FilterDemo` 这个过滤器的 `doFilter()` 方法执行了，但是为什么在浏览器上看不到 `hello.jsp` 页面的内容呢？这是因为在 `doFilter()` 方法中添加放行的方法才能访问到 `hello.jsp` 页面。那就在 `doFilter()` 方法中添加放行的代码

//放行
     chain.doFilter(request,response);

**`FilterDemo` 过滤器完整代码如下：**

@WebFilter("/*")
    public class FilterDemo implements Filter {
        
        @Override
        public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        
            //1. 放行前，对 request数据进行处理
            System.out.println("FilterDemo...");
            //放行
            chain.doFilter(request,response);
        }
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
        
        }
        @Override
        public void destroy() {
        
        }
    }

7.再次重启服务器并访问 `hello.jsp` 页面，发现这次就可以在浏览器上看到页面效果

#### 1.3 Filter执行流程 ####

![在这里插入图片描述][614fbf678d394d98ac25611b9d72854b.png_pic_center]

如上图是使用过滤器的流程，我们通过以下问题来研究过滤器的执行流程：

*  放行后访问对应资源，资源访问完成后，还会回到Filter中吗？
    
    从上图就可以看出肯定 会 回到Filter中
 *  如果回到Filter中，是重头执行还是执行放行后的逻辑呢？
    
    如果是重头执行的话，就意味着 `放行前逻辑` 会被执行两次，肯定不会这样设计了；所以访问完资源后，会回到 `放行后逻辑`，执行该部分代码。

通过上述的说明，我们就可以总结Filter的执行流程如下：

执行放行前逻辑–>放心–>访问资源–>执行放行后逻辑

接下来我们通过代码验证一下:

1.修改`hello.jsp`(在 该页面加上输出语句)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
    <h2>Hello World!</h2>
    <%
        System.out.println("3.hello world");
    %>
    </body>
    </html>

2.修改`FilterDemo`

@WebFilter("/*")
    public class FilterDemo implements Filter {
        
        @Override
        public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        
            //1. 放行前，对 request数据进行处理
            System.out.println("1.FilterDemo...");
            //放行
            chain.doFilter(request,response);
            //2. 放行后，对Response 数据进行处理
            System.out.println("5.FilterDemo...");
        }
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
        
        }
        @Override
        public void destroy() {
        
        }
    }

3.启动服务,在地址栏输入`http://localhost:8080/demo09-filter_listener_ajax/hello.jsp`看以在控制台看到如下输出:

> 1.FilterDemo…  
> 3.hello world  
> 5.FilterDemo…

至此,证明完毕

tomcat会将前端传来的数据封装到`request`对象中传给`doFilter`方法(注意此时给`doFilter`方法传递的`response`对象中是没有数据的),我们对`request`对象中的数据进行处理后放行,开始访问资源,访问资源后tomcat就会将响应数据封装到`response`对象中,我们可以对`response`对象中的数据进行处理

所以呢,**以后我们可以将对请求进行处理的代码放在放行之前进行处理，而如果请求完资源后还要对响应的数据进行处理时可以在放行后进行逻辑处理**

#### 1.4 Filter拦截路径配置 ####

拦截路径表示 Filter 会对请求的哪些资源进行拦截，使用 `@WebFilter` 注解进行配置。如：`@WebFilter("拦截路径")`

拦截路径有如下四种配置方式：

*  拦截具体的资源：/index.jsp：只有访问index.jsp时才会被拦截
 *  目录拦截：/user/\*：访问/user下的所有资源，都会被拦截
 *  后缀名拦截：\*.jsp：访问后缀名为jsp的资源，都会被拦截
 *  拦截所有：/\*：访问所有资源，都会被拦截

通过上面拦截路径的学习，大家会发现拦截路径的配置方式和 `Servlet` 的请求资源路径配置方式一样，但是表示的含义不同:

*  前者表示拦截的资源的路径
 *  后者表示访问的路径

#### 1.5 过滤器链 ####

##### 1.5.1 概述 #####

过滤器链是指在一个Web应用，可以配置多个过滤器，这多个过滤器称为过滤器链。

如下图就是一个过滤器链，我们学习过滤器链主要是学习过滤器链执行的流程

![在这里插入图片描述][68c0096fb2bd4dc5966fccc6640064aa.png_pic_center]

上图中的过滤器链执行是按照以下流程执行：

1.  执行 `Filter1` 的放行前逻辑代码
2.  执行 `Filter1` 的放行代码
3.  执行 `Filter2` 的放行前逻辑代码
4.  执行 `Filter2` 的放行代码
5.  访问到资源
6.  执行 `Filter2` 的放行后逻辑代码
7.  执行 `Filter1` 的放行后逻辑代码

以上流程串起来就像一条链子，故称之为过滤器链。

##### 1.5.2 代码演示 #####

*  第一个过滤器 `FilterDemo`我们已经在前面编写好了,现在编写第二个过滤器`FilterDemo2`
    
        @WebFilter("/*")
        public class FilterDemo2 implements Filter {
              
            @Override
            public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
              
                System.out.println("2.FilterDemo...");
                chain.doFilter(request,response);
                System.out.println("4.FilterDemo...");
            }
            @Override
            public void init(FilterConfig filterConfig) throws ServletException {
              
            }
            @Override
            public void destroy() {
              
            }
        }
 *  启动服务,在地址栏访问`http://localhost:8080/demo09-filter_listener_ajax/hello.jsp`可以看到控制台如下打印输出:
    
    > 1.FilterDemo…  
    > 2.FilterDemo…  
    > 3.hello world  
    > 4.FilterDemo…  
    > 5.FilterDemo…

上面代码中为什么是先执行 `FilterDemo` ，后执行 `FilterDemo2` 呢:

*  我们现在使用的是注解配置Filter，而这种配置方式的优先级是按照过滤器类名(字符串)的自然排序
    
     *  比如有如下两个名称的过滤器 ： `BFilterDemo` 和 `AFilterDemo` 。那一定是 `AFilterDemo` 过滤器先执行

### 2，Listener ###

#### 2.1 概述 ####

*  Listener 表示监听器，是 JavaWeb 三大组件(Servlet、Filter、Listener)之一。
 *  监听器可以监听就是在 `application`，`session`，`request` 三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件。
    
    request 和 session 我们学习过。而 `application` 是 `ServletContext` 类型的对象。
    
    `ServletContext` 代表整个web应用，在**服务器启动的时候，tomcat会自动创建该对象。在服务器关闭时会自动销毁该对象。**

#### 2.2 分类 ####

JavaWeb 提供了8个监听器：

![在这里插入图片描述][bf998b24acc84733a8b3f7240bc0eb4f.png_pic_center]

这里面只有 `ServletContextListener` 这个监听器后期我们会接触到，`ServletContextListener` 是用来监听 `ServletContext` 对象的创建和销毁。

`ServletContextListener` 接口中有以下两个方法

*  `void contextInitialized(ServletContextEvent sce)`：`ServletContext` 对象被创建了会自动执行的方法
 *  `void contextDestroyed(ServletContextEvent sce)`：`ServletContext` 对象被销毁时会自动执行的方法

#### 2.3 代码演示 ####

我们只演示一下 `ServletContextListener` 监听器

*  定义一个类，实现`ServletContextListener` 接口
 *  重写所有的抽象方法
 *  使用 `@WebListener` 进行配置

代码如下：

@WebListener
    public class ContextLoaderListener implements ServletContextListener {
        
        @Override
        public void contextInitialized(ServletContextEvent sce) {
        
            //加载资源
            System.out.println("ContextLoaderListener...");
        }
    
        @Override
        public void contextDestroyed(ServletContextEvent sce) {
        
            //释放资源
        }
    }

启动服务器，就可以直接在控制台看到 `contextInitialized()` 方法输出的内容，同时也说明了 `ServletContext` 对象在服务器启动的时候被创建了。

### 3，Ajax ###

#### 3.1 概述 ####

`AJAX` (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

我们先来说概念中的 `JavaScript` 和 `XML`，`JavaScript` 表明该技术和前端相关；`XML` 是标记语言,用于存储数据。而这两个我们之前都学习过。

##### 3.1.1 作用 #####

AJAX 作用有以下两方面：

1.  **与服务器进行数据交换**：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。如下图

我们先来看之前做功能的流程，如下图：

![在这里插入图片描述][5134dcc205224c1499686e417f39062a.png_pic_center]

如上图，`Servlet` 调用完业务逻辑层后将数据存储到域对象(如request对象中)中，然后跳转到指定的 `jsp` 页面，在页面上使用 `EL表达式` 和 `JSTL` 标签库进行数据的展示。

而我们学习了AJAX 后，就可以使用AJAX和服务器进行通信，以达到使用 HTML+AJAX来替换JSP页面了。如下图，浏览器发送请求servlet，servlet 调用完业务逻辑层后将数据直接响应回给浏览器页面，页面使用 HTML 来进行数据展示。

![在这里插入图片描述][3290f4b846854e38ad6cdde7e6957389.png_pic_center]

1.  **异步交互**：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…

##### 3.1.2 同步和异步 #####

知道了局部刷新后，接下来我们再聊聊同步和异步:

*  同步发送请求过程如下

![在这里插入图片描述][344938c479eb43fb8291705292101de2.png_pic_center]

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

*  异步发送请求过程如下

![在这里插入图片描述][b26db810e13b49b280e87b73ef128dd6.png_pic_center]

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

> 同步:客户端浏览器需要等待服务端的处理,所以**客户端的操作的不连续的**
> 
> 异步:客户端浏览器不需要等待服务端的处理,所以**客户端的操作的连续的**

#### 3.2 快速入门 ####

##### 3.2.1 开发步骤 #####

> 步骤2,3,4的代码不用记,去W3school找就可以了

1.编写`AjaxServlet`,并使用response输出字符串

2.创建XMLHttpRequest对象,用于和服务器交换数据

var xmlhttp;
    if (window.XMLHttpRequest) {
        
        // 针对新版浏览器:code for IE7+,Firefox,Chrome,Opera,Safari
        xhttp = new XMLHttpRequest();
    } else {
        
        // 针对旧版浏览器:code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

3.向服务器发送请求

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>open(method,url,async)</td> 
   <td>规定请求的类型:<br>method:请求的类型:GET还是POST<br>url:服务器(文件)位置<br>async:ture(异步)或false(同步)<strong>如果省略了这个参数那么默认就是异步</strong></td> 
  </tr> 
  <tr> 
   <td>send()</td> 
   <td>向服务器发送请求(用于GET)</td> 
  </tr> 
  <tr> 
   <td>send(string)</td> 
   <td>向服务器发送请求(用于POST)</td> 
  </tr> 
 </tbody> 
</table>

注意:open方法的url参数写全路径,因为以后开发时前后端分离,项目A是前端的工程,项目B是java的工程,实际开发时这两个项目不会在同一个服务器部署,访问时就不能再写相对路径了,所以现在就养成习惯,写全路径

xmlhttp.open("GET", "url", true);
    xmlhttp.send();//发送请求

4.获取服务器响应数据

xhttp.onreadystatechange = function() {
        
        if (this.readyState == 4 && this.status == 200) {
        
            document.getElementById("demo").innerHTML =
                this.responseText;//this.responseText就是获得到的数据
        }
    };

##### 3.2.2 服务端实现 #####

在项目下创建 `com.itheima.web.servlet` ，并在该包下创建名为 `AjaxServlet` 的servlet

@WebServlet("/ajaxServlet")
    public class AjaxServlet extends HttpServlet {
        
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            //1. 响应数据
            resp.getWriter().write("hello ajax~");
        }
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            doGet(req, resp);
        }
    }

##### 3.2.3 客户端实现 #####

在 `webapp` 下创建名为 `01-ajax-demo1.html` 的页面，在该页面书写 `ajax` 代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        //1. 创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
          
            xhttp = new XMLHttpRequest();
        } else {
          
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2. 发送请求
        xhttp.open("GET", "http://localhost:8080/demo09-filter_listener_ajax/ajaxServlet");
        xhttp.send();
        //3. 获取响应数据
        xhttp.onreadystatechange = function() {
          
            if (this.readyState == 4 && this.status == 200) {
          
                   alert(this.responseText);
            }
        };
    </script>
    </body>
    </html>

启动服务,在地址栏输入`http://localhost:8080/demo09-filter_listener_ajax/01-ajax-demo1.html`进行测试

### 4，axios ###

Axios 对原生的AJAX进行封装，简化书写。

Axios官网是：`https://www.axios-http.cn`

#### 4.1 基本使用 ####

axios 使用是比较简单的，分为以下两步：

*  引入 axios 的 js 文件
    
        <script src="js/axios-0.18.0.js"></script>
 *  使用axios 发送请求，并获取响应结果
    
     *  发送 get 请求
        
            axios({
                    
                method:"get",
                url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
            }).then(function (resp){
                    
                alert(resp.data);
            })
     *  发送 post 请求
        
            axios({
                    
                method:"post",
                url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
                data:"username=zhangsan"
            }).then(function (resp){
                    
                alert(resp.data);
            });

`axios()` 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：

*  `method` 属性：用来设置请求方式的。取值为 `get` 或者 `post`。
 *  `url` 属性：用来书写请求的资源路径。如果是 `get` 请求，需要将请求参数拼接到路径的后面，格式为： `url?参数名=参数值&参数名2=参数值2`。
 *  `data` 属性：作为请求体被发送的数据。也就是说如果是 `post` 请求的话，数据需要作为 `data` 属性的值。

`then()` 需要传递一个匿名函数。我们将 `then()` 中传递的匿名函数称为 回调函数，意思是**该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数**。而该回调函数中的 `resp` 参数是对响应的数据进行封装的对象，通过 `resp.data` 可以获取到响应的数据。

#### 4.2 快速入门 ####

##### 4.2.1 后端实现 #####

定义一个用于接收请求的servlet，代码如下：

@WebServlet("/axiosServlet")
    public class AxiosServlet extends HttpServlet {
        
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            System.out.println("get...");
            //1. 接收请求参数
            String username = request.getParameter("username");
            System.out.println(username);
            //2. 响应数据
            response.getWriter().write("hello Axios~");
        }
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            System.out.println("post...");
            this.doGet(request, response);
        }
    }

##### 4.2.2 前端实现 #####

*  先在webapp目录下创建js目录,然后放入axios的js文件

*  然后在webapp目录下创建02-axios-demo.html并编写代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="js/axios-0.18.0.js"></script>
    <script>
        //1. get
        axios({
          
            method:"get",
            url:"http://localhost:8080/demo09-filter_listener_ajax/axiosServlet?username=zhangsan"
        }).then(function (resp) {
          
            alert(resp.data);
        })
        //2. post
        axios({
          
            method:"post",
            url:"http://localhost:8080/demo09-filter_listener_ajax/axiosServlet",
            data:"username=zhangsan"
        }).then(function (resp) {
          
            alert(resp.data);
        })
    </script>
    </body>
    </html>

启动服务,在地址栏输入`http://localhost:8080/demo09-filter_listener_ajax/02-axios-demo.html`进行测试

#### 4.3 请求方法别名 ####

为了方便起见， Axios 已经为所有支持的请求方法提供了别名。如下：

*  `get` 请求 ： `axios.get(url[,config])`
 *  `delete` 请求 ： `axios.delete(url[,config])`
 *  `head` 请求 ： `axios.head(url[,config])`
 *  `options` 请求 ： `axios.option(url[,config])`
 *  `post` 请求：`axios.post(url[,data[,config])`
 *  `put` 请求：`axios.put(url[,data[,config])`
 *  `patch` 请求：`axios.patch(url[,data[,config])`

这里我们只关注 `get` 请求和 `post` 请求:

*  发送get请求
    
        axios.get("url").then(function (resp) {
              
            alert(resp.data);
        });
 *  发送post请求
    
        axios.post("url","参数").then(function (resp) {
              
            alert(resp.data);
        })

入门案例中的 `get` 请求代码可以改为如下：

axios.get("http://localhost:8080/demo09-filter_listener_ajax/axiosServlet?username=zhangsan").then(function (resp) {
        
        alert(resp.data);
    });

入门案例中的 `post` 请求代码可以改为如下：

axios.post("http://localhost:8080/demo09-filter_listener_ajax/axiosServlet","username=zhangsan").then(function (resp) {
        
        alert(resp.data);
    })

### 5，JSON ###

#### 5.1 概述 ####

概念：`JavaScript Object Notation`。JavaScript 对象表示法.

如下是 `JavaScript` 对象的定义格式：

{
        
    	name:"zhangsan",
    	age:23,
    	city:"北京"
    }

接下来我们再看看 `JSON` 的格式：

{
        
    	"name":"zhangsan",
    	"age":23,
    	"city":"北京"
    }

通过上面 js 对象格式和 json 格式进行对比，发现两个格式特别像。只不过 js 对象中的属性名可以不使用引号也可以使用引号（可以是单引号，也可以是双引号）；而 `json` 格式中的键要求必须使用双引号括起来，这是 `json` 格式的规定。`json` 格式的数据有什么作用呢？

作用：由于其语法格式简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。如下图所示就是服务端给浏览器响应的数据，这个数据比较简单，如果现需要将 JAVA 对象中封装的数据响应回给浏览器的话，应该以何种数据传输呢？

![在这里插入图片描述][7bc009b90fda41ed934e3fa483c4056a.png_pic_center]

大家还记得 `ajax` 的概念吗？ 是 异步的 JavaScript 和 xml。这里的 xml就是以前进行数据传递的方式，如下：

再看 `json` 描述以上数据的写法：

{
        	
    	"name":"张三",
        "age":23,
        "city":"北京"
    }

上面两种格式进行对比后就会发现 `json` 格式数据的简单，以及所占的字节数少等优点。

#### 5.2 JSON 基础语法 ####

##### 5.2.1 定义格式 #####

`JSON` **本质就是一个字符串**，但是该字符串内容是有一定的格式要求的

var 变量名 = '{"key":value,"key":value,...}';

`JSON` 串的键要求必须使用双引号括起来，而值根据要表示的类型确定。value 的数据类型分为如下

*  数字（整数或浮点数）
 *  字符串（使用双引号括起来）
 *  逻辑值（true或者false）
 *  数组（在方括号中）
 *  对象（在花括号中）
 *  null

示例：

var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'

##### 5.2.2 代码演示 #####

创建一个页面，在该页面的 `<script>` 标签中定义json字符串

通过浏览器打开，页面效果如下图所示

![在这里插入图片描述][88719ebc43e94cb8a7338b5c0922faf3.png_pic_center]

现在我们需要获取到该 `JSON` 串中的 `name` 属性值，应该怎么处理呢？

如果它是一个 js 对象，我们就可以通过 `js对象.属性名` 的方式来获取数据。JS 提供了一个对象 `JSON` ，该对象有如下两个方法：

*  `parse(str)` ：将 JSON串转换为 js 对象。使用方式是： `var jsObject = JSON.parse(jsonStr);`
 *  `stringify(obj)` ：将 js 对象转换为 JSON 串。使用方式是：`var jsonStr = JSON.stringify(jsObject)`

代码演示：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        //1. 定义JSON字符串
        var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
        alert(jsonStr);
        //2. 将 JSON 字符串转为 JS 对象
        let jsObject = JSON.parse(jsonStr);
        alert(jsObject)
        alert(jsObject.name)
        //3. 将 JS 对象转换为 JSON 字符串
        let jsonStr2 = JSON.stringify(jsObject);
        alert(jsonStr2)
    </script>
    </body>
    </html>

##### 5.2.3 发送异步请求携带参数 #####

后面我们使用 `axios` 发送请求时，如果要携带复杂的数据时都会以 `JSON` 格式进行传递，如下

axios({
        
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp) {
        
        alert(resp.data);
    })

请求参数不可能由我们自己拼接字符串吧？肯定不用，可以提前定义一个 js 对象，用来封装需要提交的参数，然后使用 `JSON.stringify(js对象)` 转换为 `JSON` 串，再将该 `JSON` 串作为 `axios` 的 `data` 属性值进行请求参数的提交。如下：

var jsObject = {
        name:"张三"};
    
    axios({
        
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data: JSON.stringify(jsObject)
    }).then(function (resp) {
        
        alert(resp.data);
    })

而 `axios` 是一个很强大的工具。我们只需要将需要提交的参数封装成 js 对象，并将该 js 对象作为 `axios` 的 `data` 属性值进行，它会自动将 js 对象转换为 `JSON` 串进行提交。如下：

var jsObject = {
        name:"张三"};//声明js对象
    axios({
        
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:jsObject  //这里 axios 会将该js对象转换为 json 串的
    }).then(function (resp) {
        
        alert(resp.data);
    })

> 注意：
> 
>  *  js 提供的 `JSON` 对象我们只需要了解一下即可。因为 `axios` 会自动对 js 对象和 `JSON` 串进行转换。
>  *  发送异步请求时，如果请求参数是 `JSON` 格式，那请求方式必须是 `POST`。因为 `JSON` 串需要放在请求体中。

#### 5.3 JSON串和Java对象的相互转换 ####

学习完 json 后，接下来聊聊 json 的作用。以后我们会以 json 格式的数据进行前后端交互。前端发送请求时，如果是复杂的数据就会以 json 提交给后端；而后端如果需要响应一些复杂的数据时，也需要以 json 格式将数据响应回给浏览器。

![在这里插入图片描述][b2947d9aeeb14c8aa87e6c4379bfc112.png_pic_center]

在后端我们就需要重点学习以下两部分操作：

*  请求数据：JSON字符串转为Java对象
 *  响应数据：Java对象转为JSON字符串

接下来给大家介绍一套 API，可以实现上面两部分操作。这套 API 就是 `Fastjson`

##### 5.3.1 Fastjson 概述 #####

`Fastjson` 是阿里巴巴提供的一个Java语言编写的高性能功能完善的 `JSON` 库，是目前Java语言中最快的 `JSON` 库，可以实现 `Java` 对象和 `JSON` 字符串的相互转换。

##### 5.3.2 Fastjson 使用 #####

`Fastjson` 使用也是比较简单的，分为以下三步完成

1.  **导入坐标**
    
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>
2.  **Java对象转JSON**
    
        String jsonStr = JSON.toJSONString(obj);
    
    将 Java 对象转换为 JSON 串，只需要使用 `Fastjson` 提供的 `JSON` 类中的 `toJSONString()` 静态方法即可。
3.  **JSON字符串转Java对象**
    
        User user = JSON.parseObject(jsonStr, User.class);
    
    将 json 转换为 Java 对象，只需要使用 `Fastjson` 提供的 `JSON` 类中的 `parseObject()` 静态方法即可。

##### 5.3.3 代码演示 #####

public class FastJsonDemo {
        
        public static void main(String[] args) {
        
            //1. 将Java对象转为JSON字符串
            User user = new User();
            user.setId(1);
            user.setUsername("zhangsan");
            user.setPassword("123");
            String jsonString = JSON.toJSONString(user);
            System.out.println(jsonString);//{"id":1,"password":"123","username":"zhangsan"}
    
            //2. 将JSON字符串转为Java对象
            User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}", User.class);
            System.out.println(u);
        }
    }
    
    public class User {
        
        private Integer id;
        private String username;
        private String password;
        /*getter和setter和toString笔记就省略了*/
    }

[08dd5374c517458099c6235b59a4e39d.png_pic_center]: https://img-blog.csdnimg.cn/08dd5374c517458099c6235b59a4e39d.png#pic_center
[3c0adeee736445cebe7dfcb338bf8f5a.png_pic_center]: https://img-blog.csdnimg.cn/3c0adeee736445cebe7dfcb338bf8f5a.png#pic_center
[9f018cb2a752453880fd871f5373c4ec.png_pic_center]: https://img-blog.csdnimg.cn/9f018cb2a752453880fd871f5373c4ec.png#pic_center
[940cd601ca744f0cbb472e6e9fe1ada6.png_pic_center]: https://img-blog.csdnimg.cn/940cd601ca744f0cbb472e6e9fe1ada6.png#pic_center
[84507fb373cd48aa8d44bed195a1a149.png_pic_center]: https://img-blog.csdnimg.cn/84507fb373cd48aa8d44bed195a1a149.png#pic_center
[614fbf678d394d98ac25611b9d72854b.png_pic_center]: https://img-blog.csdnimg.cn/614fbf678d394d98ac25611b9d72854b.png#pic_center
[68c0096fb2bd4dc5966fccc6640064aa.png_pic_center]: https://img-blog.csdnimg.cn/68c0096fb2bd4dc5966fccc6640064aa.png#pic_center
[bf998b24acc84733a8b3f7240bc0eb4f.png_pic_center]: https://img-blog.csdnimg.cn/bf998b24acc84733a8b3f7240bc0eb4f.png#pic_center
[5134dcc205224c1499686e417f39062a.png_pic_center]: https://img-blog.csdnimg.cn/5134dcc205224c1499686e417f39062a.png#pic_center
[3290f4b846854e38ad6cdde7e6957389.png_pic_center]: https://img-blog.csdnimg.cn/3290f4b846854e38ad6cdde7e6957389.png#pic_center
[344938c479eb43fb8291705292101de2.png_pic_center]: https://img-blog.csdnimg.cn/344938c479eb43fb8291705292101de2.png#pic_center
[b26db810e13b49b280e87b73ef128dd6.png_pic_center]: https://img-blog.csdnimg.cn/b26db810e13b49b280e87b73ef128dd6.png#pic_center
[7bc009b90fda41ed934e3fa483c4056a.png_pic_center]: https://img-blog.csdnimg.cn/7bc009b90fda41ed934e3fa483c4056a.png#pic_center
[88719ebc43e94cb8a7338b5c0922faf3.png_pic_center]: https://img-blog.csdnimg.cn/88719ebc43e94cb8a7338b5c0922faf3.png#pic_center
[b2947d9aeeb14c8aa87e6c4379bfc112.png_pic_center]: https://img-blog.csdnimg.cn/b2947d9aeeb14c8aa87e6c4379bfc112.png#pic_center