说说JSON和JSONP,也许你会豁然开朗

原创
小哥 2年前 (2023-05-25) 阅读数 49 #大杂烩

转自:http://kb.cnblogs.com/page/139725/

前言

由于Sencha Touch 2这种开发模式的特点基本决定了它的原生数据交互行为几乎只能通过AJAX来实现。

当然,通过称呼强者PhoneGap插件和打包,可以实现100%的Socket通信和本地数据库功能,或通过HTML5的WebSocket也可以实现与服务器的通信和服务器推送功能,但这两种方法都有其局限性。前者需要PhoneGap是的,后者要求用户的设备必须支持WebSocket因此,它不能被视为ST2本机解决方案仅AJAX。

说到AJAX难免会面临两个问题,第一个是AJAX使用什么格式来交换数据?第二个问题是如何满足跨域需求?目前对于这两个问题有不同的解决方案,例如对数据使用自定义字符串或使用XML描述一下,跨域可以通过服务器端代理来解决。

但到目前为止,最受推崇或首选的解决方案仍然是使用JSON要传输数据,请依靠JSONP跨域。这就是本文将要讨论的内容。

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母差异,但它们根本不是一回事:JSON它是一种数据交换格式,并且JSONP它是由开发人员的智能创建的非官方跨域数据交换协议。我们以最近火爆的谍战片为例,JSON它是地下组织用来编写和交换信息的“密码”,并且JSONP这是将用密码写成的信息传递给战友时使用的联合方法。看?一个是描述信息的格式,另一个是双方商定的信息传递方法。

既然我们随便说说,我们就不再用教条式的方法去解释,而是重点帮助开发者理解是否选择、怎么用。

什么是JSON

如前所述,JSON它是一种基于文本的数据交换方法或数据描述格式。不管你是否应该选择它,你首先要注意它的优点。

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;

关于JSON这就是现在的全部内容。更多详情请参考开发过程中的材料进行更深入的探讨。

什么是JSONP

先说说JSONP它是怎么发生的

实际上,在线关于JSONP有很多解释,但它们总是相同的,而且它们模糊不清,令人困惑。对于很多刚接触过的人来说,是很难理解的。我没有天赋,所以我会尝试用我自己的方式解释这个问题,看看它是否有帮助。

1一个众所周知的问题,Ajax直接请求普通文件时存在跨域未授权访问的问题,无论您是静态页面、动态网页还是web服务、WCF只要是跨域请求,就不允许;

2但我们也发现,Web在页面上致电js当涉及到文件时,它不受它们是否跨域的影响(不仅如此,我们还发现任何拥有”src“此属性的标签具有跨域功能,例如

毫无疑问,该页面将弹出一个提示表单,指示成功的跨域调用。

2现在我们是jsonp.html在页面上定义一个函数,然后远程remote.js传入数据以进行调用。

jsonp.html页面代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

remote.js文件代码如下:

localHandler({"result":"我是远程js带来的数据"});

运行后查看结果,会弹出一个提示窗口,提示本地函数已经远程跨域js已成功呼叫和接收远程js带来的数据。我很高兴跨域远程数据采集的目的已经基本实现,但又出现了一个问题。如何启用远程数据采集js它应该调用的本地函数的名称是什么?毕竟,它是jsonp所有服务商都要面对很多服务对象,而这些服务对象有不同的本地功能?让我们继续往下看。

3聪明的开发人员可以很容易地想象,只要服务器提供js只需动态生成脚本,以便调用方可以传递参数并告诉服务器,“我想要一个调用部分”XXX函数的js代码,请还给我“,以便服务器可以根据客户端的要求生成js脚本响应。

看jsonp.html页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这次的代码改动相当重大,我们将不再直接连接遥控器js文件被写入死,但编码以实现动态查询,这恰恰是jsonp客户端实现的核心部分,此示例的重点也是如何完成它jsonp通话的整个过程。

我们看到被召唤的url通过了code参数,告诉服务器我要检查什么CA1998有关下一趟航班的信息,以及callback该参数告诉服务器我的本地回调函数被调用flightHandler因此,请将查询结果传递到此函数中进行调用。

OK服务器非常智能,这称为flightResult.aspx该页面生成了一段代码,该代码提供jsonp.html(这里就不演示服务器端的实现了,它与你选择的语言无关,但最终涉及到连接字符串):

flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 });

我们看到它被传递给flightHandler该函数是一个json它描述了航班的基本信息。运行页面,会成功弹出一个提示窗口,jsonp的整个执行过程已成功完成!

4到目前为止,我相信你可以理解jsonp你是否实施了客户的原则?剩下的就是如何封装代码,方便与用户界面交互,从而实现多次重复调用。

什么?您正在使用jQuery,想知道jQuery如何实现jsonp叫?好的,那我就做对了,再给你一段jQuery使用jsonp代码(我们仍然使用上面查询航班信息的示例,假设返回jsonp结果不变):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Untitled Page

是不是有点奇怪?这次我为什么不写flightHandler这个功能呢?它甚至成功运行!哈哈,就是这样jQuery谢谢jquery在处理jsonp类型的ajax当(仍然无法抗拒烤,虽然jquery也把jsonp归入了ajax但实际上它们不是一回事),自动生成回调函数并提取数据success调用属性方法不是很好吗?

好了,写到这里,我太累了,累了,不能继续写了。我需要快点上床睡觉。如果朋友们觉得这很棒,鼓舞人心,给我一个“推荐”!由于其简单性,不再提供demo源代码已下载。

没想到,我在博客公园上做了一个头条推荐。我仍然很高兴看到大家对这篇文章的认可和评论ajax与jsonp请就异同提供一些补充说明:

4月20每日下午补充

1、ajax和jsonp这两种技术在调用方法方面“看起来”相似,并且具有相同的目的,都请求url然后处理服务器返回的数据,所以jquery和ext等到框架完成jsonp作为ajax封装在一个形式中;

2、但ajax和jsonp从本质上讲,这是不同的东西。ajax的核心是通过XmlHttpRequest获取此页面上没有的内容,以及jsonp的核心是动态加法
Powered By Z-BlogPHP Theme By 编程老白