JavaWeb系列二十一: 数据交换和异步请求(JSON, Ajax)

注意事项和细节

1.JSON.stringify(json对象)会返回json对象对应的String, 并不会影响原来的json对象.

2.JSON.parse(String)函数会返回对应的json的对象, 并不会影响原来的String.

3.在定义json对象时, 可以使用单引号''表示字符串.

 //比如
 var personJson = {"name": "赵志伟","age": 23};
 //也可以写成
 var personJson = {'name': '赵志伟','age': 23};

4.但是在把原生字符串转成json对象时, 必须使用双引号"", 否则会报错, 比如

var dogStr = "{'name':'喵喵', 'age':1}";//转 json 会报错

5.JSON.stringify(json对象)返回的字符串, 都是双引号""括起来的字符串, 所以在语法格式正确的情况下, 是可以重新转成json对象的.

JSON在java中使用

说明

1.在java中使用json, 需要引入到第三方的包 gson.jar.

2.Gson是Google提供的用来在Java对象和JSON数据之间进行映射的Java类库.

3.可以对JSON字符串和Java对象相互转换.

JSON在Java中应用场景

1.Javabean对象和json字符串的转换.

2.List对象和json字符串的转换.

3.map对象和json字符串的转换.

4.应用场景示意图

应用实例

需求: 演示json在java程序的使用.

1.引入gson.jar包.

2.新建src/com/zzw/json/Book.java

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Book {
    private Integer id;
    private String name;
}

3.新建src/com/zzw/json/JavaJson.java

public class JavaJson {
    public static void main(String[] args) {
        //引入gson包, 创建一个gson对象, 作为一个工具使用
        Gson gson = new Gson();

        //一. 演示 java对象 和 json的转换
        System.out.println("\n=== 1. java 对象和 json 的转换 ====");
        Book book = new Book(100, "java编程思想");
        //1.把 java对象 转成 json字符串
        String bookStr = gson.toJson(book);
        System.out.println("bookStr = " + bookStr);
        //2.把 json字符串 转成 java对象
        //解读: bookStr就是json字符串, Book.class指定将json字符串转成Book对象
        //底层是反射机制
        Book book2 = gson.fromJson(bookStr, Book.class);
        System.out.println("book2 = " + book2);

        //二. 演示 List集合 和 json的转换
        System.out.println("\n======2. List 集合和 json 的转换======");
        List<Book> bookList = new ArrayList<>();
        bookList.add(new Book(200, "python编程思想"));
        bookList.add(new Book(300, "C++编程思想"));
        //1.把 list集合 转成 json字符串
        //解读: 因为把一个 对象/集合 转成字符串, 相对比较简单
        //底层只需要遍历, 获取对象的属性, 按照json格式拼接返回即可
        String bookListStr = gson.toJson(bookList);
        System.out.println("bookListStr = " + bookListStr);
        //2.把 json字符串 转成 list集合
        /**
         * 解读
         * (1)如果需要把 json字符串 转成 集合 这样复杂的类型, 需要使用gson提供的一个类
         * (2)TypeToken, 是一个自定义泛型类, 然后通过TypeToken来指定我们需要转换成的类型
         * public class TypeToken<T> {
         *     final Class<? super T> rawType;
         *     final Type type;
         *     final int hashCode;
         *     protected TypeToken() {
         *         this.type = getSuperclassTypeParameter(this.getClass());
         *         this.rawType = Types.getRawType(this.type);
         *         this.hashCode = this.type.hashCode();
         *     }
         * }
         * (3)返回的是类型的完整路径: java.util.List<com.zzw.json.Book>
         * (4)gson的设计者, 需要得到类型的完整路径, 然后在底层进行反射
         * (5)所以gson设计者就提供了TypeToken来搞定.
         *
         *
         * 二说TypeToken [为什么要添加{}, 涉及到内部类..]
         * (1)如果我们这样写 new TypeToken<List<Book>>().getType();
         * 会提示: 'TypeToken()' has protected access in 'com.google.gson.reflect.TypeToken
         * (2)因为TypeToken的无参构造方法, 是一个protected的
         *    , 所以不能直接new, 而new TypeToken<List<Book>>()就是调用其无参构造方法
         * (3)根据java基础, 如果一个方法是protected, 而且不在同一个包, 是不能直接访问的, 所以报错
         * (4)为什么 new TypeToken<List<Book>>() {}.getType() 这样使用就可以, 这涉及到匿名内部类的使用
         * (5)当new TypeToken<List<Book>>() {}这样使用, 返回类型就不再是TypeToken, 而是匿名内部类[可以看作是TypeToken的子类]
         * (6)而且这个匿名内部类是有自己的无参构造器的(隐式), 根据java基础, 当执行子类无参构造器时, 默认先执行super();
         *
         * 三说TypeToken [对java基础回顾]
         * class JabaBean$1 extends com.google.gson.reflect.TypeToken<List<Book>> {
         *      public JabaBean$1() {
         *          super();
         *      }
         * }
         * TypeToken<List<Book>> typeToken = new JabaBean$1();
         * typeToken.getType();
         */
        TypeToken<List<Book>> typeToken = new TypeToken<List<Book>>() {};
        System.out.println("typeToken = " + typeToken.getClass());//typeToken = class com.zzw.json.JavaJson$1
        List<Book> bookList2 = gson.fromJson(bookListStr, typeToken.getType());
        System.out.println("bookList2 = " + bookList2);
    }
}

1.3.3 Map对象和JSON字符串转换

2. Ajax介绍

1. AJAX即Asynchronous Javascript And XML(异步 JavaScript 和 XML)
2. AJAX是一种浏览器异步发起请求(可以指定发送哪些数据), 局部更新页面的技术

2.1 Ajax应用场景

1. 搜索引擎根据用户输入的关键字, 自动提示检索关键字
2. 动态加载数据, 按需取得数据 [树形菜单, 联动菜单…]
3. 改善用户体验 [输入内容前提示, 带进度条文件上传…]
4. 电子商务应用 [购物车, 邮件订阅…]
5. 访问第三方服务 [访问搜索服务, rss阅读器]
6. 页面局部刷新, https://piaofang.maoyan.com/dashboard

2.2 传统的web应用-数据通信方式

2.3 Ajax-数据通信方式

$.post(
    "/ajax/checkUserServlet2",
    {
        username: $("#username").val(),
        date: new Date() //built-in
    },
    function (data, status, xhr) {//成功后的回调函数
        console.log("$.post()请求成功");
        console.log("data=", data);
        console.log("status=", status);
        console.log("xhr=", xhr);
        //data是json对象,如果要显示-转成字符串
        $("#div").html(JSON.stringify(data));
        //对返回的结果进行处理
        if ("" == data.name) {
            $("#message").val("该用户名可用");
        } else {
            $("#message").val("该用户名不可用");
        }
    },
    "json"
)