說說JSON · 我的前端之路

JSON（JavaScript對象表示法），它的出現讓XML漸漸退出了數據交互格式的舞臺。JSON是一種輕量級的數據交互格式，很多編程語言都支持對JSON的解析和序列化 * * * * * JSON格式實際上只有兩個東西：key和value，value可以表示簡單值、對象、數組。 1.表示簡單值 ~~~ //最簡單的JSON "SunnyChuan" ~~~ 2.表示對象 ~~~ //JSON { "name":"SunnyChuan",//逗號分隔 "age":21//結尾沒有分號 } ~~~ ~~~ //對比JavaScript對象字面量表示 var obj={ name:"SunnyChuan", age:21 }; ~~~ 通過對比可以看出，JSON的key必須用雙引號括起來（單引號錯誤），沒有末尾的分號，這兩個是常見的錯誤。 3.表示數組 ~~~ [ { "name":"SunnyChuan", "age":21 }, { "name":"LuckyJing", "age":20 } ] ~~~ 4.復雜的JSON 通過對象、數組的組合，JSON可以組合成復雜的形式，數組里嵌套對象，對象里面嵌套數組等，可以通過JSON在線校驗工具來測試JSON格式是否正確。http://json.cn/ 5.JSON解析和序列化解析：通過JSON.parse()將JSON數據轉化為對象，eval（）也可以解析JSON但是不推薦。 ~~~ //myJson.json文件 { "name":"SunnyChuan", "age":21 } //前端代碼 window.onload=function(){ var xml=new XMLHttpRequest(); xml.onreadystatechange=function() { if(xml.readyState==4 && xml.status==200) { console.log(JSON.parse(xhr.responseText).name)//SunnyChuan } }; xml.open("get","myJson.json"); xml.send(); } ~~~ 序列化：JSON.stringify()將JavaScript對象序列化為JSON數據格式發送給后端。 ~~~ var obj={ name:"SunnyChuan", age:21 }; //省去一些代碼 xml.open("POST","ajax.php"); var data=JSON.stringify(obj); xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xml.send(data); ~~~ 后端將會接收到字符串{"name":"SunnyChuan","age":21} JSON作為數據格式是前后端交互必用（也可以用XML）的，個人做項目的時候深深感受到了JSON帶來的便利。