JS中對JOSN的解析

1、什麼是JSON？

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，採用徹底獨立於語言的文本格式，

是理想的數據交換格式，同時，JSON是 JavaScript 原生格式。

很是適合於服務器與 JavaScript 的交互

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