JavaScript 笔记(3) -- JSON

JavaScript JSON (JavaScript Object Notation): 是一种轻量级的数据交换格式

JSON 是用于存储和传输数据的格式
JSON 通常用于服务端向网页传递数据
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本(文本可以被任何编程语言读取及作为数据格式传递)
JSON 格式化后为 JavaScript 对象：JSON 格式在语法上与创建 JavaScript 对象代码是相同的，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

通常，我们从服务器中读取 JSON 数据，并在网页中显示数据。可使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象，实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON 字符串转换为 JavaScript 对象</title>
</head>
<body>

<h2>为 JSON 字符串创建对象</h2>
<p ></p>
<script>
    var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    
    obj = JSON.parse(text);
    document.getElementById("demo").innerHTML =  obj.sites[1].name + " " + obj.sites[1].url;
</script>

</body>
</html>

相关函数

函数	描述
JSON.parse(text[, reviver])	用于将一个 JSON 字符串转换为 JavaScript 对象。 text: 必需，一个有效的 JSON 字符串。 reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。
JSON.stringify(value[, replacer[, space]])	用于将 JavaScript 值转换为 JSON 字符串。

函数

描述

JSON.parse(text[, reviver])

用于将一个 JSON 字符串转换为 JavaScript 对象。

text: 必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

JSON.stringify(value[, replacer[, space]])

用于将 JavaScript 值转换为 JSON 字符串。

JSON 对象

语法：

JSON 对象使用在大括号({})中书写。
对象可以包含多个 key/value（键/值）对。
key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。

访问对象：

(1) 可以使用点号（.）来访问对象的值：

var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;

（2）也可以使用中括号（[]）来访问对象的值：

var myObj, x;
myObj = myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj["name"];    // 返回 runoob

（3）可以使用 for-in 来循环对象的属性时，使用中括号（[]）来访问属性的值：

var myObj = { "name":"runoob", "alexa":10000, "site":null };

for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}

（4）嵌套 JSON 对象，可使用点号(.) 或者中括号([]) 来访问嵌套的 JSON 对象,eg：

myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}

// 访问
x = myObj.sites.site1;   
// 或者
x = myObj.sites["site1"];

（5）JSON 数组：数组作为 JSON 对象，可用索引值或 for-in 来访问数组，实例：

var myObj = {
　　"name":"网站",
　　"num":3,
　　"sites":[ "Google", "Runoob", "Taobao" ]
}

// 索引值访问 
var  x = myobj.sites[0];
for (var i = 0; i < myObj.sites.length; i++) { 
　　x += myObj.sites[i] + "<br>"; 
}
// 或者 for-in 来访问
for (var i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

JSON 与服务器

从服务器端接收 JSON 数据，可以使用 AJAX 从服务器请求 JSON 数据，如下：

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON 数据访问</title>
</head>
<body>

<h2>使用 XMLHttpRequest 来获取文件内容</h2>
<p>文件内容是标准的 JSON 格式，可以使用 JSON.parse 方法将其转换为 JavaScript 对象。</p>

<p id="demo"></p>

<script>

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

</script>

<p>查看 JSON 文件数据 <a href="/try/ajax/json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>
</html>


注：json_demo.txt 文件内容如下：
{
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

实例代码全部

实例代码全部