JSON 和 JSONP 两兄弟

  项目中遇到这个新事物,转一篇不错的总结,原文

  如今ajax威风凛凛

  但说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?

  这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决。

  但到目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来跨域。而这就是本文将要讲述的内容。

  json与jsonp

  json:一种数据交换格式

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

  一个是描述信息的格式,一个是信息传递双方约定的方法。

  json的优点

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

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

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

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

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

  JSON的缺点当然也有,但在作者看来实在是无关紧要的东西,所以不再单独说明。

  JSON的格式或者叫规则:

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

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

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

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

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

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

  JSON实例 

// 描述一个人 
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直接请求普通文件时存在跨域无权限访问的额问题

  2. web页面调用js文件时则不受是否跨域的影响(凡是拥有“src”这个属性的标签都有跨域的能力比如<script>、<img>、<iframe>)

  3. 因此,如果想通过纯web端跨域访问数据只有一种可能,就是在远程服务器上设法把数据装进js格式的文件里

  4. 已知json纯字符数据格式可以描述复杂数据,而且被js原生支持

  5. 这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。

  6. 客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。

  7. 为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

function getCitys() {
        return $.ajax('http://api.miwifi.com/kujiale_proxy/get/openapi/city', {
            dataType: 'jsonp',
            success: function(rsp) {
                if (rsp.code == 0) {
                    Cache.set('citys', rsp.data);
                }
            }
        });
    }

   其他

  1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

  2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

  3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

  4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Ldpe2G的个人博客

ScalaMP ---- 模仿 OpenMp 的一个简单并行计算框架

这个项目是一次课程作业,要求是写一个并行计算框架,本人本身对openmp比较熟,

2086
来自专栏数据和云

中文命名可能有什么坏处?

在最近的一个报告分析中,再次遭遇到全中文的数据结构设计。从图示中可以看到,所有的表名、索引名等,都是用中文命名的。 我们不考虑面向对象、方法那回事,单纯从技术角...

3715
来自专栏calvin

centos7 lldb 调试netcore应用的内存泄漏和死循环示例(dump文件调试)

lldb工具的安装,linux下netcore如何生成dump文件,查看下文 centos7使用lldb调试netcore应用转储dump文件

2093
来自专栏SHERlocked93的前端小站

JS 状态模式

状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类。 其实就是用一个对象或者数组记录一组状态,每个状态对应一个实现...

2384
来自专栏Python专栏

Python | 一次下完所有小说,还有谁!

来源:http://www.cnblogs.com/Josiah-Lin/p/7241678.html

1013
来自专栏后端之路

NoSql介绍之redis

背景 随着web2.0的兴起 大量的NoSql层出不穷。其中的佼佼者必然会包含Redis 那么对于Redis的基本使用大家还是要做到了然与心 NoSql nos...

2917
来自专栏C语言及其他语言

【编程经验】C语言中EOF是什么意思

C语言中EOF的意思 今天跟大家说道说道这个C语言中EOF是什么意思。 相信很多朋友在学习C语言过程中,都看到过EOF的字样,但翻过整本C语...

3927
来自专栏互扯程序

毕业季,跳槽季,不刷点面试题怎么能行?

现在是资源共享的时代,同样也是知识分享的时代,如果你觉得本文能学到知识,请把知识与别人分享。 前言 马上就是一年一度的毕业季 跳槽季,找工作三大要素,简...

3485
来自专栏北京马哥教育

练了一年再来总结的 Vim 使用技巧

1453
来自专栏叁金大数据

自学Python五 爬虫基础练习之SmartQQ协议

  BAT站在中国互联网的顶端,引导着中国互联网的发展走向。。。既受到了多数程序员的关注,也在被我们所惦记着。。。

2223

扫码关注云+社区