js教程（8）-- JSON

2019.9.26:

学习内容：JSON：语法、对象、与XML对比、与JS对象之间的转换

---

　　

　　JSON 的常规用途是从 web 服务器读取数据，然后在网页中显示这些数据。

一、简介：

　　JSON ：1、存储和传输数据的格式。2、和服务器以及网页交流的数据载体。3、轻量级的数据交换格式。4、纯文本，任何语言可编写。

　JSON 语法规则

• 数据是名称/值对  （键、值必须用双引号括着）
• 数据由逗号分隔
• 花括号保存对象    （一个花括号就是一个对象）
• 方括号保存数组

　把 JSON 文本转换为 JavaScript 对象

　  使用 JavaScript 的内建函数 JSON.parse() 来把这个字符串转换为 JavaScript 对象

二、JSON语法：

　　除了上述所说，还有：

在 JSON 中，值必须是以下数据类型之一：

• 字符串
• 数字
• 对象（JSON 对象）
• 数组
• 布尔
• null

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

• 函数
• 日期
• undefined

JSON 文件

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

访问对象：

　　访问JSON对象可以用点号也可以用方括号：（还能够通过使用点号和括号访问嵌套的 JSON 对象：）

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

x = myObj["name"];

遍历对象：

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

修改对象属性的值：

　　方括号和点号都可以：

myObj.cars.car3 = "Mercedes Benz";

删除对象属性：

delete myObj.cars.car1;

三、JSON vs XML：

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 字符串

四、JSON和JS对象转换：

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

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

　　

1、JSON转成JS对象：

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

<script>
var text = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"Steve","lastName":"Jobs" },' +
'{"firstName":"Elon","lastName":"Musk" }]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

　　您能够通过使用 AJAX 请求从服务器请求 JSON。只要服务器的响应是用 JSON 格式编写的，你可以将字符串解析成 JavaScript 对象。

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

[
"porsche",
"BMW",
"Volvo",
"Audi"
]

　　对日期的转换：日期只能以字符串形式写在JSON，可以将其转换回日期对象，这步操作可以在JSON.parse 的第二个参数reviver引用这个转换函数：

// 转换成日期对象的操作：
var text =  '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);


// reviver使用函数：
var text =  '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
    if  (key == "birth") {
        return new Date(value);
    } else {
         return value;
   }});
 
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

　　对函数的转换：只能写成字符串在JSON，可以将其转换成函数：（应该避免在 JSON 中使用函数，函数会丢失它们的作用域，而且您还需要使用 eval() 把它们转换回函数。）

var text =  '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");   // （括号是它的作用域）
 
document.getElementById("demo").innerHTML = obj.name + ", " +  obj.age();

2、JS对象转成JSON字符串：

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

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

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

　　结果将是遵守 JSON 标记法的一段字符串。 myJSON 目前是一段字符串，并准备好送往服务器：

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

　　注意：JSON.stringify() 将会把函数对象从中删掉，包括键和值，办法就是提前对这个函数转换成字符串：

var obj =  { "name":"Bill Gates", "age":function () {return 62;}, "city":"Seattle"};
obj.age = obj.age.toString();
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

// 结果： {"name":"Bill Gates","age":"function () {return 62;}","city":"Seattle"}

　　# 还是应该避免JSON里有函数

3、作为JSON对象的数组：

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

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

　　数组可以是对象属性的值，通过索引号获取、修改和删除，for-in循环访问：（数组甚至能嵌套JSON对象）

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

x = myObj.cars[0];

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

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

五、JSON转译成HTML：

　　几种不同的展示效果：https://www.w3school.com.cn/js/js_json_html.asp

六、JSONP：（JSON with Padding）

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

　　JSONP 不使用 XMLHttpRequest 对象。

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

　　从另一个域请求文件会引起问题，由于跨域政策。从另一个域请求外部脚本没有这个问题。

　　JSONP 利用了这个优势，并使用 script 标签替代 XMLHttpRequest 对象：<script src="demo_jsonp.php">

　　创建动态脚本标签：

　　上例会在页面加载时执行 "myFunc" 函数，根据您放置脚本标签的位置，这样不很令人满意。Script 只应该在需要时创建：

// 在按钮被点击时创建和插入 <script> 标签：

function clickButton() {
    var s = document.createElement("script");
    s.src = "demo_jsonp.php";
    document.body.appendChild(s);
}

　　回调函数：

　　如果您无法控制服务器文件，那么如何使服务器文件调用正确的函数呢？

　　有时服务器文件提供回调函数作为参数：

// PHP 文件会调用您作为回调参数传递的函数：

function clickButton() {
    var s = document.createElement("script");
    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
    document.body.appendChild(s);
}