文章の目录
对于 AJAX 应用程序,JSON 比 XML 更快更易用:
正文
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">