zhimma's blog
0%

JSON和JSONP

Posted on Edited on In

有一篇文章介绍了跨域问题的几种解决方法,其中有一种是使用jsonP方式解决,那么今天来详细说说Json和JsonP

前言

说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?,目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来跨域.而这就是本文将要讲述的内容

JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:

JSON是一种数据交换格式

JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议.

我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的“暗号”,而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式.看到没?一个是描述信息的格式,一个是信息传递双方约定的方法.

什么是JSON

JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点.

JSON的优点:

  1. 基于纯文本,跨平台传递极其简单;

  2. Javascript原生支持,后台语言几乎全部支持;

  3. 轻量级数据格式,占用字符数量极少,特别适合互联网传递;

  4. 可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的;

  5. 容易编写和解析,当然前提是你要知道数据结构;

JSON的格式或者叫规则

JSON能够以非常简单的方式来描述数据结构,XML能做的它都能做,因此在跨平台方面两者完全不分伯仲.

  1. JSON只有两种数据类型描述符,大括号{}和方括号[],其余英文冒号:是映射符,英文逗号,是分隔符,英文双引号””是定义符.

  2. 大括号{}用来描述一组“不同类型的无序键值对集合”（每个键值对可以理解为OOP的属性描述）,方括号[]用来描述一组“相同类型的有序数据集合”（可对应OOP的数组）.

  3. 上述两种集合中若有多个子项,则通过英文逗号,进行分隔.

  4. 键值对以英文冒号:进行分隔,并且建议键名都加上英文双引号””,以便于不同语言的解析.

  5. JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个,字符串必须用双引号引起来,其余的都不用,日期类型比较特殊,这里就不展开讲述了,只是建议如果客户端没有按日期排序功能需求的话,那么把日期时间直接作为字符串传递就好,可以省去很多麻烦.

JSON实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// 描述一个人

var person = {
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
}

// 获取这个人的信息

var personAge = person.Age;

// 描述几个人

var members = [
{
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
},
{
"Name": "John",
"Age": 20,
"Company": "Oracle",
"Engineer": false
},
{
"Name": "Henry",
"Age": 45,
"Company": "Microsoft",
"Engineer": false
}
]

// 读取其中John的公司名称

var johnsCompany = members[1].Company;

// 描述一次会议

var conference = {
"Conference": "Future Marketing",
"Date": "2012-6-1",
"Address": "Beijing",
"Members":
[
{
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
},
{
"Name": "John",
"Age": 20,
"Company": "Oracle",
"Engineer": false
},
{
"Name": "Henry",
"Age": 45,
"Company": "Microsoft",
"Engineer": false
}
]
}

// 读取参会者Henry是否工程师

var henryIsAnEngineer = conference.Members[2].Engineer;

什么是JSONP

JSONP的产生

  1. 一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;

  2. 不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响（不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如