jsonp跨域请求原理

首先提一下浏览器同源策略的概念，为了保护用户访问的安全，现代浏览器使用了同源策略，既不容许访问非同源的页面。
同源策略
所谓同源是指：域名，协议，端口号彻底相同

http://www.baidu.com/detail.html  
http://www.example.com/detail.html          不一样源 域名不一样

http://www.baidu.com/detail.html   
https://www.baidu.com/detail.html           不一样源 协议不一样 

http://www.baidu.com/detail.html 
http://www.baidu.com:8080/detail.html       不一样源 端口不一样

http://www.baidu.com/detail.html 
http://api.baidu.com/detail.html            不一样源 主域相同，子域不一样

而非同源以前的跨域请求问题咱们就能够用JSONP来解决，那么具体是怎么实现的呢？
ajax请求受同源策略影响是不容许进行跨域请求的，而html中的标签具备可跨域的特性，基于此原理，咱们能够经过动态建立script，再请求一个带参网址实现跨域通讯。

一、原生实现

<script> var script = document.createElement('script'); script.type = 'text/javascript'; // 传参并指定回调执行函数为onBack 这里的functionName=onBack只是我这个接口须要传的一个参数，不须要的能够不用传 script.src = 'http://192.168.0.189:8012/platformMemberExpRecord/jsonp?functionName=onBack&callback=onBack'; document.head.appendChild(script); // 回调执行函数 function onBack(res) { console.log(JSON.stringify(res)); } </script>

输出结果

{"status":true,"user":"admin"}

服务端返回以下（返回时即执行全局函数）：

onBack({"status": true, "user": "admin"})

jsonp跨域是一个须要先后端配合实现的跨域请求方法。。单靠一方的力量是不能实现的。。
这是一个困扰了我千年的老问题了，一直搞不懂jsonp究竟是怎么个原理，今天终于和个人最佳拍档–隔壁小婷的共同探讨实践下很是深入的理解了这个小东西。。在这里分享记录一下：

上面说到html的标签具备可跨域的特性，因此咱们就用到了script标签，一般它的属性src都是把一个相对或者绝对的url地址里的东西引用到当前页面中，这里把要访问接口的地址赋给它 就是用到了它的这个特性。。
这时候就须要后台跟咱们配合，后台须要在接口中给咱们返回一个函数（其实就是一个页面 页面里方法的参数就是要返回的数据），这样就至关于咱们把这个返回的函数引用到了咱们的页面中。。而且执行页面已经写好的对应的方法。。
服务端返回的 onBack({“status”: true, “user”: “admin”})
回调执行函数
function onBack(res) {
console.log(JSON.stringify(res));
}
回调执行函数被返回的方法执行 获得最后请求的数据。。完美。。

二、jquery ajax：

<script> $.ajax({ url: 'http://192.168.0.189:8012/platformMemberExpRecord/jsonp?functionName=onBack', type: 'get', data: {}, dataType: 'jsonp', // 请求方式为jsonp jsonpCallback: "onBack", // 自定义回调函数名 success: function(res){ console.log(res) }, fail: function(res){ console.log(res) } }); </script>