1. 什么是JSONP？
JSON是一种轻量级的数据传输格式语言，被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。
那么什么是JSONP？
jsonp就是动态创建script，与ajax无关。是一种非官方跨域数据交互协议。
请求方：rose.com 的前端程序员（浏览器）
响应方：jack.com 的后端程序员（服务器）
- 请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
- 响应方根据查询参数callbackName，构造形如
yyy.call(undefined, '你要的数据')
yyy('你要的数据')
这样的响应 - 浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')
- 那么请求方就知道了他要的数据
这就是 JSONP
约定：callbackName -> callback
yyy -> 随机数 frank12312312312321325()
2.JSONP的作用
首先我们要知道浏览器同源策略这个概念。为了保证用户访问的安全，现代浏览器使用了同源策略，即不允许访问非同源的页面。在ajax中，不允许请求非同源的URL，比如www.a.com下的一个页面，其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的。
ajax请求受同源策略影响，js文件的调用则不受跨域与否的限制，因此如果想通过纯web端跨域访问数据，只能在远程服务器上设法将json数据封装进js格式的文件中，供客户端调用和进一步处理，这就是jsonp协议的原理。该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
3. JSONP具体实现
- 远程服务器remoteserver.com根目录下有个remote.js文件代码
- 本地服务器localserver.com下有个jsonp.html页面代码
- 在jsonp.html页面定义一个函数，然后在远程remote.js中传入数据进行调用
- 运行之后查看结果，页面成功弹出提示窗口，显示本地函数被跨域的远程js调用成功，并且还接收到了远程js带来的数据。
- 只要服务端提供的js脚本是动态生成的，这样调用者可以传一个参数过去告诉服务端 “我想要一段调用XXX函数的js代码，请你返回给我”，于是服务器就可以按照客户端的需求来生成js脚本并响应。
//remote.js文件代码
alert('我是远程文件');
localHandler({"result":"我是远程js带来的数据"});
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
//jsonp.js页面代码
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
4. jQuery实现JSONP调用:
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
success: function(json){
alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
jQuery ajax方式以jsonp类型发起跨域请求，其原理跟<script>脚本请求一样，因此使用jsonp时也只能使用GET方式发起跨域请求。跨域请求需要服务端配合，设置callback，才能完成跨域请求。
5. ajax与jsonp的异同
1、ajax和jsonp这两种技术在调用方式上”看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装。但实际jsonp和ajax没关系。
2、ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加。
- ajax无法跨域请求，可以用多种请求 方法；jsonp可以跨域请求，但只能用get请求。
6. 跨域请求和同源策略
同源策略，只有协议+端口+域名 一模一样的才允许发AJAX请求。
因为AJAX可以读取响应内容，浏览器必须保证同源策略。
跨域请求
网友评论