跨域jsonp应用及原理

项目开发中，因为前后端数据分离，所以要用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的用法和原理了吧。