首页 > 代码库 > JS中对JOSN的解析

JS中对JOSN的解析

2024-08-24 10:20:53   221人阅读

一、什么是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=http://www.mamicode.com/{
"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="http://www.mamicode.com/{‘name‘: ‘Jack‘}";
//var data="http://www.mamicode.com/{name: ‘Jack‘}";属性名可加可不加‘单引号,但属性值一定要加单引号
var data="http://www.mamicode.com/{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="http://www.mamicode.com/{‘name‘: ‘Jack‘}";
//var data="http://www.mamicode.com/{name: ‘Jack‘}";属性名可加可不加‘单引号,但属性值一定要加单引号
var data="http://www.mamicode.com/{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="http://www.mamicode.com/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="http://www.mamicode.com/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

 

JS中对JOSN的解析


联系
我们