1、什麼是JSON?javascript
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式,採用徹底獨立於語言的文本格式,html
是理想的數據交換格式,同時,JSON是 JavaScript 原生格式。java
很是適合於服務器與 JavaScript 的交互json
2、爲何使用JSON而不是XML數組
他們都是這樣說的: 儘管有許多宣傳關於 XML 如何擁有跨平臺,跨語言的優點,然而,除非應用於 Web Services,不然,在普通的 Web 應用中,開發者常常爲 XML 的解析傷透了腦筋,不管是服務器端生成或處理 XML,仍是客戶端用 JavaScript 解析 XML,都經常致使複雜的代碼,極低的開發效率。實際上,對於大多數 Web 應用來講,他們根本不須要複雜的 XML 來傳輸數據,XML 的擴展性不多具備優點,許多 AJAX 應用甚至直接返回 HTML 片斷來構建動態 Web 頁面。和返回 XML 並解析它相比,返回 HTML 片斷大大下降了系統的複雜性,但同時缺乏了必定的靈活性瀏覽器
3、JS中對JSON的解析方式:安全
1.使用JS自帶的eval()函數,轉爲JSON對象,再直接利用"."號操做屬性服務器
(1)data在JS中直接被定義爲一個JSON對象函數
<script type="text/javascript">
var data={
"name": "Jack",
"age": 30,
"isMan": true,
"school": {
"name": "Lonton University",
"location": "English"
}
}
var JSONObj=eval(data);//直接轉成JSON對象
alert(JSONObj.name);
alert(JSONObj.school.name);
</script>性能
(2)data是從後臺返回的JSON格式的字符串
<script type="text/javascript">
//var data="{'name': 'Jack'}";
//var data="{name: 'Jack'}";屬性名可加可不加'單引號,但屬性值必定要加單引號
var data="{person:{name:'Jack',sex:'male',age:'23'},school:{name: 'Lonton University',location: 'English'}}";
var JSONObj=eval("("+data+")");//轉成JSON對象,注意:這裏要加"("和")",在JS中{}表明一個對象
alert(JSONObj.person.name);
alert(JSONObj.school.name);
alert({});//return [object Object]
</script>
注意:很是重要,JSON中的屬性必需要加上雙引號"",在實際使用中,常常會由於上面使用單引號或不使用引號形成序死化錯誤,從而沒法生成JSON對象
<script type="text/javascript">
//var data="{'name': 'Jack'}";
//var data="{name: 'Jack'}";屬性名可加可不加'單引號,但屬性值必定要加單引號
var data="{userList:[{name:'Jack',sex:'male',age:'23'},{name:'kate',sex:'female',age:'24'}],school:{name: 'Lonton University',location:'English'}}";
var JSONObj=eval("("+data+")");//將JSON格式的字符串轉成JSON對象
//alert(JSONObj.person.name);
alert(JSONObj.school.name);//Lonton University
//遍歷數組屬性
alert(JSONObj.userList[0].name);//Jack
var size=JSONObj.userList.length
alert(size);//2
for(var i=0;i<size;i++){
alert(JSONObj.userList[i].name);
}
</script>
2.使用Function函數
<script type="text/javascript">
var strJSON = "{name:'json name'}";//獲得的JSON
var obj = new Function("return" + strJSON)();//轉換後的JSON對象
alert(obj.name);//json name
alert(obj.constructor);//function Object(){[native code]}
</script>
1,2方式的缺陷:
a.這種形式將使得性能顯著下降,由於它必須運行編譯器
b.eval函數還減弱了你的應用的安全性,由於它給被求值的文本賦予了太多的權力。就像with語句執行的方式同樣,它下降了語言的性能
c.Function構造器是eval的另外一種形式,因此它一樣也應該被避免使用。
3.序列化的方式
ECMAScript 5對解析JSON進行規範,定義了全局對象JSON,支持的瀏覽器有:IE8+,Firefox 3.5+,Safari4+,Chrome和Opera 10.5+;
若是瀏覽器不支持全局對象JSON,能夠在頁面中引入json2.js插件 <script type="text/javascript" src="json2.js"></script>
JSON對象提供兩個方法:stringify()和parse(),stringify()是將JSON對象轉成字符串,而parse()則是將符合規範的字符串轉成可用JSON對象。
(1)stringify()
JSON.stringify(value [, replacer] [, space])
<script type="text/javascript">
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var json = JSON.stringify(student);
alert(json); //{"name":"Lanny","age":"25","location":"China"}
</script>
使用數組過濾,只保留:name及locaiton
<script type="text/javascript">
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var json = JSON.stringify(student,["name","location"]);
alert(json);//{"name":"Lanny","location":"China"}
</script>
使用函數過濾,對於name屬性值單獨處理,在以前輸出:」my name is :」
<script type="text/javascript">
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var json = JSON.stringify(student, function (key, value) {
switch (key){
case "name":
return "my name is " + value;
default :
return value;
}
});
alert(json);//{"name":"my name is Lanny","age":"25","location":"China"}
</script>
使用縮進,縮進4個空白:
<script type="text/javascript">
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var json = JSON.stringify(student,null,4);
alert(json);
//返回結果以下:
{
"name": "Lanny",
"age": "25",
"location": "China"
}
</script>
(2)parse()
JSON.parse(text [, reviver])
如下示例演示瞭如何使用 JSON.stringify 將數組轉換成 JSON 字符串,而後使用 JSON.parse 將該字符串還原成數組。
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
var arr = ["a", "b", "c"];
var str = JSON.stringify(arr);
document.write(str);
document.write ("<br/>");
var newArr = JSON.parse(str);
while (newArr.length > 0) {
document.write(newArr.pop() + "<br/>");
}
</script>
// Output: ["a","b","c"] c b a
參考連接:http://www.cnblogs.com/gaojun/p/3394274.html