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);
}

一、简介：

JSON 语法规则

把 JSON 文本转换为 JavaScript 对象

二、JSON语法：

JSON 文件

访问对象：

遍历对象：

修改对象属性的值：

删除对象属性：

三、JSON vs XML：

JSON 类似 XML，因为:

JSON 与 XML 的差异在于：

为什么 JSON 比 XML 更好？

四、JSON和JS对象转换：

1、JSON转成JS对象：

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

五、JSON转译成HTML：

六、JSONP：（JSON with Padding）

创建动态脚本标签：

回调函数：

猜你喜欢

　JSON 语法规则

　把 JSON 文本转换为 JavaScript 对象

　　创建动态脚本标签：

　　回调函数：