[TOC]

16_Ajax&Json

AJAX：
JSON

1.AJAX:

概念：ASynchronous JavaScript And XML（异步的JavaScript和XML）
1. 异步和同步：客户端和服务器端相互通信的基础上
  - 客户端必须等待服务器端的响应。在等待期间客户端不能做其他操作。
  - 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
  - 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  - 提升用户的体验
实现方式：
1. 原生的JS实现方式(了解)
  1. 定义HTML界面 ```html <!DOCTYPE html>



      2. 
AjaxServlet后台处理逻辑
<br />
```java
package com.jie.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取请求参数
        String username = request.getParameter("username");

        //处理业务逻辑。耗时
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        //2.打印一下
        System.out.println(username);

        //3.响应
        response.getWriter().write("hello"+username);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

JQuery实现方式
1. $.ajax()
  - 语法:$.ajax({键值对}); ```html <!DOCTYPE html>


      2. 
`$.get()`：发送get请求

         - `语法：$.get(url,[data],[callback],[type])`

            - 参数：

               1. url：请求路径
               2. data：请求参数
               3. callback：回调函数
               4. type：响应结果的类型
      3. 
`$.post()`：发送post请求
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js">
    </script>
    <script>
        //定义方法
        function fun() {

            $.post("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");
        }
    </script>
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun()">
    <input type="text">

</body>

</html>

2.JSON:

概念：JavaScript Object Notation（JavaScript对象表示法）
- Person p = new Person();p.setName("张三");p.setAge(23);
- var p = {"name":"张三","age":"23"}
- json现在多用于存储和交换信息的语法
- 进行数据的传输
- JSON 比 XML 更小，更快，更易解析。
语法：
1. 基本规则
  - 数据在名称/值对中：json数据是由键值对构成的
    - 键用引号（单双都行）引起来，也可以不使用引号
    - 取值类型：
      - 数字（整数或浮点数）
      - 字符串（在双引号中）
      - 逻辑值（true 或 false）
      - 数组（在方括号中）{"persons":[{},{}]}
      - 对象（在花括号中）{"address":{"province":"陕西"...}}
      - null
  - 数据由逗号分隔：多个键值对由逗号分隔
  - 花括号保存对象：使用{}定义json格式
  - 方括号保存数组：[] ```html <!DOCTYPE html>


   2. 
获取数据:

      1. `json对象.键名`
      2. `json对象["键名"]`
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js">
    </script>
    <script>
        //1.定义基本格式
        var person = {"name": "张三", "age": 23, 'gender': true};

        var ps = [{"name": "张三", "age": 23, "gender": true},
            {"name": "李四", "age": 24, "gender": false},
            {"name": "王五", "age": 25, "gender": true}];

        //获取person对象中所有的键和值
        // for in 循环
        /*for (var key in person) {
            //这样方式不行，相当于person."name"
            // alert(key+":"+person.key);
            alert(key+":"+person[key]);

        }*/

        //获取ps中所有值
        for (var i = 0; i < ps.length; i++) {
            var p = ps[i];
            for (var key in p){
                alert(key+":"+p[key]);
            }
        }




    </script>
</head>
<body>

<input type="button" value="发送异步请求" onclick="fun()">
<input type="text">

</body>

</html>

3.JSON数据和Java对象的相互转换

JSON解析器：
- 常见的解析器：Jsonlib，Gson，fastjson，jackson

JSON转为Java对象
1. 使用步骤；
  1. 导入jackson相关jar包
  2. 创建Jackson核心对象ObjectMapper
  3. 调用ObjectMappper的相关方法进行转换
    1. readValue(json字符串数据,Class) ```java //Json字符串转为java对象 @Test public void test5() throws IOException {
  //1.初始化JSON字符串 String json = “{\”gender\”:\”男\”,\”name\”:\”张三\”,\”age\”:23}”;
  
  //2.创建一个ObjectMapper对象 ObjectMapper mapper = new ObjectMapper(); //3.转换为Java对象，Person对象 Person person = mapper.readValue(json, Person.class); System.out.println(person); } ```

Java对象转为JSON
1. 使用步骤；
  1. 导入jackson相关jar包
  2. 创建Jackson核心对象ObjectMapper
  3. 调用ObjectMappper的相关方法进行转换
    1. 转换方法：
      - writeValue(参数1，obj对象)
        
        参数1：
        
        File：将obj对象转换为JSON字符串，并保存到指定的文件中
        Writer：将obj对象转换成为JSON字符串，并将字符串数据填充到一个字符输出流中
        OutputStream：将obj对象转换成为JSON字符串，并将其字符串数据填充到一个字节输出流中
      - writeValueAsString(obj);将对象转为json字符串 ```java package com.jie.test;

import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import com.jie.domain.Person; import org.junit.jupiter.api.Test;

import java.io.File; import java.io.FileWriter; import java.io.IOException;

public class JacksonTest {

//Java对象转为json字符串
@Test
public void test() throws IOException {

    //1创建Person对象
    Person p = new Person();
    p.setName("张三");
    p.setAge(23);
    p.setGender("男");

    //2.创建Jackson核心对象 ObjectMapper
    ObjectMapper mapper = new ObjectMapper();

    //3.转换
    /*
        转换方法
            writeValue(参数1，obj对象)
                参数1：
                    File：将obj对象转换为JSON字符串，并保存到指定的文件中
                    Writer：将obj对象转换成为JSON字符串，并将字符串数据填充到一个字符输出流中
                    OutputStream：将obj对象转换成为JSON字符串，并将其字符串数据填充到一个字节输出流中
            writeValueAsString(obj);将对象转为json字符串
     */
    String s = mapper.writeValueAsString(p);

    System.out.println(s);//{"name":"张三","age":23,"gender":"男"}

    //writeValue 将数据写到d://a.tex

// mapper.writeValue(new File(“d://a.txt”),p);

    //writeValue 将数据关联到Writer中
    mapper.writeValue(new FileWriter("d://b.txt"),p);
}

}


         2. 
注解：

            1. `@JsonIgnore`：排除属性。
            2. `@JsonFormat`：属性值的格式化
            - 
问题：
```java
//Java对象转为json字符串
@Test
public void test2() throws IOException {

    //1创建Person对象
    Person p = new Person();
    p.setName("张三");
    p.setAge(23);
    p.setGender("男");
    p.setBirthday(new Date());

    //2.创建Jackson核心对象 ObjectMapper
    ObjectMapper mapper = new ObjectMapper();

    String s = mapper.writeValueAsString(p);

    System.out.println(s);//{"name":"张三","age":23,"gender":"男","birthday":1613899175625}

}

Date格式在转为json后是毫秒值，不希望看到是毫秒值，可选择以上两种方法解决

1.

忽略属性

@JsonIgnore
private Date birthday;

2.

转换格式

@JsonFormat(pattern = "YYYY-MM-dd")
private Date birthday;

                 - `{"name":"张三","age":23,"gender":"男","birthday":"2021-02-21"}`
     3.

复杂java对象的转换

1.

List：转换的是数组

//Java对象转为json字符串
@Test
public void test3() throws IOException {

    //1创建Person对象
    Person p1 = new Person();
    p1.setName("张三");
    p1.setAge(23);
    p1.setGender("男");
    p1.setBirthday(new Date());

    Person p2 = new Person();
    p2.setName("张三");
    p2.setAge(23);
    p2.setGender("男");
    p2.setBirthday(new Date());

    Person p3 = new Person();
    p3.setName("张三");
    p3.setAge(23);
    p3.setGender("男");
    p3.setBirthday(new Date());


    //创建LIst集合
    List<Person> list = new ArrayList<Person>();
    list.add(p1);
    list.add(p2);
    list.add(p3);


    //2.创建Jackson核心对象 ObjectMapper
    ObjectMapper mapper = new ObjectMapper();

    String s = mapper.writeValueAsString(list);

    System.out.println(s);

    /*
        [
            {
                "name":"张三",
                "age":23,
                "gender":"男",
                "birthday":"2021-02-21"
            },
            {
                "name":"张三",
                "age":23,
                "gender":"男",
                "birthday":"2021-02-21"
            },
            {
                "name":"张三",
                "age":23,
                "gender":"男",
                "birthday":"2021-02-21"
            }
        ]

    */

}

2.

Map：转的是对象

//Java对象转为json字符串
@Test
public void test4() throws IOException {

    //1创建Person对象
    Map<String,Object> map = new HashMap<>();
    map.put("name","张三");
    map.put("age",23);
    map.put("gender","男");

    //2.创建Jackson核心对象 ObjectMapper
    ObjectMapper mapper = new ObjectMapper();

    String s = mapper.writeValueAsString(map);

    System.out.println(s);//{"gender":"男","name":"张三","age":23}

}

4.案例

校验用户名是否存在
1. 服务器响应的数据，在客户端使用时，要想当做json的数据格式来使用的话
  1. $.get(type)：将最后一个参数指定为json
  2. 服务器端设置MIME类型
    response.setContentType("application/json;charset=utf-8");
  - 前端 ```html <!DOCTYPE html>
```

服务器

package com.jie.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //设置响应的数据格式为json
        response.setContentType("application/json;charset=utf-8");

        //1.获取用户名
        String username = request.getParameter("username");

        //2.调用service层判断用户名是否存在

        //期望服务器响应的格式 存在：{"userExsit":true,"msg":"此用户太受欢迎，请换一个"}
        //期望服务器响应的格式 不存在：{"userExsit":false,"msg":"用户名可用"}

        Map<String,Object> map = new HashMap<>();


        if ("tom".equals(username)){
            //存在
            map.put("userExsit",true);
            map.put("msg","此用户太受欢迎，请换一个");

        }else {
            //不存在
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }

        //将map转为json,并且传递给客户端
        ObjectMapper mapper = new ObjectMapper();
        //将数据传递个客户端
        mapper.writeValue(response.getWriter(),map);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}