Java研学-JSON与AJAX

一 JSON

1 定义

JSON（JavaScript Object Notation, JS 对象简谱）是一种轻量级的数据交换格式。它基于 ECMAScript （欧洲计算机协会制定的 JS 规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

2 格式

JSON 就是一种有格式的字符串。任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。

规则如下:
- 映射用冒号（“:”）表示。”名称” : 值，标准格式名称用双引号括起来；
- 并列的数据之间用逗号（“,”）分隔。”名称1” : 值1, ”名称2” : 值2；
- 映射的集合（对象）用大括号（“{}”）表示。{”名称1” : 值1, ”名称2”: 值2}
- 并列数据的集合（数组）用方括号(“[]”)表示。示例如下：
  [
   {”名称1” : 值, ”名称2” : 值2},
   {”名称1” : 值, ”名称2” : 值2}
  ]
- 元素值可具有的类型：string，number，object，array，true，false，null。

3 JavaScript 中的 JSON

① 表示 JSON

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json语法</title>
</head>
<body>
  <script>
      //json字符串
      var json01="\"name\":lisi";
      console.log(json01)
      //json对象
      var json02={"name":"lisi","age":23};
      console.log(json02)
      //json数组
      var json03=[
          {"name":"lisi","age":23},
          {"name":"zhangsan","age":23}
      ];
      console.log(json03)
  </script>
</body>
</html>

② JSON 与 JS 对象转换
浏览器环境提供一个工具类名叫JSON，里面提供方法帮我们实现 JSON 与 JS 对象之间的转换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json语法</title>
</head>
<body>
  <script>
      /*
      * json对象转字符串：
      * JSON.stringify()
      * json字符转转对象：
      * JSON.parse()
      * */
      //json对象
      var jsonObj={"name":"lisi","age":23};
      var str=  JSON.stringify(jsonObj);
      console.log(str)
      //json对象字符串
      var jsonStr="{\"name\":\"lisi\",\"age\":23}";
      var obj = JSON.parse(jsonStr);
      console.log(obj)
  </script>
</body>
</html>

二 Java 中的 JSON

1 表示 JSON

新建一个测试类于 Java 中表示 JSON

package cn.tj.json;
public class JsonTest {
	/*json格式*/
    @Test
    public void json_str() {
        /*基本json数据:
         * {"name":"李四","age":23,
         *  {"dept":"开发部"}
         * }
         * */
        String s = "{\"name\":\"李四\",\"age\":23}";
        System.out.println(s);
    }
}

2 JSON 与 Java 对象转换

开发中一般都会使用第三方的一些 JSON 操作的依赖或者 JAR 包来来完成 Java 对象与 JSON 字符串之间的转换，其中主要方法需通过ObjectMapper对象进行调用。在 Java 中，转换 JSON 的依赖或者 JAR 有很多，如：

- Jackson：在 Spring MVC 中内置支持(需要导入依赖才能使用)，速度也挺快，稳定性较好
- Fastjson：阿里出品，号称是 Java 领域中转换 JSON 最快的一个插件，中文文档较齐全

3 Jackson – ObjectMapper对象

① 添加依赖

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

② 调用API

/*jackson转换测试*/
    @Test
    public void json_jackson() throws Exception {
        //创建对象：数据库查询的对象(部门对象)
        Department department = new Department();
        department.setId(1l);
        department.setName("开发部");
        department.setSn("DEV");
        //map对象
        Map<String, Object> map = new HashMap<>();
        map.put("dept1", department);
        ObjectMapper objectMapper = new ObjectMapper();
        //对象转字符串
        //{"id":1,"name":"开发部","sn":"DEV"}
        String jsonStr = objectMapper.writeValueAsString(department);
        //map转字符串
        //{"dept1":{"id":1,"name":"开发部","sn":"DEV"}}
        //String jsonStr = objectMapper.writeValueAsString(map);
        System.out.println(jsonStr);
        //字符串转对象
        //{"id":1,"name":"开发部","sn":"DEV"}
        Department department1 = objectMapper.readValue(jsonStr, Department.class);
        //Department(id=1, name=开发部, sn=DEV)
        System.out.println(department1);
    }

4 Fastjson – JSON（静态可直接调用）

① 添加依赖

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

② 调用API

	/*fastjson转换测试*/
    @Test
    public void json_fastjson() {
        //创建部门对象
        Department department = new Department();
        department.setId(1l);
        department.setName("开发部");
        department.setSn("DEV");
        //对象转字符串:{"id":1,"name":"开发部","sn":"DEV"}
        String jsonString = JSON.toJSONString(department);
        System.out.println(jsonString);
        //字符串转对象:Department(id=1, name=开发部, sn=DEV)
        Department department1 = JSON.parseObject(jsonString, Department.class);
        System.out.println(department1);
    }

三 Spring MVC 响应 JSON

1 Spring MVC 响应 JSON 步骤

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

2 demo

@Controller
@RequestMapping("json")
public class JsonController {
    @Autowired
    private DepartmentService departmentService ;

    /*根据id查询部门:返回json格式数据*/
    @RequestMapping("getDept")
    //该注解表示将返回的数据以json格式展示，并且不经过视图解析器
    @ResponseBody
    public Department getDept(){
        // 无模拟视图对象，只是返回数据，故不走视图解析器
        Department department = departmentService.get(3l);
        // 直接返回对象，页面中以json格式显示
        return department;
    }

    /*查询所有部门:返回json格式数据*/
    @RequestMapping("queryAll")
    //将返回的数据以json格式展示，并且不经过视图解析器
    @ResponseBody
    public List<Department> queryAll(){
        List<Department> departments = departmentService.listAll();
        return departments;
    }
}

3 JsonResult

当接口逐渐增多，返回值的类型也会多种多样，造成开发不规范，此时应使用 JsonResult 统一返回值类型，也就是将所需数据都封装到一个对象中

package cn.tj.qo;
import lombok.Data;
@Data
public class JsonResult {
	//请求执行返回的状态值(执行是否成功)：true  false
    private boolean success;
    private String msg;//执行结果的提示信息
    private Object data;//crud操作的返回值

    public JsonResult() {
    }
    /*增删改 一般不需要返回数据*/
    public JsonResult(boolean success, String msg) {
        this.success = success;
        this.msg = msg;
    }

    /*查询 需要返回数据*/
    public JsonResult(boolean success, String msg, Object data) {
        this.success = success;
        this.msg = msg;
        this.data = data;
    }
}

4 常量参数 – CrmConstance

将所需字符串(操作后返回的信息)封装为常量，供 JsonResult 统一返回处理调用，便于修改

public class CrmConstance {
    public static  String DEPT_QUERY_SUCCESS="部门查询成功！";
    public static  String DEPT_QUERY_FAIL="部门查询失败！";
}

5 优化demo

@Controller
@RequestMapping("json")
public class JsonController {
    @Autowired
    private DepartmentService departmentService ;

    /*根据id查询部门:返回json格式数据*/
    @RequestMapping("getDept")
    //将返回的数据以json格式展示，并且不经过视图解析器
    @ResponseBody
    public JsonResult getDept(){
        Department department = departmentService.get(3l);
        return new JsonResult(true, CrmConstance.DEPT_QUERY_SUCCESS,department);
    }

    /*查询所有部门:返回json格式数据*/
    @RequestMapping("queryAll")
    //将返回的数据以json格式展示，并且不经过视图解析器
    @ResponseBody
    public JsonResult queryAll(){
        List<Department> departments = departmentService.listAll();
        return new JsonResult(true,CrmConstance.DEPT_QUERY_SUCCESS,departments);
    }
}

四 AJAX

1 介绍

AJAX 不是一项具体的技术，而是几门技术的综合应用。Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。是一种用于创建快速动态网页的技术。

AJAX 核心只不过是要在 Javascript 中调用一个叫 XMLHttpRequest 类，这个类可以与 Web 服务器使用 HTTP 协议进行交互，程序不通过浏览器发出请求，而是用这个特殊的 JavaScript 对象发送请求和接收响应。

XMLHttpRequest 对象在网络上的俗称为 AJAX 对象。

2 特点

浏览器中显示一个页面后，这个页面以后一直不改变，所有的操作请求都由这个网页中的 Javascript 代码发出，所有的结果都由 Javascript 代码接受并增加到这个页面上，浏览器窗口中显示的网页始终都是初始的那个网页。

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

同步和异步交互：
同步：提交请求 —> 等待服务器处理 —> 处理完毕返回这个期间客户端浏览器不能干任何事。同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步：请求通过事件触发 —> 服务器处理（这时浏览器仍然可以作其他事情）—> 处理完毕。异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

3 jQuery 中 AJAX API

三个方法都能实现AJAX异步操作，get和post是ajax的简写版

// options：一个包含 AJAX 请求所需的所有设置的对象。例如，你可以设置请求的 URL、请求类型（GET 或 POST）、请求头、预期的数据类型等。
1.jQuery.ajax([options])

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

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

// url：请求的 URL。
// data（可选）：要发送到服务器的数据。
// callback（可选）：请求成功时调用的函数。
// type（可选）：预期服务器返回的数据类型。

五 demo

1 GET 请求检查用户名是否存在

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax练习</title>
</head>
<body>
<!--请求结果的提示-->
<span id="result"></span><br/>
用户名:<input type="text" name="username" id="username">
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<script>
    //给输入框绑定一个失去焦点事件
    $("#username").blur(function (){
        //获取用户名
        var username = $("#username").val();
        //发送ajax异步请求，将页面输入的用户名发送服务器端
        $.get("/hello/checkName",{"username":username},function (data){
            // console.log(data)//服务器端返回的数据（return的数据）
            //根据返回值状态给出页面提示
            // if(data.success){
            //     $("#result").html(data.msg).css("color","green");
            // }else{
            //     $("#result").html(data.msg).css("color","red");
            // }
            $("#result").html(data.msg).css("color",data.success?"green":"red");
        },"json")
    })
</script>
</body>
</html>

HelloContrller

@Controller
@RequestMapping("hello")
public class HelloContrller {
    /*验证用户名*/
    @RequestMapping("checkName")
    @ResponseBody
    public JsonResult checkName(String username) {
        /*判断输入的用户名是否可用*/
        if ("lisi".equals(username)) {
            return new JsonResult(false, "这个用户名已经存在！");
        } else {
            return new JsonResult(true, "恭喜你这个用户名可以用！");
        }
    }
}

2 POST 请求用户登录操作

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax练习</title>
</head>
<body>
<!--登录提示-->
<span id="result"></span><br/>
用户名:<input type="text" name="username" id="username">
密码:<input type="text" name="password" id="password">
<button id="login">登录</button>
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<script>
   //给登录按钮绑定提交事件
   $("#login").click(function (){
       //账户和密码
       var username= $("#username").val();
       var password= $("#password").val();
       //发送ajax请求，验证表单输入的账号密码是否正确
       $.post("/hello/checkLogin",
           {"username":username,"password":password},function (data){
           console.log(data)
               $("#result").html(data.msg).css("color",data.success?'green':'red');
       },"json")
   })
</script>
</body>
</html>

HelloContrller

/*验证登录*/
    @RequestMapping("checkLogin")
    @ResponseBody
    public JsonResult checkLogin(String username, String password) {
        if ("admin".equals(username) && "123".equals(password)) {
            return new JsonResult(true, "登录成功！");
        } else {
            return new JsonResult(false, "账号或密码错误！");
        }
    }

3 二级联动

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax练习</title>
</head>
<body>
省份:<select id="p">
    <option value="-1">请选择</option>
</select>
城市:<select id="c">
    <option value="-1">请选择</option>
</select>
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<script>
    //页面加载完毕，查询展示省份下拉信息
    $.get("/hello/province", function (data) {
        //遍历省份数据
        $(data.data).each(function (i, item) {
            var s = "<option value='" + item.id + "'>" + item.name + "</option>";
            //将省份显示到省份的下拉框
            $("#p").append(s);
        })
    }, "json")

    //根据省份的选择 显示城市的下拉菜单
    $("#p").change(function () {//省份下拉框绑定内容改变事件
        $("#c > option").remove(":gt(0)");
        //先清空原来的下拉内容
        // $("#c").empty();
        //先添加请选择
        // $("#c").append("<option value=\"-1\">请选择</option>");
        //获取当前省份的id
        var pid = $(this).val();
        // console.log(pid)
        if (pid != -1) {
            //根据省份id查询下面的城市列表?pid=7
            $.get("/hello/city", {"pid": pid}, function (data) {
                //遍历城市数组
                $(data.data).each(function (i, item) {
                    var s = "<option value='" + item.id + "'>" + item.name + "</option>";
                    //城市下拉框添加选项
                    $("#c").append(s);
                })
            }, "json")
        }
    })
</script>
</body>
</html>

HelloContrller

/*省份信息查询*/
    @RequestMapping("province")
    @ResponseBody
    public JsonResult province() {
        //查询所有省份
        List<Province> provinceList = Province.getAllProvince();
        return new JsonResult(true, "省份查询成功！", provinceList);
    }

    /*省份信息查询*/
    @RequestMapping("city")
    @ResponseBody
    public JsonResult city(Long pid) {
        //根据省份查询城市
        List<City> cityList = City.getCityByProvinceId(pid);
        return new JsonResult(true, "省份查询成功！", cityList);
    }