JavaWeb 收尾5JSON JSON 是一种轻量级的数据交互格式。易于人阅读和编写、同时也已于机器解析和生成。 JS

JSON

JSON 是一种轻量级的数据交互格式。易于人阅读和编写、同时也已于机器解析和生成。 JSON 采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（C、Java、JS 等）。这样就使得 JSON 成为理想的数据交换格式。

轻量级指的是，json 和 xml 做比较
数据交换指的是，客户端和服务器之间业务数据的传递格式

JSON 在 JavaScript 中的使用

json 的定义

json 是由键值对组成，并且由花括号包围，每个键都由引号引起来，键和值之间使用冒号分隔，多组键值对之间使用逗号分隔。

json 就是一个对象

// json的定义
var jsonObj = {
   "key": 12,
   "key2": "abkc",
   "key3": true,
   "key4": [11, "ahjk", false],
   "key5": {
        "key5_1": 551,
        "key5_2": "key5_2_value"
   },
   "key6": [{
             "key6_1_1": 611,
             "key6-1-2": "key6_1_2_value"
            },
            {
             "key6_2_1": 621,
             "key6_2_2": "key6_2_2_value"
            }]
};

json 的访问

json 本身就是一个对象
json 中的 key 我们可以理解为是对象中的一个属性
json 中的 key 的访问，就跟访问对象属性一样：json对象.key

json 的两个常用方法

一般我们要操作 json 中的数据时，需要 json 对象格式；而我们要在客户端和服务器之间进行数据交互时，使用 json 字符串。

json 的存在有两种形式：

对象的形式存在，我们称它为 json 对象
字符串的形式存在，我们称它为 json 字符串

json 常用的两个方法：

JSON.stringify()：将 json 对象 -> json 字符串
JSON.parse()：将 json 字符串 -> json 对象

JSON 在 Java 中的使用

gson 是 Java 中使用 json 的 jar包

javaBean 和 json 的互转

gson.toJson()：将对象转换为 json字符串
gson.fromJson()：将 json 字符串转换为对应类型

@Test
public void test1 () {

    Person lv = new Person(1, "lv好亮");
    // 创建 Gson 对象实例
    Gson gson = new Gson();
    // toJson：将 对象转换 json字符串
    String personJsonStr = gson.toJson(lv);
    System.out.println(personJsonStr);
    // fromJson：将 json字符串转换为 对象
    Person person2 = gson.fromJson(personJsonStr, Person.class);
    System.out.println(person2);

}

List 和 json 的互转

当在集合中使用 json 时，fromJson() 需要使用 TypeToken 类
只有继承 TypeToken 类，集合中的数据才能转换为对应的类
PersonListType.java

package com.atjava.json;

import com.atjava.pojo.Person;
import com.google.gson.reflect.TypeToken;

import java.util.ArrayList;

/**
 * @author lv
 * @create 2021-11-06 20:58
 */
public class PersonListType extends TypeToken<ArrayList<Person>> {
}

@Test
public void test2 () {
    List<Person> personList = new ArrayList<>();
    personList.add(new Person(1, "vv"));
    personList.add(new Person(2, "vva"));

    Gson gson = new Gson();
    String personToJsonStr = gson.toJson(personList);
    System.out.println(personToJsonStr); // [{"id":1,"name":"vv"},{"id":2,"name":"vva"}]

    List personList2 = gson.fromJson(personToJsonStr, List.class);
    System.out.println(personList2);
    // List.class：[{id=1.0, name=vv}, {id=2.0, name=vva}]

    /**
     * PersonListType 需要继承 gson 的 TypeToken，并获得对象的类型 type
     */
    List personList3 = gson.fromJson(personToJsonStr, new PersonListType().getType());
    System.out.println(personList3);
    // new PersonListType().getType()：[Person{id=1, name='vv'}, Person{id=2, name='vva'}]

}

map 和 json 的互转

集合中使用 json 也可以使用匿名内部类继承 TypeToken，减少 .java 文件的创建
new TypeToken<HashMap<Integer, Person>>(){}.getType()

@Test
public void test3 () {
    Map<String, Object> hm = new HashMap<>();
    hm.put("key1", "123");
    hm.put("key2", true);
    System.out.println(hm); // {key1=123, key2=true}

    Gson gson = new Gson();
    String mapToJsonStr = gson.toJson(hm);
    System.out.println(mapToJsonStr); // {"key1":"123","key2":true}

    Map fromJson = gson.fromJson(mapToJsonStr, Map.class);
    System.out.println(fromJson);
    // Map.class：{key1=123, key2=true}

    Map<Integer, Person> hmPerson = new HashMap<>();
    hmPerson.put(0, new Person(1, "789"));
    hmPerson.put(1, new Person(2, "456"));

    String toJson = gson.toJson(hmPerson);
    System.out.println(toJson);
    // {"0":{"id":1,"name":"789"},"1":{"id":2,"name":"456"}}

    Map fromJson1 = gson.fromJson(toJson, Map.class);
    System.out.println(fromJson1);
    // {0={id=1.0, name=789}, 1={id=2.0, name=456}}

    Map<Integer, Person> fromJson2 = gson.fromJson(toJson, new PersonMapType().getType());
    System.out.println(fromJson2);
    // {0=Person{id=1, name='789'}, 1=Person{id=2, name='456'}}

    // type 类型使用 匿名内部类，减少类文件的编写
    // new TypeToken<HashMap<Integer, Person>>(){} 减少内存的占用
    Map<Integer, Person> fromJson3 = gson.fromJson(toJson, new TypeToken<HashMap<Integer, Person>>(){}.getType());
    System.out.println(fromJson3);
    // {0=Person{id=1, name='789'}, 1=Person{id=2, name='456'}}

}

AJAX 请求

何为 AJAX 请求

AJAX 即 “Asynchronous JavaScript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。

AJAX 请求是局部更新，浏览器地址栏不会发生变化，局部更新不会舍弃原来的页面内容
AJAX 请求发出后，会立即执行后面的代码，当响应结果返回后会自动执行接受响应的代码

原生 AJAX 请求示例：

ajax.html
1. 创建XMLHttpRequest 对象 var xhr = new XMLHttpRequest()
2. 调用open方法设置请求参数 xhr.open(method, url, async);
3. 调用send方法发送请求 xhr.send();
4. 在send方法前绑定onreadystatechange事件，处理请求完成后的操作 xhr.onreadystatechange = function () {...}
5. 请求响应的状态 xhr.readyState == 4，请求已完成，且响应已就绪
6. xhr.status == 200，OK

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta http-equiv="pragma" content="no-cache" />
      <meta http-equiv="cache-control" content="no-cache" />
      <meta http-equiv="Expires" content="0" />
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Insert title here</title>
      <script type="text/javascript">
            /**
          * 在这里使用 javascript语言发起 ajax请求，
          * 访问服务器 AjaxServlet中 javaScriptAjax
             */
         function ajaxRequest() {
//              1、我们首先要创建XMLHttpRequest
            var xhr = new XMLHttpRequest();
//              2、调用open方法设置请求参数
            xhr.open("GET", "http://localhost:8080/ajaxServlet?action=javaScriptAjax", true);

//              4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var result = xhr.responseText;
                        var person = JSON.parse(result);
                        document.getElementById("div01").innerHTML = "编号：" + person.id + " ,姓名：" + person.name;
                        // alert(result);
                    }
                };

//              3、调用send方法发送请求
            xhr.send();

         }
      </script>
   </head>
   <body> 
      <button onclick="ajaxRequest()">ajax request</button>
      <div id="div01">
      </div>
   </body>
</html>

AjaxServlet.java

package com.atjava.servlet;

import com.atjava.pojo.Person;
import com.google.gson.Gson;

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

/**
 * @author lv
 * @create 2021-11-07 20:39
 */
public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax (HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // super.doGet(req, resp);
        System.out.println("我来了，AJAX");
        Person lv = new Person(1, "lv");
        Gson gson = new Gson();
        String personJsonStr = gson.toJson(lv);

        // 将 personJson 返回给 客户端
        resp.getWriter().write(personJsonStr);
    }
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    
    <servlet>
        <servlet-name>AjaxServlet</servlet-name>
        <servlet-class>com.atjava.servlet.AjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>AjaxServlet</servlet-name>
        <url-pattern>/ajaxServlet</url-pattern>
    </servlet-mapping>
</web-app>

jQuery 中的 AJAX 请求

$.ajax 方法

url：表示请求的地址
type：表示请求的类型 GET 或 POST
data：表示发送给服务器的数据
success：请求成功，响应的回调函数 function
dataType：服务器响应的数据类型，text、xml、json

<script type="text/javascript">
   $(function(){
      // ajax请求
      $("#ajaxBtn").click(function(){
         $.ajax({
            url: "http://localhost:8080/ajaxServlet",
            type: "get",
            // data: "action=jQueryAjax", 或 下面格式
            data: { action: "jQueryAjax"},
            success: function (data) {
               // data 服务器返回的数据
                          // alert("ajax btn：" + data); // ajax btn：{"id":1,"name":"lv"}
               // var jsonObj = JSON.parse(data);
               // $("#msg").html("编号：" + jsonObj.id + " ,姓名：" + jsonObj.name);

               // dataType: "json"，自动转为 json格式
               $("#msg").html("编号：" + data.id + " ,姓名：" + data.name);

                      },
            // dataType: "text",
            dataType: "json",
         })
      });
   };
</script>

$.get 方法和 $.post 方法

url：表示请求的地址
data：表示发送给服务器的数据 key/value
callback：请求成功的回调函数
type：服务器响应的数据类型，text、xml、json

<script type="text/javascript">
   $(function(){
      // ajax--get请求
      $("#getBtn").click(function(){
          $.get(
            "http://localhost:8080/ajaxServlet",
            "action=jQueryGet",
            function(data) {
                          $("#msg").html("GET-编号：" + data.id + " ,姓名：" + data.name);
            },
            "json",
         )
         // alert(" get btn ");
      });
   };
</script>

$.getJSON 方法

url
data
callback

JavaWeb 收尾5