JS中對JOSN的解析

標籤：利用   錯誤   缺陷   location   alert   連結   頁面   規範   ons   

一、什麼是JSON？

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式，採用完全獨立於語言的文字格式設定，

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

非常適合於伺服器與 JavaScript 的互動

二、為什麼使用JSON而不是XML

他們都是這樣說的：　　儘管有許多宣傳關於 XML 如何擁有跨平台，跨語言的優勢，然而，除非應用於 Web Services，否則，在普通的 Web 應用程式中，開發人員經常為 XML 的解析傷透了腦筋，無論是伺服器端產生或處理 XML，還是用戶端用 JavaScript 解析 XML，都常常導致複雜的代碼，極低的開發效率。實際上，對於大多數 Web 應用程式來說，他們根本不需要複雜的 XML 來傳輸資料，XML 的擴充性很少具有優勢，許多 AJAX 應用甚至直接返回 HTML 片段來構建動態 Web 頁面。和返回 XML 並解析它相比，返回 HTML 片段大大降低了系統的複雜性，但同時缺少了一定的靈活性

三、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"]cba

 

 

 

參考連結:http://www.cnblogs.com/gaojun/p/3394274.html

JS中對JOSN的解析