GipBaby270's Blog

Fighting for BAT!

0%

JSON简介

发表于 分类于
本文字数： 7.9k 阅读时长 ≈ 7 分钟

原文连接

JSON简介

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

SON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

与 XML 相同之处

  • JSON 是纯文本
  • JSON 具有”自我描述性”（人类可读）
  • JSON 具有层级结构（值中存在值）
  • JSON 可通过 JavaScript 进行解析
  • JSON 数据可使用 AJAX 进行传输

与 XML 不同之处

  • 没有结束标签
  • 更短
  • 读写的速度更快
  • 能够使用内建的 JavaScript eval() 方法进行解析
  • 使用数组
  • 不使用保留字

为什么使用 JSON？

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

使用 XML

  • 读取 XML 文档
  • 使用 XML DOM 来循环遍历文档
  • 读取值并存储在变量中

使用 JSON

  • 读取 JSON 字符串
  • 用 eval() 处理 JSON 字符串

JSON 语法

JSON 语法是 JavaScript 对象表示语法的子集。

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 大括号保存对象
  • 中括号保存数组

JSON 名称/值对

JSON 数据的书写格式是：名称/值对。

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

“name” : “菜鸟教程”

这很容易理解，等价于这条 JavaScript 语句：

name = “菜鸟教程”

JSON 值

JSON 值可以是：

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

JSON 数字

JSON 数字可以是整型或者浮点型：

{ "age":30 }

JSON 对象

JSON 对象在大括号（{}）中书写：

对象可以包含多个名称/值对：

{ "name":"菜鸟教程" , "url":"www.runoob.com" }

这一点也容易理解，与这条 JavaScript 语句等价：

name = “菜鸟教程” url = “www.runoob.com"

1
2
name = "菜鸟教程"
url = "www.runoob.com"

JSON 数组

JSON 数组在中括号中书写：

数组可包含多个对象：

1
2
3
4
5
6
7
{
"sites": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" }, 
{ "name":"google" , "url":"www.google.com" }, 
{ "name":"微博" , "url":"www.weibo.com" }
]
}

在上面的例子中，对象 “sites” 是包含三个对象的数组。每个对象代表一条关于某个网站（name、url）的记录。

JSON 布尔值

JSON 布尔值可以是 true 或者 false：

1
{ "flag":true }

JSON null

JSON 可以设置 null 值：

1
{ "runoob":null }

JSON 使用 JavaScript 语法

因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。

通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：

实例

1
2
3
4
5
var sites = [
    { "name":"runoob" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
];

可以像这样访问 JavaScript 对象数组中的第一项（索引从 0 开始）：

sites[0].name;

返回的内容是：

runoob

可以像这样修改数据：

sites[0].name="菜鸟教程";

JSON 文件

  • JSON 文件的文件类型是 “.json”
  • JSON 文本的 MIME 类型是 “application/json”

JSON vs XML

JSON 和 XML 都用于接收 web 服务端的数据。

JSON 和 XML在写法上有所不同，如下所示：

JSON 实例

1
2
3
4
5
6
7
{
    "sites": [
    { "name":"菜鸟教程" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}

XML 实例

1
2
3
4
5
6
7
8
9
10
11
<sites>
  <site>
    <name>菜鸟教程</name> <url>www.runoob.com</url>
  </site>
  <site>
    <name>google</name> <url>www.google.com</url>
  </site>
  <site>
    <name>微博</name> <url>www.weibo.com</url>
  </site>
</sites>

最大的不同

XML 需要使用 XML 解析器来解析，JSON 可以使用标准的 JavaScript 函数来解析。

为什么 JSON 比 XML 更好？

XML 比 JSON 更难解析。

JSON 可以直接使用现有的 JavaScript 对象解析。

针对 AJAX 应用，JSON 比 XML 数据加载更快，而且更简单：

使用 XML

  • 获取 XML 文档
  • 使用 XML DOM 迭代循环文档
  • 接数据解析出来复制给变量

使用 JSON

  • 获取 JSON 字符串
  • JSON.Parse 解析 JSON 字符串

JSON 对象

对象语法

1
{ "name":"runoob", "alexa":10000, "site":null }

JSON 对象使用在大括号({})中书写。

对象可以包含多个 key/value（键/值）对。

key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

key 和 value 中使用冒号(:)分割。

每个 key/value 对使用逗号(,)分割。

访问对象值

你可以使用点号（.）来访问对象的值：

1
2
3
var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;

你也可以使用中括号（[]）来访问对象的值：

1
2
3
var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj["name"];

循环对象

你可以使用 for-in 来循环对象的属性：

1
2
3
4
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "<br>";
}

使用 for-in 来循环对象的属性:

name
alexa
site

在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：

1
2
3
4
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}

在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：

runoob
10000
null

嵌套 JSON 对象

JSON 对象中可以包含另外一个 JSON 对象：

1
2
3
4
5
6
7
8
9
myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}

你可以使用点号(.)或者中括号([])来访问嵌套的 JSON 对象。

1
2
3
x = myObj.sites.site1;
// 或者
x = myObj.sites["site1"];

修改值

你可以使用点号(.)来修改 JSON 对象的值：

myObj.sites.site1 = "www.google.com";

myObj.sites["site1"] = "www.google.com";

删除对象属性

我们可以使用 delete 关键字来删除 JSON 对象的属性：

delete myObj.sites.site1;

delete myObj.sites["site1"]

JSON 数组

数组作为 JSON 对象

1
[ "Google", "Runoob", "Taobao" ]

JSON 数组在中括号中书写。

JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。

JSON 对象中的数组

对象属性的值可以是一个数组：

1
2
3
4
5
{
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
}

我们可以使用索引值来访问数组：

x = myObj.sites[0];

循环数组

你可以使用 for-in 来访问数组：

for (i in myObj.sites) { x += myObj.sites[i] + "<br>"; }

你也可以使用 for 循环：

for (i = 0; i < myObj.sites.length; i++) { x += myObj.sites[i] + "<br>"; }

嵌套 JSON 对象中的数组

JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象：

1
2
3
4
5
6
7
8
9
myObj = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

我们可以使用 for-in 来循环访问每个数组：

1
2
3
4
5
6
for (i in myObj.sites) {
    x += "<h1>" + myObj.sites[i].name + "</h1>";
    for (j in myObj.sites[i].info) {
        x += myObj.sites[i].info[j] + "<br>";
    }
}

修改数组值

你可以使用索引值来修改数组值：

myObj.sites[1] = "Github";

删除数组元素

delete myObj.sites[1];

JSON.parse()

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

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

1
JSON.parse(text[, reviver])

参数说明：

  • text:必需， 一个有效的 JSON 字符串。
  • reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

JSON 解析实例

例如我们从服务器接收了以下数据：

{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }

我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    
    $('#divCustomers').html(html); 
});
</script>
</body>
</html>

JSON.stringify()

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

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

1
JSON.stringify(value[, replacer[, space]])

参数说明：

  • value:

    必需， 要转换的 JavaScript 值（通常为对象或数组）。

  • replacer:

    可选。用于转换结果的函数或数组。

    如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：””。

    如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。

  • space:

    可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

坚持原创技术分享，您的支持将鼓励我继续分享！