当前位置: 首页 > 后端技术 > PHP

Ajax和jsonp不是一回事阅读详细解释

时间:2023-03-29 18:54:55 PHP

由于SenchaTouch2开发模式的特点,基本决定了它原生的数据交互行为只能通过AJAX来实现。当然,通过调用强大的PhoneGap插件然后打包,可以实现100%的Socket通信和本地数据库功能,也可以通过HTML5WebSocket实现与服务端的通信和服务端推送功能,但是这两种方法都有局限性,前者需要PhoneGap的支持,后者需要用户的设备支持WebSocket,所以都不能算是ST2的原生方案,只有AJAX是原生的。谈到AJAX,您将不可避免地面临两个问题。第一个是AJAX以什么格式交换数据?二是如何解决跨域需求?这两个问题目前有不同的解决方案。比如数据可以用自定义的字符串或者XML来描述,跨域可以通过服务端代理来解决。但目前为止最推荐或首选的解决方案是使用JSON传输数据,并依靠JSONP跨域。这就是本文的主题。JSON和JSONP虽然只有一个字母的区别,但它们根本不是一回事:JSON是一种数据交换格式,而JSONP是开发者匠心打造的一种非官方的跨域数据交互。协议。我们以最近很火的谍战片为例。JSON是地下党用来编写和交换信息的“代码”,而JSONP是将用代码编写的信息传递给他们的同志时使用的连接方式。你有没有看到?一是描述信息的格式,二是双方约定的信息传输方式。既然说的随便,我们就不再教条式地讲,而是专注于帮助开发者了解他们是否应该选择使用它以及如何使用它。打个小广告,这篇文章是我在群里和SenchaTouch2的开发者讨论ST2数据交互模型时的感触所写,所以如果你对MobileWebApp开发感兴趣,欢迎加入SenchaTouch交流Q群213119459.什么是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示例:复制代码//描述一个人varperson={"Name":"Bob","Age":32,"Company":"IBM","Engineer":true}//获取有关此人的信息varpersonAge=person.Age;//描述几个人varmembers=[{"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的公司名称varjohnsCompany=members[1].Company;//描述一个会议varconference={"Conference":"FutureMarketing","Date":"2012-6-1","地址":"北京","成员":[{"姓名":"鲍勃","年龄":32,"公司":"IBM","工程师":true},{"姓名":"John","Age":20,"Company":"Oracle","Engineer":false},{"Name":"Henry","Age":45,"Company":"Microsoft","Engineer"":false}]}//读取与会者Henry是否为工程师varhenryIsAnEngineer=conference.Members[2].Engineer;复制关于JSON的代码,就可以了说了这么多,更多的细节请参考开发过程中的资料,进一步了解什么是JSONP?先说一下JSONP是怎么产生的:其实网上关于JSONP的解释很多,但是都是大同小异,云里雾里,很多新手很难理解。让我解释一下这个问题,看看它是否有帮助。1.一个众所周知的问题,Ajax直接请求普通文件存在跨域未授权访问,不管你是静态页面,动态网页,Web服务,WCF,只要是跨域请求,不允许;2.但是我们也发现在网页中调用js文件时,不受是否跨域的影响(不仅如此,我们还发现所有带有“src”属性的标签都有跨域-域功能,例如复制代码毫无疑问是一个提示窗体会在页面弹出,显示跨域调用成功2.现在我们在jsonp.html页面定义一个函数,然后在remote.js中调用remote.js传入的数据。jsonp.html页面代码如下:复制代码复制代码remote.js文件代码如下:localHandler({"result":"我是远程js带来的数据"});运行后查看结果,页面成功弹出提示窗口,显示本地函数调用成功跨域远程js,也收到了远程js带来的数据,很欣喜,跨域远程获取数据的目的基本达到了,但是又出现了一个问题em出现了,如何让远程js知道它应该调用的本地函数的名字呢?毕竟jsonp的服务端要面对很多服务对象,而这些服务对象的本地功能又不一样呢?我们往下看。3、聪明的开发者很容易想到,只要服务器提供的js脚本是动态生成的就可以了,这样调用者就可以传递一个参数,用来告诉服务器“我要一段js代码,调用XXX函数,请返回给我”,这样服务端就可以生成js脚本,并根据客户端的需求进行响应。查看jsonp.html页面的代码:复制代码Copy代码这次代码变化很大,不再直接对远程js文件进行硬编码,而是编码实现动态查询,而这也是jsonp客户端实现的核心部分。本例的重点是如何完成jsonp调用的全过程。我们看到在调用url中传递了一个code参数,告诉服务器我要查看CA1998的航班信息,callback参数告诉服务器我本地的回调函数叫flightHandler,请将查询结果传入这个函数调用.好的,服务器很聪明。这个叫flightResult.aspx的页面生成了这样一段代码,提供给jsonp.html(这里不演示服务端的实现,跟你选择的语言无关,毕竟只是拼接字符串):flightHandler({"code":"CA1998","price":1780,"tickets":5});我们看到传递给flightHandler函数的是一个json,描述了航班的基本信息。运行页面,成功弹出提示窗口,至此整个jsonp执行过程顺利完成!4、至此,相信你已经能够理解jsonp的客户端实现原理了吧?剩下的就是如何封装代码,从而与用户界面进行交互,从而实现多次重复调用。什么?你正在使用jQuery,想知道jQuery是如何实现jsonp调用的?好吧,那我就干到最后吧,再给大家一段jQuery中使用jsonp的代码(我们还是用上面的航班信息查询例子,假设返回的jsonp结果不变):复制代码无标题页复制代码是不是有点奇怪?为什么我这次没有写flightHandler函数呢?它甚至奏效了!哈哈,这就是jQuery的功劳。当jquery处理jsonp类型的ajax时(我还是忍不住吐槽一下,虽然jquery也把jsonp归类到ajax中,但其实他们真的不是一回事),会自动给你生成回调是不是很爽函数并获取要调用的成功属性方法的数据?嗯,写到这里,我已经没有力气再写了,又困又累,只好赶紧睡觉了。朋友们,如果你们看到这篇不错,觉得有启发,请给我一个“推荐”吧!由于比较简单,不再提供demo源码下载。下面对ajax和jsonp的异同做一些补充说明:1、ajax和jsonp这两种技术在调用方法上“看起来”很相似,目的也是一样的。他们都请求一个url,然后处理服务器返回的数据。因此,jquery、ext等框架将jsonp封装为ajax的一种形式;2、但是ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非页面内容,而jsonp的核心是动态添加