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 id="demo"></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":[ "淘宝", "网购" ] }
    ]
}

实例代码全部

实例代码全部

从服务器接收数组的 JSON 数据：如果从服务端接收的是数组的 JSON 数据，则 JSON.parse 会将其转换为 JavaScript 数组：

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>内容是数组</h2>
<p>内容是数组会转换为 JavaScript 数组。</p>

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

<script>

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

</script>

<p>查看服务端数据 <a href="json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>

</body>
</html>

注： json_demo_array.txt 文件内容如下：
[ "Google", "Runoob", "Taobao" ]

实例代码 全部

实例代码全部

JSON.parse() 和 JSON.stringfy()

JSON 不能存储 Date 对象，若需存储 Date 对象，需要将其转换为字符串，之后在转换为 Date 对象。

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);  // 时间字符串 转为 Date 对象
 
document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;

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

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) { 
   // 该 function 用于将initDate值 从 String 类型转为 Date 对象
    if (key == "initDate") {
        return new Date(value);
    } else {
        return value;
}});
 
document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

JSON 不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数。实例：

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");   // 转换为函数
 
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

不建议在 JSON 中使用函数。

JSON.stringfy()：在向服务器发送数据时一般是字符串。我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。语法：

JSON.stringify(value[, replacer[, space]])
参数说明：
value: 必需， 一个有效的 JSON 字符串。
replacer: 可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
space: 可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 有可以使用非数字，如：	。

我们可以将字符串/数组发送到服务器：

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
// or: = [ "Google", "Runoob", "Taobao", "Facebook"]
var myJSON = JSON.stringify(obj);  // 使用 JSON.stringfy() 方法处理以上数据，将其转换为字符串
document.getElementById("demo").innerHTML = myJSON;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h2>将 JavaScript 对象转换Wie JSON 字符串</h2>
    <p id="demo"></p>
<script>
    var obj = { "name":"runoob", "alexa":10000,     "site":"www.runoob.com"};
    var myJSON = JSON.stringify(obj);
    document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

将 myJSON 发送到服务器

JSON.stringfy() 会将所有日期转换为字符串，如下：

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。因此，我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免该问题的发生：

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
 
document.getElementById("demo").innerHTML = myJSON;

JSON 使用（eval（））：JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误，如下：

var obj = eval ("(" + txt + ")");

在网页中使用 JavaScript 对象,实例：

var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';
 
var obj = eval ("(" + txt + ")");
 
document.getElementById("name").innerHTML=obj.sites[0].name; // 返回： 菜鸟教程
document.getElementById("url").innerHTML=obj.sites[0].url;  //返回： www.runoob.com

JSON 解析器：
- eval() 函数可编译并执行任何 JavaScript 代码，这隐藏了一个潜在的安全问题。
- 使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。
- JSON 解析器只能识别 JSON 文本，而不会编译脚本。
- 在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。
- 较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。
  Web 浏览器支持 Web 软件支持
  
  Firefox (Mozilla) 3.5
  
  Internet Explorer 8
  
  Chrome
  
  Opera 10
  
  Safari 4
  
  jQuery
  
  Yahoo UI
  
  Prototype
  
  Dojo
  
  ECMAScript 1.5

Web 浏览器支持	Web 软件支持
Firefox (Mozilla) 3.5 Internet Explorer 8 Chrome Opera 10 Safari 4	jQuery Yahoo UI Prototype Dojo ECMAScript 1.5

JSONP: (JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略

该节就记录到这里啦~