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