1. 什么是JSONP？

JSON是一种轻量级的数据传输格式语言，被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。

那么什么是JSONP？

jsonp就是动态创建script，与ajax无关。是一种非官方跨域数据交互协议。

• 请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
• 响应方根据查询参数callbackName，构造形如
  yyy.call(undefined, '你要的数据')
  yyy('你要的数据')
  这样的响应
• 浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')
• 那么请求方就知道了他要的数据
  这就是 JSONP

约定：callbackName -> callback
yyy -> 随机数 frank12312312312321325()

2.JSONP的作用

3. JSONP具体实现

• 在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 = 
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script); 


    <script type="text/javascript" 

4. jQuery实现JSONP调用:

$.ajax({
             type: "get",
             async: false,
             url: 
             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的核心则是动态添加。

3. ajax无法跨域请求，可以用多种请求 方法；jsonp可以跨域请求，但只能用get请求。

6. 跨域请求和同源策略

同源策略，只有协议+端口+域名 一模一样的才允许发AJAX请求。
因为AJAX可以读取响应内容，浏览器必须保证同源策略。