项目开发中，因为前后端数据分离，所以要用ajax进行数据请求，直接请求后端人员电脑接口，会出现跨域问题。最后用到jsonp对这方面进行处理，下面是我的一些理解。
应用
后端返回数据格式：
callBack({ "base": "http://www.baidu.com", "name": "baidu" });
前端调用：
<script type="text/javascript"> function callBack(data){ var base=data.base; } </script> <script type="text/javascript" src="http://localhost:8080/one/data.js"></script>
或者用jQuery的调用方法：
$.ajax({ type:"post", url:"http://localhost:8080/one/data.js", dataType:"jsonp", jsonpCallback:"callBack", //和后台方法名保持一致 success:function(data){ var base=data.base; } });
原理
因同源策略限制，ajax不能直接请求其它域的数据，然后网页是可以直接请求其它域的js文件的（还要样式文件，图片等），所以用script引入的方法可以避开跨域的问题从而加载到需要数据。
一般服务器返回的json数据如下：
{ "base": "http://www.baidu.com", "name": "baidu" }那我们来看下面一段代码：
<script type="text/javascript"> //定义方法 function callBack(data){ var base=data.base; } //调用方法 callBack({ "base": "http://www.baidu.com", "name": "baidu" }); </script>
从上面可以看出如果我们把调用方法这块放在服务器，并把要传的数据作参数传入，在前端用script方式引用就能获取数据了。
所以后端服务器数据返回模式（这里用js文件代替）：data.js
callBack({ "base": "http://www.baidu.com", "name": "badu" });前端引用代码：
jquery的ajax方法中有集成jsonp用法，如下：
也就是dataType参数值变成"jsonp"，添加jsonpCallback参数，参数的值就是后台服务器引用的方法名。到这里，大家都知道jsonp的用法和原理了吧。
转载于:https://www.cnblogs.com/xgytbht/p/7126499.html
