什么是jsonp

jsonp充其量只能说是一种“方法”。它可以让页面从其他域中获取资料。

 

首先要知道的是同源策略,在javascript中使用http请求(ajax)是会受到同源策略的限制的。A网站的页面是不能在javascript中访问B网站的资源的。但是,对于这种希望A网站访问B网站的资源的需求怎么办呢?(跨域访问)。jsonp就出现了。

 

html中虽然说javascript是不能跨域的,但是有许多标签,比如<img>,<iframe>,<script>这些有src属性的标签是不受同源策略的影响的。于是jsonp就把脑筋动到script标签上了。一般script都是静态的,但是script能否是动态的呢?

 

比如我在script的src中的url带上用户id,这样来访问一个跨域的请求,请求返回这个用户的个人信息,我再使用这个个人信息来渲染我的页面。这样不就可以完成了一个跨域请求了。但是呢?script中返回的必须是javascript,所以呢,一般就约定,src中的url除了要带动态请求所需要的信息以外,还需要带一个回调信息(一般是一个回调函数),让请求返回的数据是一个可执行的javascript的完整语句。

 

比如:

function handle_data(data) {
// `data` is now the object representation of the JSON data
} ---
http://some.tld/web/service?callback=handle_data:
---
handle_data({"data_1": "hello world", "data_2": ["the","sun","is","shining"]});

再问个经常问到的问题,jsonp和ajax,json有什么关系呢?

首先jsonp和ajax完全是两个概念,可以说jsonp出现的理由就是弥补ajax无法跨域访问的缺陷而出现的。所以这两个概念没啥关系。至于有些框架,比如jquery喜欢把ajax和jsonp放在一起,完全是由于他们的调用和使用方式很相像而已。

 

jsonp返回的数据并不是json,而是javascrip,比如上例中的handle_date中返回的数据一定要是json么?从来没人这么说过。再次吐槽下,特别是前端的这些概念的名词确实起的很容易让人迷糊。

jsonp有什么优点呢?

第一个优点当然是能跨域了。一个访问不再受限于域名了,这个代表什么呢?代表我可以提供一个公共的webservice了,这个服务可以给你服务,也可以给他服务,你们不需要一定是在我的域名下的。

 

其次的优点是将回调方法的权限给了调用方。这个就相当于将controller层和view层终于分开了。我提供的jsonp服务只提供纯服务的数据,至于提供服务以后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据,你们只需要有不同的渲染逻辑就可以了,逻辑都可以使用同一个jsonp服务。

 

还有一个优点是它甚至不需要浏览器能支持XMLHTTPRequest,就是说所有的浏览器都可以使用这个技术。

json有什么缺点呢?

首先的缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞,即它返回的javascript的内容被人控制的。那么结果是什么?所有调用这个jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。

 

其次是错误处理,jsonp在调用失败的时候不会返回各种HTTP状态码。只有200,没有404,没有500等状态码让你来标识是否要重新调用。

 

它只能支持GET,而不能支持POST请求,所以它的参数一定是带在HTTP头中的,会受到一些参数的限制,比如长度限制。

参考文章

http://blog.csdn.net/liaomin416100569/article/details/5480825

http://jingyan.baidu.com/article/eb9f7b6dbd3ff0869364e81c.html

http://www.json-p.org/

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

说说jsonp的更多相关文章

  1. 实例操作JSONP原理

    絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...

  2. angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流

    大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子

  3. 疯狂的JSONP

    何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...

  4. 通过扩展让ASP.NET Web API支持JSONP

    同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...

  5. 跨域的jsonP

    1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问.   2.区别于json (个人理解)json是数据交换格式,jsonp是数据通信中的交互方式   3.jsonp的get与p ...

  6. ASP.NET Web API 配置 JSONP

    之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...

  7. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  8. 跨域之jsonp

    我们都知道使用<script>标签可以引入外部的JS文件,即使这个JS文件来自于其他的网站,比如我们引用存放在网络服务器上的jQuery框架.在这个过程中,我们已经实现跨域访问.像< ...

  9. 由浅入深学习ajax跨域(JSONP)问题

    什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...

  10. JSONP的诞生、原理及应用实例

    问题: 页面中有一个按钮,点击之后会更新网页中的一个盒子的内容. Ajax可以很容易的满足这种无须刷新整个页面就可以实现数据变换的需求. 但是,Ajax有一个缺点,就是他不允许跨域请求资源. 如果我的 ...

随机推荐

  1. jackson json转实体 允许特殊字符和转义字符 单引号

    //允许出现特殊字符和转义符 mapper.configure(Feature.ALLOW_UNQUOTED_CONTROL_CHARS, true) ; //允许出现单引号 mapper.confi ...

  2. 火狐 SSL 收到了一个弱临时 Diffie-Hellman 密钥的解决办法

    连接 https网址 时发生错误. 在服务器密钥交换握手信息中 SSL 收到了一个弱临时 Diffie-Hellman 密钥. (错误码: ssl_error_weak_server_ephemera ...

  3. SSD硬盘 全盘安全擦除

    此文From http://ssd.zol.com.cn/575/5753057.html 在SSD固态硬盘的使用过程中,部分用户可能会碰到计算机意外掉电或死机并强行断电后,系统出现异常,扫描SSD后 ...

  4. tooltip提示插件

    tooltip提示信息插件 原理:定位元素在页面中的位置即坐标信息,将显示节点元素插入到body中绝对应为到相应位置,显示内容从指定元素的属性(dataMess)中获取或者通过设置获取. 使用方法: ...

  5. FMDB 版本迁移

    FMDB 版本迁移 安装 1. 通过CocoaPods 在项目根目录创建并编辑 Podfile 内容如下 $ cd /path/to/MyProject $ touch Podfile $ edit ...

  6. 彻底解决Android SDK Manager更新慢的问题

    Android SDK 下载速度慢,解决方法大概有两种.第一,FQ.这种方法比较彻底,但是要想有稳定的效果还的要花大价钱.第二,有些高人直接给了SDK中各软件的下载地址,直接下载速度非常快,下载后将包 ...

  7. vs2010 “最近使用的项目”为空?解决办法!

    本文转自http://blog.csdn.net/likaibs/article/details/39576361 谢谢该作者的分享,我在这里继续发扬光大,直接把原文粘贴过来,方便后面的朋友查看. “ ...

  8. EZGUI下的动态图片的处理

    EZGUI的使用过程中,有时需要使用动态的图片,比如商店里面商品的ICON,好友的头像等,通过使用SimpleSprite可以实现这个功能.   比如一个通过网络显示好友头像: WWW www = n ...

  9. 一个方法告诉你as3的removeChild性能有多烂

    其实as3这个坑我早就踩过,不过那时没太注意,最近把项目的removeChild干掉换成了visible=false,发现效率质的提升…… 先贴一下代码吧 private function testR ...

  10. 尝鲜CodeBlocks

    在寻找跨平台的C++ IDE,就尝试了CodeBlocks,写了个HelloWorld,测试了一下C++11的代码,我很喜欢他的代码着色,看着很清爽. 记得要打开C++11的支持: