一、JSON

• 基于JavaScript语法子集的开放标准数据交换格式
• 完全独立于编程语言的文本格式来存储和表示数据
• 可以提供网络传输效率, 提供响应速度, 增加用户体验

格式

- JSON 就是一种有格式的字符串
[
   {”名称1” : 值, ”名称2” : 值2},
   {”名称1” : 值, ”名称2” : 值2}
]

var json = ‘{“id”:x, “name”:”xx”, “age”:xx}, {“id”:x2, “name”:”xx2”, “age”:xx2}’;

二、 JavaScript 中的 JSON

js对象和json对比

        var json0 = '{"id":1, "name":"zs", "age":"18"}';    // JSON
        console.log(json0.id);    // undefined
        var jsObj1 = {"id":1, "name":"zs", "age":18};       // JS对象
        console.log(jsObj1.name); // zs
        var jsObj2 = {id:1, name:"zs", age:18};             // JS对象
        console.log(jsObj2.age);  // 18

JSON与JS对象转换

         var jsObj1 = {"id":1, "name":"zs", "age":18};       // JS对象
        // 假装获取到服务器响应的数据， 有一种方式切割字符串，不可取的
        var json1 = '{"id":1, "name":"zs", "age":"18"}';  //JSON
         // 写JSON格式，这个格式的字符串里面存两个个员工数据 id:1  name:zs   age:18      id:2  name:ls   age:19
        var json2 = '[{"id":1, "name":"zs", "age":18}, {"id":2, "name":"ls", "age":19}]';
        // 写JSON格式，这个格式的字符串里面存两个个员工数据 id:1  name:zs   age:18   部门  id:5  name:开发部
        var json3 = '{"id":1, "name":"zs", "age":"18", "dept":{"id":5, "name":"开发部"}}';

        // JSON 浏览器环境提高一个工具， 里面提供方法实现两者的转换
        console.log(JSON.parse(json1));         // JSON字符串 ==> js对象        {id: 1, name: "zs", age: "18"}
        console.log(JSON.parse(json2));         // JSON字符串 ==> js对象    (2) [{…}, {…}]
        console.log(JSON.parse(json3));         // JSON字符串 ==> js对象    {id: 1, name: "zs", age: "18", dept: {…}}
        console.log(JSON.stringify(jsObj1));    // js对象  ==> JSON字符串   字符串 {"id":1,"name":"zs","age":18}

三、在Java中的JSON

 // 写JSON 格式 ，这个格式的字符串里面存一个员工数据， id:1  name:zs   age:18
        String json1 = "{\"id\":1, \"name\":\"zs\", \"age\":\"18\"}";

JSON与Java对象转换

开发中一般都会使用第三方的一些JSON操作的依赖或者JAR包来来完成Java对象与JSON字符串之间的转换。
在Java中，转换JSON的依赖或者JAR有很多，这里单讲两种常用：
Jackson：在SpringMVC中内置支持她，速度也挺快，稳定性比较好。
Fastjson：阿里出品，号称是Java领域中转换JSON最快的一个插件，中文文档比较齐全。

Jackson 依赖

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.6</version>
</dependency>

Fastjson 依赖

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.47</version>
</dependency>

Jackson转换

       // JSON字符串与JAVA对象之间转换
        Department department = new Department();
        department.setId(1L);
        department.setName("开发部");
        department.setSn("SN01");

        ObjectMapper objectMapper = new ObjectMapper();
        // JAVA对象   =>  JSON字符串
        System.out.println(objectMapper.writeValueAsString(department));
        // JSON字符串 =>  JAVA对象
        System.out.println(objectMapper.readValue("{\"id\":1, \"name\":\"zs\", \"sn\":\"SN01\"}",Department.class));

console:
      {"id":1,"name":"开发部","sn":"SN01"}
      Department(id=1, name=zs, sn=SN01)

四、Spring MVC响应JSON

步骤

1、在pom.xml中添加Jackson依赖。
2、在mvc.xml配置MVC注解解析。(一般都已配置好了)
3、定义一个类，里面提供对应属性封装数据。
4、在要响应JSON数据的控制器的处理方法上贴@ResponseBody注解，且方法返回类型为上面定义的类。
5、在处理方法中创建上面定义类 的对象，封装数据返回即可。

例子

响应类型这样的JSON数据 {“success”:true,”msg”:”2020-03-16 10:00”}

@RequestMapping("/getTime")
    @ResponseBody
    public JsonResult getTime() {
        Date date = new Date();

        JsonResult jsonResult = new JsonResult();
        jsonResult.setMsg(date.toLocaleString());
        jsonResult.setSuccess(true);
        return jsonResult;

    }

响应类型多个部门]列表的JSON数据[{"id":1, "name":"开发部", "sn":"DEV"}, {"id":2, "name":"人事部"，"sn": "HR"}]

  @Autowired
   private IDepartmentService departmentService;
   //响应类型多个部门]列表的JSON数据[{"id":1, "name":"开发部", "sn":"DEV"}, {"id":2, "name":"人事部"，"sn": "HR"}]

   @RequestMapping("/depts")
   @ResponseBody
   public List<Department> depts() {
       return departmentService.listAll();
   }

五、AJAX概述

• AJAX不是一项具体的技术，而是几门技术的综合应用。Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。
• AJAX核心只不过是要在 Javascript 中调用一个叫 XMLHttpRequest 类，这个类可以与 Web 服务器使用 HTTP 协议进行交互，程序不通过浏览器发出请求，而是用这个特殊的 JavaScript 对象发送请求和接收响应。
• XMLHttpRequest 对象在网络上的俗称为AJAX对象。
• 一种不用刷新整个页面便可与服务器通讯的办法（更新网页部分数据）。

特点

• 异步

  
  
• 增强用户体验：可以在用户浏览网页的同时与服务器进行异步交互和实现网页内容的局部更新。

缺陷

• 浏览器的支持。IE5.0 及以上、Mozilla1.0、NetScape7 及以上版本才支持，Mozilla 虽然也支持 Ajax ，但是提供 XMLHttpRequest 的方式不一样。所以，使用 Ajax 的程序必须测试针对各个浏览器的兼容性。
• AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
• 对流媒体的支持没有 Flash、Java Applet 好。H5
• AJAX不支持跨域访问。（不做特殊处理只能请求同源的资源）

六、 jQuery中 AJAX操作

jQuery中AJAX方法

• jQuery.ajax(url,[settings])

• jQuery.get(url, [data], [callback], [type])

• jQuery.post(url, [data], [callback], [type])

• 示例

        var option = $.ajax({
            type: "POST", // 请求方式
            url: "some.php",    // 请求路径
            data: "name=John&location=Boston", // 请求参数
            success: function(msg){     // success函数, 服务器成功响应会执行函数第 个实参就是服务响应回来的数据
                alert( "Data Saved: " + msg );
            }
        });

        //第一个请求路径，第二个请求参数，服务响应回来执行函数第一个实参就是服务响应回来的数据
        $.get('some.php','name=John&location=Boston',function(msg){
                alert( "Data Saved: " + msg );
        });

        $.post('some.php','name=John&location=Boston',function(msg){
                alert( "Data Saved: " + msg );
        });

        $.ajax(option);