先说说JSONP是怎么产生的:

其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自己的方式来阐释一下这个问题,看看是否有帮助。

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

2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)。

3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理。

4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据。

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

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

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

这里是对ajax与jsonp的异同的说明:

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提供公开服务。

总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变这一点!

JSONP的产生,和ajax的异同!的更多相关文章

  1. Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别

    为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...

  2. Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)

    由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...

  3. json和jsonp的区别,ajax和jsonp的区别

    json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...

  4. json与jsonp应用及其他ajax数据交互方式

    1.json是数据交换格式,使用实例如下: $.getJSON( '/manage/asset/asset_delByIds.action', { 'ids':id }, function(data) ...

  5. 使用JSONP进行跨域Ajax 调用

    JSONP 是啥 JSONP 全称是JSON with Padding. 当需要进行跨域Ajax 调用的时候, 需要用到JSONP 协议. 客户端 $.ajax({ url: 'http://xxx' ...

  6. jsonp现实跨域Ajax CORS

    浏览器有一个很重要的概念——同源策略(Same-Origin Policy).所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(javascript.ActionScript)在没明确授权的情况 ...

  7. 使用JSONP,jQuery的ajax跨域获取json数据

    网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

  8. vue-resource 中 get / post / jsonp 三种请求方式的异同

    let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=2';let params ...

  9. JSON、JSONP、Ajax的区别

    什么是JSON JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量 ...

随机推荐

  1. 今天起,重新开头学习Java - 一、安装环境

    先拜领路人 https://blog.csdn.net/u011541946/article/category/6951961/3? 一.安装JDK 1. 下载 www.java.com JDK是Ja ...

  2. lambda表达式(2)

    转:http://www.cnblogs.com/kingmoon/archive/2011/05/03/2035696.html "Lambda表达式"是一个匿名函数,是一种高效 ...

  3. Codeforces 1159F Winding polygonal line(叉积)

    其实这个几何写起来还是比较方便,只用到了叉积.首先我们贪心的考虑一种情况,对于任意给定的LR串,我们起点的选择肯定是在这些点围成的凸包端点上,对于这样的起点来说,他对于L或者R都是有选择的机会,而且一 ...

  4. MVC一个action对应多个视图的写法

    一,如下代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

  5. nodejs爬虫编码问题

    最近再做一个nodejs网站爬虫的项目,但是爬一些网站的数据出现了中文字符乱码的问题.查了一下,主要是因为不是所有的网站的编码格式都是utf-8,还有一些网站用的是gb2312或者gbk的编码格式.所 ...

  6. element 弹框关闭报错

    <template> <el-container style="padding: 00px 20px 0px 20px"> <el-dialog ti ...

  7. [简单到爆]eclipse-jee-neon的下载和安装

    Eclipse的下载安装: 访问https://www.eclipse.org/downloads/eclipse-packages/ 选择Eclipse IDE for Java EE Develo ...

  8. JavaScript版EAN码校验算法

      <script type="text/javascript"> $(document).ready(function () { $("#btnCalc&q ...

  9. spring data jpa和spring data redis同时配置时,出现Multiple Spring Data modules found, entering strict repository configuration mode错误

    问题说明 data jpa和data redis同时配置时,出现Spring modules spring Spring Data Release Train <dependencyManage ...

  10. 搭建Keepalived+LNMP架构web动态博客 实现高可用与负载均衡

    环境准备: 192.168.193.80  node1 192.168.193.81 node2 关闭防火墙 [root@node1 ~]# systemctl stop firewalld #两台都 ...