浅析 JSONP 跨域原理

您目前处于：笔记 2017-07-11

乔淑夷

乔淑夷，从事京麦工作台前端架构及开发工作，熟练运用h5，css3，js，jquery等前端技术，熟悉vue，angular等开源框架。

JSONP 的出现是因为浏览器的同源策略，同源是指所请求的域名、协议、端口号和当前请求相同，同源策略限制了原生XMLHttpRequest() 对象无法获取到 JSON 数据，但是

<script><img><link>

标签是可以跨域的。

JSONP 的原理是通过

<script>

标签向服务器发送请求，将前端方法作为参数传递到服务器，服务器接收到请求后将 JSON 数据作为该方法的参数，返回 JavaScript 文本，前端方法就可以拿到数据。

注：由于使用的是 script 标签的 src 属性，所以只支持 get 方法

服务器返回数据：

callback([  
  {  
    "logo":"img-1.png",  
    "title":"标题1"  
  },  
  {  
    "logo":"img-2.png",  
    "title":"标题2"  
  },  
  {  
    "logo":"img-3.png",  
    "title":"标题3"  
  },  
  {  
    "logo":"img-4.png",  
    "title":"标题4"  
  }  
])

原生 JS 实现方式：

 function jsonp(req){  
    var script = document.createElement("script");  
    script.setAttribute("src", req.url+"?param="+req.callback.name);  
    document.body.appendChild(script);  
}  
function callback(res){  
     console.log(res);  
}  
jsonp({  
     url: '',  
     callback: callback  
})

JQuery 实现方式：

unction callback(res){  
    console.log(res);  
}  
$.ajax({  
    url: '',  
    type: 'GET',  
    dataType:'jsonp',  
    jsonp:'callback',  
    jsonpCallback:'callback',  
    success: function (res) {  
       console.log(res);  
    }  
});