JSON

关于 JSON 本身的一些信息，可以在：JSON 和 XML 思维导图 查看，这里不在叙述。

JavaScript Object <-> String

在 JavaScript 中，JSON 本身是一个对象，以访问属性的方式访问 JSON 里面的键值对:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function () {
    var json={
        "Tempest" : "Xorex",
        "Yukinoshita" : { //Json 内嵌对象
            "name" : "Yukino",
            "age" : 18,
            "height" : 168,
            "log" : ["Yukinoshita","Yukino"] //这里是 Json 表示数组的方法
        },
        "Yuuki" : "Asuna"
    }
    var String=json.Tempest;
    var Array=json.Yukinoshita.log;
})

对于前后端进行数据传输的过程中，使用的就是 JSON 字符串进行传输，然后再解析成对象进行使用。在 JS 中对象转字符串使用：JSON.stringify() ，将字符串转为 JSON 使用 JSON.parse() 。

Java Object <-> String

在 Java 端，则使用 Google 提供的 Gson 包的 Gson 对象来对 JSON 进行状态转换。

JavaBean

使用对于 JavaBean 来说，只需要在使用 fromJson(String,Class) 生成对象的时候传入 JavaBean 的 Class 对象即可。

1
2
3
4
5
6
User userTempest=new User("Tempest", "Xorex", "email");
Gson gson=new Gson();
String jsonString=gson.toJson(userTempest);
User jsonBean=gson.fromJson(jsonString, User.class);
System.out.println(jsonString);
System.out.println(jsonBean);

包含泛型的对象

对于一个包含了泛型的对象比如 List 和 Map 来说，使用简单的 getClass() 是没有办法连同里面包含数据的 Class 一起获取的，那么在将 String 的 Json 转化为对应的实例的时候，就无法获取里面真正的泛型对应数据。比如这里 list.getClass() 之后，拿到的仅仅只是 ArrayList 的 Class 对象，导致了后面调用实例内部元素的方法的时候出错。

1
2
3
4
5
6
7
8
9
public void JSON() {
    Gson gson=new Gson();
    List<User> list=new ArrayList<>();
    list.add(new User("Tempest", "Xorex", "email"));
    list.add(new User("Yukinoshita", "Yukino", "email"));
    String jsonString=gson.toJson(list);
    List<User> jsonList=gson.fromJson(jsonString, list.getClass()); // 这里传入的 Class 不完整
    System.out.println(jsonList.get(0).getEmail()); //导致了获取集合内部元素之后，无法正常使用
}

而正确的做法就是利用 TypeToken<T> 来解决，利用匿名内部类的形式创建一个 TypeToken<T> 的实例，调用其方法 getType() 返回的就是泛型 T 所对应完整的 Class，其对应的代码为：new TypeToken<ArrayList<User>>(){}.getType()

1
2
3
4
5
6
7
8
9
public void JSON() {
    Gson gson=new Gson();
    List<User> list=new ArrayList<>();
    list.add(new User("Tempest", "Xorex", "email"));
    list.add(new User("Yukinoshita", "Yukino", "email"));
    String jsonString=gson.toJson(list);
    List<User> jsonList=gson.fromJson(jsonString, new TypeToken<ArrayList<User>>(){}.getType());
    System.out.println(((User)jsonList.get(0)).getEmail());
}

AJAX

概述

AJAX 是 Asynchronous JavaScript and XML 的缩写，意为异步的 JavaScript 和 XML。它可以利用 JavaScript 去服务器获取响应，并在不刷新的条件下，更新页面的内容。这里只讲述一下关于 jQuery 的 AJAX 的使用方法：

$.ajax()

这里使用 $.ajax(); 方法来进行发起异步请求，其中方法参数为一个 JSON 对象，这个对象有若干可设置参数：

  • url 表示发起请求的地址

  • type 表示请求的类型 GET ro POST

  • data 表示请求写代的参数，有两种形式 "key=value&key=value" 和 "{key:value}" 两种

  • success 用于绑定一个方法，为响应成功之后执行的方法，方法需要设置一个参数，用于传入 ajax 响应的响应体数据。

  • dataType 用于标识响应的数据类型，”text” “json” “xml” 之类的。当为 text 的时候，数据会转化为字符串类型，json 的时候，会调用 JSON.parse() 将 String 数据会转化为 json 对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    $(function () {
        $("#button").click(function () {
            $.ajax({
                url:"http://localhost:8080/BookStore/ajax?service=ajax",
                type: "GET",
                data: {name:"Xorex"},
                dataType: "json",
                success:function(data) {
                    $("#h1").text("我的名字是："+data.name);
                }
            })
        })
        var json={name:"Xorex"}
    })
</script>
<body>
<button value="submit" id="button">发送请求</button>
<h1 id="h1"></h1> <!-- 用来显示返回的数据 -->
</body>

$.get() or $.post()

这是一种更加简单的发起 ajax 的方式，直接定义了发送请求方式，填写的 JSON 参数可以更加简洁。

$.get(url,data,function,dataType) 和 $.post(url,data,function,datatype) 不需要构造 json，只需要依次填入参数即可。

$.getJson()

更离谱 $.getJson(url,data,function) ，只需要了三个参数。