跨域JSONP

一、JSONP详解

1.产生原因：由于同源策略的限制，同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性

2.同源策略：它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面，当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行，如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。（百度百科）

3.JSON和JSONP的概念

1. JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。易于阅读和编写，同时也易于机器解析和生产。它完全独立于语言的文本格式，同时使用了类似与C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。
2. JSONP 是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回客户端，通过javascript callback的形式实现跨域访问。即利用Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>、<\iframe>）的特点实现跨域。利用script的src属性请求需要访问的接口，并在需要访问的接口后面传一个callback参数给服务器，然后服务器在返回数据时会将这个callback的参数作为函数名，并将要返回的数据放在这个函数中返回给客户端（即前端），然后在响应时执行这句script代码（函数包含参数），这种跨域的通讯方式称为JSONP。

例如：

   <script>
    //先在客户端注册一个callback
    function hello(data) {
        console.log(data);
    }
    </script>
    
    //然把callback的参数的传给服务器，服务器收到参数后，先生成json数据，然后以js的语法形式拼接字符串形成一个 函数（参数）即hello（参数）
    //函数名就是把callback的参数，返回的内容如下所示：
    
    //jsonp1({"success":true,"version":"0","errmsg":"NoError","origtxt":"china","correctxt":"china","origidx":[],"corridx":[]})
    
    //客户端会解析执行这句JS代码，即执行了开始注册的hello函数
    
    <script src="https://correctxt.baidu.com/correctxt?callback=hello&text=china&ie=utf-8&version=0&from=FanyiWeb"></script>
    
    //执行hello方法控制台打印：{success: true, version: "0", errmsg: "NoError", origtxt: "china", correctxt: "china"}

JSONP的缺点是：它只支持GET请求而不支持POST等其它类型的HTTP请求

二、jQuery的Jsonp

   $.ajax({
    type:"get",    //请求方式
    async:true,    //是否异步
    url:"http://www.domain.net/url",//请求接口
    dataType:"jsonp",    //跨域json请求一定是jsonp
    jsonp: "callbackparam",    //跨域请求的参数名，默认是callback
    //自定义函数名
    //未定义函数名时，jQuery将自动生成的随机函数名（在window对象中加载一个全局的函数，当代码插入时函数执行，执行完毕后就会被移除）
    jsonpCallback:"successCallback",    
    data:{"query":"civilnews"},    //请求参数

    beforeSend: function() {
        //请求前的处理
    },
    
    success: function(data) {
        //请求成功处理，和本地回调完全一样
    },

    complete: function() {
        //请求完成的处理
    },

    error: function() {
        //请求出错处理
    }
});
    </script>

参考链接：https://www.cnblogs.com/good10000/p/6023893.html