​​<----------个人网站传送门----------->​​

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

 

  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
  • JSON 具有自我描述性，更易理解

JSON 语法是 JavaScript 语法的子集。

关于JSON对象和数组，用法如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Json</title>
</head>
<body>
<p id="exp1"></p>
<p id="exp2"></p>
<table>
    <tr>
        <td id="exp3"></td>
        <td id="exp4"></td>
</tr>
</table>
<p id="exp5"></p>
<p id="exp6"></p>
<p id="exp7"></p>
<p id="exp8"></p>
<script>
    //访问对象值(.和[]的使用)
var myObj1 = { "name":"张三", "sex":"男", "age":20 };
var x = myObj1.name;    
var y = myObj1["name"];
document.getElementById("exp1").innerHTML = x;
document.getElementById("exp2").innerHTML = y;
    //循环对象(for-in循环)
for (x in myObj1) {
    document.getElementById("exp3").innerHTML += x + "<br>";
}
for (x in myObj1) {
    document.getElementById("exp4").innerHTML += myObj1[x] + "<br>";
     //在使用for遍历时，只能通过 myObj[x] 来获取相应属性的值，而不能使用 myObj.x 
}
    //嵌套 JSON 对象(friend嵌套在myObj2中)
var myObj2 = {
    "name":"李四",
    "sex":"男",
    "friend": {
        "name1":"张三",
        "name2":"王五",
        "name3":"马六"
    }
}
     //两种方法均可结合访问,共四种,如下
var a=myObj2.friend.name1;
var b=myObj2.friend["name1"];
var c=myObj2["friend"].name1;
var d=myObj2["friend"]["name1"];
document.getElementById("exp5").innerHTML = a;//a,b,c,d均可
myObj2.friend.name1="王麻子"    //修改值(直接修改即可)
delete myObj2.friend["name2"];     //删除( delete 关键字)
      //JSON 数组(在[]中书写，可通过数组下标访问)
var myObj3 = {
    "name":"王五",
    "sex":"男",
    "friend":[ "熊大", "熊二", "翠花" ]
}
var m = myObj3.friend[0];
document.getElementById("exp6").innerHTML = m;
      //循环数组(for循环)
var x="";
for (i = 0; i < myObj3.friend.length; i++) {
    x += myObj3.friend[i] + "<br>"; 
}
document.getElementById("exp7").innerHTML = x;
      //嵌套 JSON 对象中的数组
myObj4 = {
    "name":"阿狸",
    "sex":"女",
    "friend": [
        { "name":"亚索", "skills":[ "斩钢闪", "风之障壁", "踏前斩","狂风绝息斩"] },
        { "name":"洛", "skills":[ "微光飞翎", "盛大登场", "轻舞成双","惊鸿过隙"] },
        { "name":"霞", "skills":[ "双刃", "致死羽衣", "倒钩","暴风羽刃"] }
    ]
}
      //双层循环访问
for (i in myObj4.friend) {
    x += "<h1>" + myObj4.friend[i].name + "</h1>";
    for (j in myObj4.friend[i].skills) {
        x += myObj4.friend[i].skills[j] + "<br>";
    }
}
document.getElementById("exp8").innerHTML = x;
</script>
</body>
</html>

注意：

json 对象和 json 字符串的区别：

json 对象  var str = { "name": "张三", "sex": "男" };

json字符串  var str = '{ "name": "李四", "sex": "男" }';

在使用for遍历时，只能通过 myObj[x] 来获取相应属性的值，而不能使用 myObj.x

json 在进行通过键名来获取值时，需要特别注意一下。

把键名赋值给另外一个变量，然后通过.方式去获取值。这种方式是行不通的，可以通过[]获取。

delete 运算符并不是彻底删除元素，而是删除它的值，但仍会保留空间。

运算符 delete 只是将该值置为 undefined，而不会影响数组长度，即将其变为稀疏数组（《JS权威指南》7.5节）。

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

结合一言API的一个小应用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一言API</title>
</head>
<body>
<span id="hitokoto">:D 获取中...</span> ——<span id="from"></span>
<script>
  var xhr = new XMLHttpRequest();
  xhr.open('get', 'https://v1.hitokoto.cn/?c=b');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      var data = JSON.parse(xhr.responseText);//获得字符串形式的响应数据。
      var hitokoto = document.getElementById('hitokoto');
    var fromm=document.getElementById("from")
    fromm.innerText=data.from;
      hitokoto.innerText = data.hitokoto;
    }
  }
  xhr.send();
</script>
</body>
</html>