JSON的学习与复习（含JSONP简介）

一、JSON简介

JSON: JavaScript Object Notation（JavaScript 对象标记法）。
JSON 是一种存储和交换数据的语法。
JSON 是通过 JavaScript 对象标记法书写的文本。

什么是 JSON？
JSON 指的是 JavaScript 对象标记法（JavaScript Object Notation）
JSON 是一种轻量级的数据交换格式
JSON 具有自我描述性且易于理解
JSON 独立于语言——JSON 使用 JavaScript 语法，但是 JSON 格式是纯文本的。文本可被任何编程语言作为数据来读取和使用。

为什么使用 JSON？
因为 JSON 格式仅仅是文本，它能够轻松地在服务器浏览器之间传输，并用作任何编程语言的数据格式。
JavaScript 提供內建函数把以 JSON 格式写的字符串转换为原生 JavaScript 对象：

JSON.parse()

因此，如果您以 JSON 格式从服务器接收数据，那么您可以像任何其他 JavaScript 对象那样使用它。

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

JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。

我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。

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

2.发送数据
如果数据存储在 JavaScript 对象中，您以把该对象转换为 JSON，然后将其发送到服务器。

var myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
var myJSON =  JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

3.接收数据
如果以 JSON 格式接收到数据，可以将其转换为 JavaScript 对象。

var myJSON = '{ "name":"Bill Gates",  "age":62, "city":"Seattle" }';
var myObj =  JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

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

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

二、JSON语法

JSON 语法是 JavaScript 语法的子集。

1.JSON 数据- 名称和值

JSON 数据写为 名称/值 对。

名称/值由字段名称构成，后跟冒号和值。

"name":"Bill Gates"

JSON 名称需要双引号。而 JavaScript 名称不需要。
JSON – 求值为 JavaScript 对象
在 JSON 中，键必须是字符串，由双引号包围。

2.JSON 值

在 JSON 中，值必须是以下数据类型之一：
●字符串
●数字
●对象（JSON 对象）
●数组
●布尔
●null

在 JavaScript 中，以上所列均可为值，外加其他有效的 JavaScript 表达式，包括：
●函数
●日期
●undefined

在 JSON 中，字符串值必须由双引号编写。

3.JSON 使用 JavaScript 语法

因为 JSON 语法由 JavaScript 对象标记法衍生而来，所以很少需要其他额外的软件来处理 JavaScript 中的 JSON。

4.JavaScript 数组用作 JSON

与将 JavaScript 对象用作 JSON 相同，JavaScript 数组也可以用作 JSON。

5.JSON 文件

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

三、JSON数据类型

有效的数据类型
在 JSON 中，值必须是以下数据类型之一：
●字符串
JSON 中的字符串必须用双引号包围。
{ "name":"John" }

●数字
JSON 中的数字必须是整数或浮点数。
{ "age":30 }

●对象（JSON 对象）
JSON 中的值可以是对象。（后续讲述）

{
"employee":{ "name":"Bill Gates", "age":62, "city":"Seattle" }
}

●数组
JSON 中的值可以是数组。（后续讲述）

{
"employees":[ "Bill", "Steve", "David" ]
}

●布尔
JSON 中的值可以是 true/false。
{ "sale":true }

●Null
JSON 中的值可以是 null。
{ "middlename":null }

JSON 的值不可以是以下数据类型之一：
●函数
●日期
●undefined

四、JSON解析和字符串化

1.JSON.parse()——解析

JSON 的常规用途是同 web 服务器进行数据传输。
在从 web 服务器接收数据时，数据永远是字符串。
通过 JSON.parse() 解析数据，这些数据会成为 JavaScript 对象。

语法：JSON.parse(text[, reviver])
text:必需， 一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

例子：

var text =  '{ "name":"Bill Gates", "age":62, "city":"Seattle"}'
var obj = JSON.parse(text);

来自服务器的 JSON
可以通过使用 AJAX 请求从服务器请求 JSON。
只要服务器的响应是用 JSON 格式编写的，可以将字符串解析成 JavaScript 对象。
点击此处，查看例子

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

myArr =  JSON.parse(this.responseText);
document.getElementById("demo").innerHTML  = myArr[0];4

点击此处，查看例子

解析日期
JSON 中不允许日期对象。
如果要包含日期，请写为字符串。
之后可以将其转换回日期对象：

var text =  '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
//输出 Fri Oct 28 1955 08:00:00 GMT+0800 (中国标准时间)

也可以用 JSON.parse 的第二个参数 reviver，一个转换结果的函数，对象的每个成员调用此函数。

var text =  '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
    if  (key == "birth") {   //key键    birth是键名之一
        return new Date(value);    //value键值
    } else {
         return value;
   }});
 
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

解析函数
JSON 中不允许函数，函数会丢失它们的作用域，而且还需要使用 eval() 把它们转换回函数。
如果要包含函数，请把它写作字符串。

var text =  '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

2.JSON.stringify()——字符串化

JSON 的常规用途是同 web 服务器进行数据交换。
在向 web 服务器发送数据时，数据必须是字符串。
通过 JSON.stringify() 把 JavaScript 对象转换为遵守JSON标记法的一串字符串。

var obj = { name:"Bill Gates", age:62, city:"Seattle"};
var myJSON = JSON.stringify(obj);

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

var arr = [ "Bill Gates", "Steve Jobs", "Elon Musk" ];
var myJSON =  JSON.stringify(arr);

日期字符串化
在 JSON 中，不允许日期对象。JSON.stringify() 函数将把任何日期转换为字符串。

var obj =  { "name":"Bill Gates", "today":new Date(), "city":"Seattle"};
var myJSON = JSON.stringify(obj);

可以在接收端把字符串转换回日期对象。
点击此处，查看例子

函数字符串化
在 JSON 中，不允许函数作为对象值。函数会失去其作用域，而且还需要使用 eval() 将它们转换回函数。
JSON.stringify() 函数将从 JavaScript 对象删除任何函数，包括键和值。
点击此处，查看例子

在运行 JSON.stringify() 函数前已将函数转换为字符串（toString()），那就不会删除它。

五、JSON对象

1.对象语法

JSON 对象被花括号 {} 包围。JSON 对象以键/值对书写。
键必须是字符串，值必须是有效的 JSON 数据类型（字符串、数字、对象、数组、布尔或 null）。
键和值由冒号分隔。每个键/值对由逗号分隔。

{ "name":"Bill Gates", "age":62, "car":null }

2.访问对象值

可以通过使用点号（.）和方括号（[]）来访问对象值：

myObj =  { "name":"Bill Gates", "age":62, "car":null };
x = myObj.name;
y = myObj["name"];

3.遍历对象

可以使用 for-in 遍历对象属性，在 for-in 循环中，使用括号标记法来访问属性值：

myObj =  { "name":"Bill Gates", "age":62, "car":null };
for (x in myObj) {
   document.getElementById("demo").innerHTML  += x;
   document.getElementById("demo").innerHTML  += myObj[x];
}

4.嵌套的 JSON 对象

一个 JSON 对象中的值可以是另一个 JSON 对象。
可以使用点号和括号访问嵌套的 JSON 对象。

myObj =  {
   "name":"Bill Gates",
   "age":62,
   "cars": {
	  "car1":"Porsche",
	  "car2":"BMW",
	  "car3":"Volvo"
   }
}
x = myObj.cars.car2;
y = myObj.cars["car2"];

5.修改值

使用点号或者括号来修改 JSON 对象中的任何值：

myObj.cars.car3 = "Mercedes Benz";
myObj.cars["car3"] = "Mercedes Benz";

6.删除对象属性

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

delete myObj.cars.car1;

六、JSON数组

1.作为 JSON 对象的数组

[  "Porsche", "BMW", "Volvo" ]

JSON 中的数组几乎与 JavaScript 中的数组相同。
在 JSON 中，数组值的类型必须属于字符串、数字、对象、数组、布尔或 null。

2.JSON 对象中的数组

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

{
"name":"Bill Gates",
"age":62,
"cars":[ "Porsche", "BMW", "Volvo" ]
}

3.访问数组值

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

x = myObj.cars[0];

4.遍历数组

可以使用for或者 for-in 循环来访问数组值：

for (i  = 0; i < myObj.cars.length; i++) {
    x  += myObj.cars[i];
}

for (i in myObj.cars) {
     x  += myObj.cars[i];
}

5.JSON 对象中的嵌套数组

数组中的值也可以另一个数组，或者甚至另一个 JSON 对象：

myObj =  {
   "name":"Bill Gates",
   "age":62,
   "cars": [
	  { "name":"Porsche",  "models":[ "911", "Taycan" ] },
	  { "name":"BMW", "models":[ "M5", "M3", "X5" ] },
	  { "name":"Volvo", "models":[ "XC60", "V60" ] }
   ]
}

访问数组内部的数组，使用 for-in 循环：

for (i in myObj.cars) {
    x += "<h1>" + myObj.cars[i].name  + "</h1>";
    for (j in myObj.cars[i].models) {
         x += myObj.cars[i].models[j];
    }
}

6.修改数组值

使用索引号来修改数组：

myObj.cars[1] = "Mercedes Benz";

7.删除数组项目

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

delete myObj.cars[1];

七、JSONP简介

JSONP 指的是 JSON with Padding。
JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。
JSONP 不使用 XMLHttpRequest 对象。
JSONP 使用 <script> 标签取而代之。
从另一个域请求文件会引起问题，由于跨域政策。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。
同源策略，它是由 Netscape提出的一个著名的安全策略，现在所有支持
JavaScript 的浏览器都会使用这个策略。

从另一个域请求外部脚本没有这个问题。
JSONP 利用了这个优势，并使用 script 标签替代 XMLHttpRequest 对象。

<script src="demo_jsonp.php">