jsonp 跨域 java_浅析 JSONP 跨域原理

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

标签是可以跨域的。

JSONP 的原理是通过

标签向服务器发送请求，将前端方法作为参数传递到服务器，服务器接收到请求后将 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 (文／张松然)”