JSONP的出现是因为浏览器的同源策略,同源是指所请求的域名、协议、端口号和当前请求相同,同源策略限制了原生XMLHttpRequest()对象无法获取到JSON数据,但是<script><img><link>标签是可以跨域的。
JSONP的原理是通过<script>标签向服务器发送请求,将前端方法作为参数传递到服务器,服务器接收到请求后将SON数据作为该方法的参数,返回JavaScript文本,前端方法就可以拿到数据。
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);
}
});