跨域jsonp应用及原理

项目开发中,由于先后端数据分离,因此要用ajax进行数据请求,直接请求后端人员电脑接口,会出现跨域问题。最后用到jsonp对这方面进行处理,下面是个人一些理解。javascript

应用前端

  后端返回数据格式:java

callBack({
    "base": "http://www.baidu.com",
    "name": "baidu"
});

  

  前端调用:jquery

  

    <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

    $.ajax({
      type:"post",
      url:"http://localhost:8080/one/data.js",
      dataType:"jsonp",
      jsonpCallback:"callBack", //和后台方法名保持一致
      success:function(data){
         var base=data.base;
      }
    });

 

原理json

  因同源策略限制,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方式引用就能获取数据了。post

  因此后端服务器数据返回模式(这里用js文件代替):data.js

callBack({
    "base": "http://www.baidu.com",
    "name": "badu"
});

  前端引用代码:

  jquery的ajax方法中有集成jsonp用法,以下:

 

  也就是dataType参数值变成"jsonp",添加jsonpCallback参数,参数的值就是后台服务器引用的方法名。到这里,你们都知道jsonp的用法和原理了吧。

相关文章
相关标签/搜索