浅析 JSONP 跨域原理
您目前处于:前端  2017年07月11日

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);  
    }  
});

转载请并标注: “本文转载自 linkedkeeper.com (文/乔淑夷)”