Json基础

发表于 | 分类于 | | 浏览 次
| 字数统计: 1.8k 字 | 阅读时长 ≈ 7 分钟
前后端文本数据交互，跨平台跨语言的JSON

前言

JSON其实就是一种数据的表示格式，由于其自身的优点（XML衬托）而广泛用于前后端的文本数据交互。这里又大概能够窥见XML与JSON的暗流涌动，一如前述JSP的落寞，但不至于那么惨烈。目前XML格式的文件还广泛作为配置文件的格式存在，尽管.yml、.properties、.json文件也在某些地方作为配置文件的格式。

细想起来，无非也就是一种数据格式。编程圈里可能有很多“取代”这一说法，我并不十分认同，每种技术点自然有其存在的环境与背景，适时的发挥作用罢了。但技术的向前发展进步，是毋庸置疑的，所以我也不会无聊地选择用XML来做文本数据传输。突然想到，HTML的标签语法，是不是也存在着标签增加网络传输流量这一说法？又或者从JSON的命名看，是否前端巨头JavaScript就捧红了JSON呢？当然这是无端的幻想，技术时时刻刻都在迭代，我们唯有跟着大浪而已。

地平线的余晖

Json简介

JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快，更易解析。

  • JSON 指的是 JavaScript 对象表示法JavaScript Object Notation
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言
  • JSON 具有自我描述性，更易理解

JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言（PHP、Java、Python中均可以使用JSON）。

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

注：JSON常用于前后端的数据交互（前端Ajax上传JSON数据，服务器返回JSON字符串），需要明确是文本数据，类似图片文件等不能通过JSON来传输。

Json数据

通过Js语法声明并初始化JSON对象，可以是单个JSON对象，也可以是JSON数组。

var JSONObject= {
    "name":"Bill Gates",
    "street":"Fifth Avenue New York 666",
    "age":56,
    "phone":"555 1234567"};
    
//json数组，每个元素是一个对象    
var employees = [
    { "firstName":"Bill" , "lastName":"Gates" },
    { "firstName":"George" , "lastName":"Bush" },
    { "firstName":"Thomas" , "lastName": "Carter" }
];

语法

  • 数据在名称/值对中（双引号）
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

Json数据值

  • 数字（整数或浮点数）
  • 字符串（在双引号中）
  • 逻辑值（true 或 false）
  • 数组（在方括号中）
  • 对象（在花括号中）
  • null

注: Js的数据类型一般为6种，其中基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined），引用数据类型：对象(Object)，ES6中新增Symbol（独一无二的值）。可以通过 typeof 查看变量类型，数组(Array)返回object类型，函数(Function)返回function类型。

Json基本用法

把 JSON 文本转换为 JavaScript 对象

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

<html>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>
First Name: <span id="fname"></span><br /> <!--显示Bill-->
Last Name: <span id="lname"></span><br /> <!--显示Gates-->
</p> 
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';

var obj = eval ("(" + txt + ")");

document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>

JSON解析器

eval() 函数可编译并执行任何 JavaScript 代码。

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。

在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。

行走在街头

Json应用示例

从前端的视角来解读JSON用法，包括如何将服务端的JSON字符串解析为JSON对象，以及如何将JSON对象转换为JSON字符串传递给服务端。

JSON.parse()

JSON 通常用于与服务端交换数据。前端接收服务器数据时一般是获得字符串。

我们可以使用 JSON.parse() 方法将JSON字符串数据转换为 JavaScript 对象。

语法：JSON.parse(text, [reviver])

reviver: 一个转换结果的函数， 将为对象的每个成员调用此函数。

  • 从服务端接收json数据
  • 从服务端接收数组的json数据
  • 解析日期
  • 解析函数（将函数作为字符串存储，不建议在json中使用函数）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>字符串转换为 Date 对象</h2>

<p id="demo"></p>

<script>
//案例：可选参数reviver的使用（一般为函数）

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
	if (key == "initDate") {
	    return new Date(value);
	} else {
	    return value;
}});

document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

</script>
</body>
</html>

JSON.stringify()

JSON 通常用于与服务端交换数据。在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>将 JavaScript 对象转换为 JSON 字符串</h2>

<p id="demo"></p>

<script>

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

//上述两句替换后测试
//document.getElementById("demo").innerHTML = obj;

</script>

</body>
</html>

Java中使用JSON

Java中并没有内置JSON的解析，因此使用JSON需要借助第三方类库。常用的如Gson、FastJson、Jackson。

编码：从Java变量到JSON格式的编码

//以FastJson为例

public void testJson() {
    JSONObject object = new JSONObject();
    //string
    object.put("string","string");
    //int
    object.put("int",2);
    //boolean
    object.put("boolean",true);
    //array
    List<Integer> integers = Arrays.asList(1,2,3);
    object.put("list",integers);
    //null
    object.put("null",null);
​
    System.out.println(object);
    //{"boolean":true,"string":"string","list":[1,2,3],"int":2}
}

解码：从 JSON 对象到 Java 变量的解码过程

public void testJson2() {
​
  JSONObject object = JSONObject
      .parseObject("{\"boolean\":true,\"string\":\"string\",\"list\":[1,2,3],\"int\":2}");
  //string
  String s = object.getString("string");
  System.out.println(s);
  //int
  int i = object.getIntValue("int");
  System.out.println(i);
  //boolean
  boolean b = object.getBooleanValue("boolean");
  System.out.println(b);
  //list
  List<Integer> integers = JSON.parseArray(object.getJSONArray("list").toJSONString(),Integer.class);
  integers.forEach(System.out::println);
  //null
  System.out.println(object.getString("null"));
​   
  //输出
  //string
  //2
  //true
  // 1
  // 2
  // 3
  // null
}

JSON对象与字符串的相互转化

//从字符串解析JSON对象
JSONObject obj = JSON.parseObject("{\"runoob\":\"菜鸟教程\"}");
//从字符串解析JSON数组
JSONArray arr = JSON.parseArray("[\"菜鸟教程\",\"RUNOOB\"]\n");
//将JSON对象转化为字符串
String objStr = JSON.toJSONString(obj);
//将JSON数组转化为字符串
String arrStr = JSON.toJSONString(arr);

参考

菜鸟：JSON教程

平凡的一天