JSON

JSON是一种轻量级的数据交换格式,常用于浏览器与服务器间交换数据。它基于JavaScript语法,但不包含函数和某些特殊类型。JSON数据以名称/值对的形式表示,可被JavaScript轻松解析为对象。在AJAX应用中,JSON比XML更快速、易用,常用作服务器返回的数据格式。
摘要由CSDN通过智能技术生成

文章の目录

JSON 简介

交换数据

存储数据

什么是 JSON ?

为什么使用 JSON ?

JSON 语法

JSON 语法规则

JSON 结构

JSON 数据 - 名称/值对

JSON - 评估为 JavaScript 对象

JSON 文件

补充

JSON 数据类型

有效的数据类型

JSON 字符串

JSON 数字

JSON 对象

JSON 数组

JSON 布尔

JSON null

JSON.parse()

语法

解析 JSON 字符串

作为 JSON 的数组

例外

解析日期

解析函数

JSON.stringify()

语法

对 JavaScript 对象进行字符串化

Stringify JavaScript 数组

例外

日期字符串化

函数字符串化

JSON 对象

对象语法

实例

访问对象值

遍历对象

修改值

删除对象属性

嵌套的 JSON 对象

JSON 数组

数组语法

作为 JSON 对象的数组

访问数组值

遍历数组

修改数组值

删除数组项目

JSON 对象中的数组

JSON 对象中的嵌套数组

JSON 用例

来自服务器的 JSON

JSON 写入 HTML

JSON vs XML

实例

JSON 实例

XML 实例

JSON 类似 XML,因为:

JSON 与 XML 的差异在于:

最大的不同在于:

为什么 JSON 比 XML 更好?

对于 AJAX 应用程序,JSON 比 XML 更快更易用:

JSONP

JSONP 简介


正文

JSON 简介

JSON:JavaScript Object Notation(JavaScript 对象标记法)。

JSON 是一种存储和交换数据的语法。

JSON 是通过 JavaScript 对象标记法书写的文本。

交换数据

当数据在浏览器与服务器之间进行交换时,这些数据只能是文本。

JSON 属于文本,并且我们能够把任何 JavaScript 对象转换为 JSON,然后将 JSON 发送到服务器(如果数据存储在 JavaScript 对象中,可以把该对象转换为 JSON,然后将其发送到服务器)。

我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象(如果以 JSON 格式接收到数据,能够将其转换为 JavaScript 对象)。

以这样的方式,我们能够把数据作为 JavaScript 对象来处理,无需复杂的解析和转译。

存储数据

在存储数据时,数据必须是某种具体的格式,并且无论选择在何处存储它,文本永远是合法格式之一。

JSON 让 JavaScript 对象存储为文本成为可能。

什么是 JSON ?

  • JSON 指的是 JavaScript 对象标记法(JavaScript Object Notation)
  • JSON 是一种轻量级的数据交换格式
  • JSON 具有自我描述性且易于理解
  • JSON 独立于语言

注:

  • JSON 使用 JavaScript 语法,但是 JSON 格式是纯文本的。
  • 文本可被任何编程语言作为数据来读取和使用
  • JSON 格式最初由 Douglas Crockford 提出

为什么使用 JSON ?

因为 JSON 格式仅仅是文本,它能够轻松地在服务器浏览器之间传输,并用作任何编程语言的数据格式。

JavaScript 提供内建函数把以 JSON 格式写的字符串转换为原生 JavaScript 对象。因此,如果以 JSON 格式从服务器接收数据,可以像任何其他 JavaScript 对象那样使用它。

JSON 语法

JSON 语法规则

JSON 语法基本上被视为 JavaScript 语法的子集,它包含以下内容:

  • 数据以名称/值对的形式表示(name:value)
  • 数据用逗号分隔
  • 花括号容纳对象
  • 方括号容纳数组

JSON 结构

JSON 建立在两种结构上:

  • 名称/值对的集合(对象)
  • 值的有序列表(数组)

JSON 数据 - 名称/值对

JSON 数据以名称/值对的形式表示。

名称/值对由一个字段名(双引号引用),一个冒号,一个值组成:

"name":"zhangsan"

JSON 名称需要双引号。JavaScript 名称没有。

JSON - 评估为 JavaScript 对象

JSON 格式几乎与 JavaScript 对象相同。

在 JSON 中,名称必须是字符串,并且需要用双引号引起来:

{ "name":"zhangsan" }

在 JavaScript 中,名称可以是字符串,数字或标识符名称:

{ name:"zhangsan" }

在 JSON 中,字符串值必须用双引号引起来:

{ "name":"zhangsan" }

在 JavaScript 中,可以编写带双引号或单引号的字符串值:

{ name:'zhangsan' }

JSON 文件

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

补充

  • 使用 JSON 时,可能会在 .json 文件中看到 JSON 对象,但它们也可以作为 JSON 对象或字符串存在于程序上下文中。

JSON 数据类型

有效的数据类型

在 JSON 中,值必须是以下数据类型之一:

  • 字符串
  • 数字
  • 对象(JSON 对象)
  • 数组
  • 布尔
  • Null

JSON 的值不可以是以下数据类型之一:

  • 函数
  • 日期
  • undefined

JSON 字符串

JSON 中的字符串必须用双引号包围。

实例:

{ "name":"zhangsan" }

JSON 数字

JSON 中的数字必须是整数或浮点数。

实例:

{ "age":18 }

JSON 对象

JSON 中的值可以是对象。

实例:

{
"employee":{ "name":"zhangsan","age":18 }
}

注:

JSON 中作为值的对象必须遵守与 JSON 对象相同的规则。

JSON 数组

JSON 中的值可以是数组。

实例:

{
"employee":[ "zhangsan","lisi" ]
}

JSON 布尔

JSON 中的值可以是 true/false。

实例:

{ "sale":true }

JSON null

JSON 中的值可以是 null。

实例:

{ "middlename":null }

JSON.parse()

JSON 的常规用途是同 web 服务器进行数据传输。

在从 web 服务器接收数据时,数据永远是字符串。

通过 JSON.parse() 解析数据,这些数据会成为 JavaScript 对象。

语法

JSON.parse(text, reviver)

// 第一个参数指定要解析为 JSON 的字符串
// 可选的第二个参数指定一个在返回值之前检查每个属性的函数。

解析 JSON 字符串

假设我们从 web 服务器接收到这段文本:

'{ "name":"zhangsan","age":18 }'

使用 JavaScript 函数 JSON.parse() 把文本转换为 JavaScript 对象:

var obj = JSON.parse('{ "name":"zhangsan","age":18 }');

注:

  • 请确保接收到的文本以 JSON 格式书写,否则会出现语法错误。

作为 JSON 的数组

在对衍生自数组的 JSON 使用 JSON.parse() 后,此方法将返回 JavaScript 数组,而不是 JavaScript 对象。

实例:

var arr = JSON.parse('["zhangsan","lisi"]');

例外

解析日期

JSON 中不允许日期对象。

如果需要包含日期,请写为字符串。

之后可以将字符串转换回日期对象(可以使用 new Date() 把字符串转换回日期对象)。

解析函数

JSON 中不允许函数。

如果需要包含函数,请把它写作字符串。

之后可以把它转换回函数(可以使用 eval() 把字符串转换回函数)。

注:

  • 应该避免在 JSON 中使用函数,函数会丢失它们的作用域

JSON.stringify()

JSON 的常规用途是同 web 服务器进行数据传输。

在向 web 服务器发送数据时,数据必须是字符串。

通过 JSON.stringify() 把 JavaScript 对象转换为字符串

语法

JSON.stringify(value, replacer)

// 第一个参数指定要转换为 JSON 字符串的值
// 可选的第二个参数指定一个函数,该函数可更改字符串化过程的行为

对 JavaScript 对象进行字符串化

假设我们在 JavaScript 中有如下一个对象:

var obj = {name:"zhangsan",age:18};

使用 JavaScript 函数 JSON.stringify() 将它转换为字符串:

var myJSON = JSON.stringify(obj);

注:

  • 结果是遵守 JSON 标记法的一段字符串。

Stringify JavaScript 数组

也可以对 JavaScript 数组进行字符串化。

假设我们在 JavaScript 中有如下这个数组:

var arr = ["zhangsan","lisi"];

使用 JavaScript 函数 JSON.stringify() 将其转换为字符串:

var myJSON = JSON.stringify(arr);

注:

  • 结果是遵守 JSON 标记法的字符串。

例外

日期字符串化

在 JSON 中,不允许日期对象。

JSON.stringify() 函数将把任何日期转换为字符串。

注:

  • 可以在接收端把字符串转换回日期对象。

函数字符串化

在 JSON 中,不允许函数作为对象值。

JSON.stringify() 函数将从 JavaScript 对象删除任何函数,包括键和值。

注:

  • 如果在运行 JSON.stringify() 函数前将函数转换为字符串,则不会被删除。
  • 应该避免在 JSON 中使用函数,函数会失去其作用域,而且还需要使用 eval() 将它们转换回函数。

JSON 对象

对象语法

JSON 对象被花括号 { } 包围。

JSON 对象以键/值对书写。

键必须是字符串,值必须是有效的 JSON 数据类型(字符串、数字、对象、数组、布尔或 null)。

键和值由冒号分隔。

每个键/值对由逗号分隔。

注:

  • JSON 对象可以使用 JavaScript 创建。
  • 之后的所有 JSON 实例都可以使用 JavaScript 创建。

实例

{"name":"zhangsan","age":18}

访问对象值

可以通过使用点号( . )来访问对象值

也可以使用方括号( [ ] )来访问对象值

实例:

myObj = {"name":"zhangsan","age":18};
x = myObj.name;
// 或
// x = myObj["name"];

遍历对象

可以通过使用 for-in 遍历对象属性:

myObj = {"name":"zhangsan","age":18};

for(x in myObj) {
    // x
    // myObj[x]
}

// 在 for-in 循环中,使用括号标记法来访问属性值

修改值

可以使用点号来修改 JSON 对象中的任何值。

也可以使用括号来修改 JSON 对象中的值。

实例:

myObj = {"name":"zhangsan","age":18};

myObj.name = "lisi";
// 或
// myObj["name"] = "lisi"

删除对象属性

使用 delete 关键词来删除 JSON 对象的属性。

实例:

myObj = {"name":"zhangsan","age":18};

delete myObj.age;

嵌套的 JSON 对象

一个 JSON 对象中的值可以是另一个 JSON 对象。

实例:

myObj = {
    "name":"zhangsan",
    "age":18,
    "cars": {
        "car1":"Porsche",
        "car2":"BMW"
    }
}

// 可以通过使用点号和括号访问嵌套的 JSON 对象:
// myObj.cars.car1
// myObj["cars"]["car1"]

JSON 数组

数组语法

作为 JSON 对象的数组

JSON 中的数组几乎与 JavaScript 中的数组相同。

JSON 数组表示值的有序列表。

在 JSON 中,数组值的类型必须属于字符串、数字、对象、数组、布尔或 null。

在 JavaScript 中,数组值可以是以上所有类型,外加任何其他有效的 JavaScript 表达式,包括函数、日期和 undefined。

实例:

[ "zhangsan","lisi" ]

访问数组值

可以通过使用索引号来访问数组值。

实例:

myArr = ["zhangsan","lisi"];

x = myArr[0];

遍历数组

可以通过使用 for-in 循环来访问数组值。

实例:

myArr = ["zhangsan","lisi"];

for(i in myArr) {
    // myArr[x]
}

还可以使用 for 循环

myArr = ["zhangsan","lisi"];

for(i = 0; i < myArr.length; i++) {
    // myArr[i]
}

修改数组值

请使用索引号来修改数组。

实例:

myArr = ["zhangsan","lisi"];

myArr[0] = "zhangsanfeng";

删除数组项目

请使用 delete 关键词来删除数组中的项目。

实例:

myArr = ["zhangsan","lisi"];

delete myArr[0];

JSON 对象中的数组

数组可以是对象属性的值:

{
    "name":"zhangsan",
    "cars":["Porsche","BMW"]
}

JSON 对象中的嵌套数组

数组中的值也可以是另一个数组,或者是另一个 JSON 对象。

实例:

{
    "name":"zhangsan",
    "cars":[
        {"name":"Porsche","models":["911","Taycan"]},
        {"name":"BMW","models":["M5","M3","X5"]}
    ]
}

// 如需访问数组内部的数组,请对每个数组使用 for-in 循环

JSON 用例

JSON 的一个常见用途是与 web 服务器交换数据。

来自服务器的 JSON

可以使用 AJAX 请求 从服务器请求 JSON。

只要来自服务器的响应以 JSON 格式编写,就可以将字符串解析为 JavaScript 对象。

实例:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200){
        myObj = JSON.parse(this.responseText);
    }
};
xmlhttp.open("GET","json_demo.txt",true);
xmlhttp.send();

JSON 写入 HTML

JSON 非常易于转译为 JavaScript。

JavaScript 可用于在网页中生成 HTML。

JSON vs XML

JSON 和 XML 均可用于从 web 服务器接收数据。

实例

下面的 JSON 和 XML 实例都定义了雇员对象,包含了由 3 个雇员构成的数组。

JSON 实例

{"employees":[
    {"firstName":"Bill","lastName":"Gates"},
    {"firstName":"Steve","lastName":"Jobs"},
    {"firstName":"Elon","lastName":"Musk"}
]}

XML 实例

<employees>
    <employee>
        <firstName>Bill</firstName>
        <lastName>Gates</lastName>
    </employee>
    <employee>
        <firstName>Steve</firstName>
        <lastName>Jobs</lastName>
    </employee>
    <employee>
        <firstName>Elon</firstName>
        <lastName>Musk</lastName>
    </employee>
</employees>

JSON 类似 XML,因为:

  • JSON 和 XML 都是”自描述的“(人类可读的)
  • JSON 和 XML 都是分级的(值中有值)
  • JSON 和 XML 都能被大量编程语言解析和使用
  • JSON 和 XML 都能被 XMLHttpRequest 读取

JSON 与 XML 的差异在于:

  • JSON 不适用标签
  • JSON 更短
  • JSON 的读写速度更快
  • JSON 可使用数组

最大的不同在于:

  • XML 必须使用 XML 解析器进行解析;而 JSON 可通过标准的 JavaScript 函数进行解析。

为什么 JSON 比 XML 更好?

  • XML 比 JSON 更难解析
  • JSON 被解析为可供使用的 JavaScript 对象

对于 AJAX 应用程序,JSON 比 XML 更快更易用:

使用 XML:

  • 读取 XML 文档
  • 使用 XML DOM 遍历文档
  • 提取变量中存储的值

使用 JSON:

  • 读取 JSON 字符串
  • JSON.parse JSON 字符串

JSONP

JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。

JSONP 不使用 XMLHttpRequest 对象。

JSONP 使用 <script> 标签取而代之。

JSONP 简介

JSONP 指的是 JSON with Padding。

从另一个域请求文件会引起问题,由于跨域政策。

从另一个域请求外部脚本没有这个问题。

JSONP 利用了这个优势,并使用 script 标签替代 XMLHttpRequest 对象。

<script src="demo_jsonp.php">

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值