JSONP跨域原理浅析

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


JSONP的原理是通过<script>标签向服务器发送请求，将前端方法作为参数传递到服务器，服务器接收到请求后将SON数据作为该方法的参数，返回JavaScript文本，前端方法就可以拿到数据。

JSONP的请求过程：

• 请求阶段：浏览器创建一个 script 标签，并给其src 赋值。

• 发送请求：当给script的src赋值时，浏览器就会发起一个请求。

• 数据响应：服务端将要返回的数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback({name: 'abc'})”)返回。当浏览器接收到了响应数据，由于发起请求的是 script，所以相当于直接调用 jsonpCallback 方法，并且传入了一个参数。

注：由于使用的是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实现方式

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