jsonp揭秘

什么是JSONP？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。

 

那什么又是跨域呢？

简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。

 

同源策略

最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。

• 协议相同
• 域名相同
• 端口相同

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？

很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。

由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

限制范围

随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。

（1） Cookie、LocalStorage 和 IndexDB 无法读取。

（2） DOM 无法获得。

（3） AJAX 请求不能发送。

 

阳光和阴影是上帝派给人间的双胞胎，凡事有利既有弊，同源访问策略给与我们安全的同时，也产生了很多的不方便，尤其现在前后端分离开发，部署的时候有很多前端与后端不是一个端口，甚至不是一个服务器。所以就产生了跨域访问的需求

 

常见的跨域解决方案

jsonp

基本原理就是通过动态创建script标签,然后利用src属性进行跨域。但是只支持GET请求方法

websocket

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。

cors

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。

 

我们本次重点要说的就是JSONP方法

1. 通过上面的分析，我们知道Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、还是web服务，只要是跨域请求，一律不准。

 

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

 

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

 

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

 

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

 

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

 

首先我们先看一个淘宝的Jsonp接口

http://suggest.taobao.com/sug?code=utf-8&q=关键字&callback=cb

 

那么接下来我们就要自己手动封装一个自己的jsonp

首先前端需要写上我们想让远程服务器调用的函数，其次加上一个script标签，此标签路径是远程服务器的地址

代码如下

转载于:https://my.oschina.net/u/3953786/blog/2878769