JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快,更易解析。
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。
- JSON 具有自我描述性,更易理解
JSON 语法是 JavaScript 语法的子集。
关于JSON对象和数组,用法如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!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的一个小应用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!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> |
关于一言API,个人特别喜欢,比如网站中的漂浮小人就用到了这个。
http://xzh.i3geek.com
Post a new comment