JavaScript:JSON详解

        向服务器发出Ajax请求时,可以以两种不同的方式从服务器响应检索数据:一种是使用XMLHttpRequest对象的reponseXML属性访问XML格式的数据;一种是XMLHttpRequest对象的responseText属性访问字符串格式的数据。当前,XML是进行数据传输的标准语言,但是使用XML的缺点之一是很难对它进行解析并提取要添加到页面的数据。

       JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一是JSON实际上就是JavaScript。它基于ECMAScript第3版中JavaScript对象字面量语法子集的一种文本格式。这表示可以使用responseText从服务器中检索JSON数据,然后再使用JavaScript的eval()方法将JSON字符串转换成JavaScript对象,那么,使用附加JavaScript就可以很地从该对象中提取数据,而不需要处理DOM。

       另外,也有针对大部分编程语言(包括C++,C#,ColdFusion、Java、Perl、PHP和Python)的JSON库,这些库能将上述语言格式化数据转换成JSON格式。

关于JSON,最重要的是要理解它是一种数据格式,不是一种编程语言。虽然具有相同的语法形式,但JSON并不从属于JavaScript。而且,并不是只有JavaScript才使用JSON,毕竟JSON只是一种数据格式。

       尽管有许多宣传关于XML如何拥有跨平台,跨语言的优势,然而,除非应用于Web Services,否则,在普通的Web应用中,开发都经常为XML的解析作秀了脑筋,无论是服务器端生成或处理XML,还是客户端用JavaScript解析XML,都常常导致复杂的代码,极低的开发效率。实际上,对于大多数Web应用来说,根本不需要要复杂的XML来传输数据,XML的扩展性很少具有优势,许多Ajax应用甚至直接返回HTML片段来构建动态Web页面。和返回XML并解析它相比,返回HTML片段大大降低了系统的复杂性,但同时缺少了一定的灵活性。XML使用元素、属性、实体和其他结构。JSON不是文档格式,因此它不需要这些附加结构。因为JSON数据只包括“名-值”对(对象)或值(数组),所以JSON数据比同等的XML数据占用更少的空间,执行速度更快。

一、JSON语法

JSON的语法可以表示以下三种类型的值:

      简单值:使用与JavaScript相同的语法,可以再JSON中表示字符串、数值、布尔值和null,但是JSON不支持JavaScript中的特殊值undefined。

      对象:对象作为一种复杂数据类型,表示的是一组无序的键值对儿。而每个键值对儿中的值可以是简单值,也可以是复杂数据类型的值。

      数组:数组也是一种复杂数据类型,表示一组有序的值得列表,可以通过数值索引来访问其中的值。数组的值也可以是任意类型—简单值、对象或数组。

1、简单值

      JSON数据结构包含以下简单值类型:字符、数字、布尔值(true/false)、null。

      JSON字符串必须使用双引号括起来。它们使用标准的JavaScript转义序列。因此在以下列字符的前面要添加一个反斜线。

2、对象

{

"name":"zzmm",

"age":29,

"school":{

"name":"zzzxxx",

"location":"hunan"

}

}

JSON对象需要注意几点:

(1)、没有声明变量,JSON中没有变量的概念。

(2)、没有末尾的分号,因为它不是JavaScript语句。

(3)、对象的属性名必须加双引号,单引号会导致语法错误。

(4)、同一个对象中绝对不允许出现两个相同的属性名。

3、数组

    在JSON中,可以采用JavaScript中的数组字面量的语法表示一个数组:

             [25,"hi",true]

  同样要注意,JSON数组也没有变量和分号,把数组和对象结合起来,可以构成更加复杂的数据集合,例如:

 [

   { "firstName":"John" , "lastName":"Doe" },

   { "firstName":"Anna" , "lastName":"Smith" },

   { "firstName":"Peter" , "lastName":"Jones" }

 ]

二、解析和序列化

       JSON之所以流行是因为可以把JSON数据结构解析为有用的JavaScript对象。例如取得上面例子中的第三个人的firstName。JSON数据在解析为JavaScript对象之后,只要一行简单的代码可以取得第三个人的firstName。

          peoples[2].firstName;

     在DOM结构中查找数据的代码:

         document.getElementsByTagName(“people”)[2].getAttribute(“firstName”);

1、JSON对象

       早期的JSON解析器基本上就是使用JavaScript的eval()函数,但是由于使用eval()对JSON数据结构求值存在风险,因为可能会执行一些恶意代码,所以ECMAscript5对解析JSON的行为进行了规范,定义了全局对象JSON。

      JSON对象有两个方法:stringify()和parse()。在最简单的情况下,这两个方法分别用于把JavaScript对象序列化为JSON字符串和JSON字符串解析为原生JavaScript值。

var people={
"name":"zzmm",
"age":29,
"school":{
"name":"zzzxxx",
"location":"hunan"
}
};
//把JavaScript对象序列化为一个JSON字符串
var jsonText=JSON.stringify(people);
alert(jsonText);//{"name":"zzmm","age":29,"school":{"name":"zzzxxx","location":"hunan"}}
//JSON字符串解析为原生JavaScript值
var peopleCopy=JSON.parse(jsonText);
alert(peopleCopy);//[object,Object]   

2、序列化选项

      JSON.stringify()还可以接收另外两个参数,第一个参数是个过滤器,可以是一个数组,也可以是一个函数;第二个参数是一个选项,表示是否在JSON字符串中保留缩进。

(1)、过滤结果

      过滤器参数是数组,那么JSON.stringify()的结果中将只包含数组中列出的属性。例如:

var people={
"name":"zzmm",
"age":29,
"school":{
"name":"zzzxxx",
"location":"hunan"
}
};
//JSON.stringify()第二个参数是数组。
var jsonText=JSON.stringify(people,["name","age"]);
alert(jsonText);//{"name":"zzmm","age":29}

       如果第二个参数是函数,传入的函数接收两个参数,属性(键)名和属性值。根据属性(键)名可以知道应该如何处理要序列化的对象中的属性。属性名只能是字符串,而值并非键值对儿结构的值时,键名可以使空字符串。注意如果函数返回了undefined,那么相应的属性会被忽略。例如:

var people={
"name":"zzmm",
"age":29,
"year":2016,
"school":[
"zzzxxx",
 "hunan"
],
"edition":3
};
//JSON.stringify()第二个参数是函数。
var jsonText=JSON.stringify(people,function(key,value){
     switch(key){
 case "name":
    return "zm";
 case "age":
    return "18";
 case "year":
    return undefined;
 case "school":
    return value.join(",");
 default:
    return value;
}
});
console.log(jsonText);
alert(jsonText);//{"name":"zm","age":"18","school":"zzzxxx,hunan","edition":3}

(2)、字符串缩进

        JSON.stringify()第三个参数用于控制结果中的缩进和空白符。如果这个参数是一个数值,那它表示的是每个级别缩进的空格数,最大缩进空格数为10,大于10的值都会自动转换为10。例如

var people={
"name":"zzmm",
"age":29,
"year":2016,
"school":[
"zzzxxx",
 "hunan"
],
"edition":3
};
//JSON.stringify()第三个参数是数值。
var jsonText=JSON.stringify(people,null,4);

保存在jsonText中的字符串如下所示:

{

    "name": "zzmm",

    "age": 29,

    "year": 2016,

    "school": [

        "zzzxxx",

        "hunan"

    ],

    "edition": 3

}

   如果缩进参数是一个字符串而非数值,则这个字符串将在JSON字符串中被用作缩进字符。同样缩进字符串长度不能超过10个字符长。

var people={
"name":"zzmm",
"age":29,
"year":2016,
"school":[
"zzzxxx",
 "hunan"
],
"edition":3
};
//JSON.stringify()第三个参数是数值。
var jsonText=JSON.stringify(people,null,"---");

保存在jsonText中的字符串如下所示:

{

---"name": "zzmm",

---"age": 29,

---"year": 2016,

---"school": [

------"zzzxxx",

------"hunan"

---],

---"edition": 3

}

(3)toJSON()方法

可以给对象定义toJSON()方法,返回其自身的JSON数据格式。

var people={
"name":"zzmm",
"age":29,
"year":2016,
"school":[
"zzzxxx",
 "hunan"
],
"edition":3,
toJSON:function(){
return this.name;
}
};
var jsonText=JSON.stringify(people);
alert(jsonText);//"zzmm"

3、解析选项

   JSON.parse()方法也可以接收另一个参数,该参数是一个函数,将在每个键值对儿上调用。

var people={
"name":"zzmm",
"age":29,
"year":2016,
"school":[
"zzzxxx",
 "hunan"
],
"edition":3,
    releaseDate:new Date(2011,11,1)
};
var jsonText=JSON.stringify(people);
console.log(jsonText);

结果为:

{"name":"zzmm","age":29,"year":2016,"school":["zzzxxx","hunan"],"edition":3,"releaseDate":"2011-11-30T16:00:00.000Z"}

var people={
"name":"zzmm",
"age":29,
"year":2016,
"school":[
"zzzxxx",
 "hunan"
],
"edition":3,
    releaseDate:new Date(2011,11,1)
};
var jsonText=JSON.stringify(people);
//JSON字符串解析为原生JavaScript值
var peopleCopy=JSON.parse(jsonText,function(key,value){
if(key=="releaseDate"){
return new Date(value);
}else{
return value;
}
});
alert(peopleCopy.releaseDate.getFullYear());


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值