JSON（JavaScript 对象标记法）

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

1.简介

1.1交换数据

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

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

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

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

1.2发送数据

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

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

1.3接收数据

如果以 JSON 格式接收到数据，能够将其转换为 JavaScript 对象：

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

1.4存储数据

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

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

//存储数据：
myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
myJSON =  JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

//接收数据：
text = localStorage.getItem("testJSON");
obj =  JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

2.JSON.parse() 

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

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

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

2.1 解析JSON

从web服务器接收到文本

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

使用 JavaScript 函数 JSON.parse() 把文本转换为 JavaScript 对象，并在页面中使用

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

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

<script>
 document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; 
</script>

2.2来自服务器的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", "json_demo.txt", true);
xmlhttp.send();

2.3作为JSON的数组

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

//从服务器返回的JSON是数组
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myArr =  JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML  = myArr[0];
    }
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();