/*
封装一个jsonp方法，可以使用如下方式调用：
jsonp(url,[,data],[,callbackName])
*/
jsonp(‘http://photo.sina.cn/aj/index’,
{page:1, cate:’recommend’},’jsoncallback’)
.then(data => {
console.log(data);
})
function jsonp(url,data,callback){
return new Promise((resolve, reject) => {
let _url = url + ‘?page=’ + data.page + ‘&cate=’ + data.cate+’&callback=’+callback; //一定要有一个回调函数
const callbackName = callback;
let head = document.getElementsByTagName(‘head’)[0];
//设置传递给后台的回调参数名
let script = document.createElement(‘script’);
head.appendChild(script);
//创建jsonp回调函数
window[callbackName] = json =>{
resolve(json)
head.removeChild(script);
clearTimeout(script.timer);
window[callbackName] = null;
}
//发送请求
script.src = _url;
})
};
JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是一种非常常用的跨域请求方法。主要原理是利用script标签可以跨域请求的特性，由其src属性发送请求到服务器，服务器返回javascript代码，浏览器接收响应，然后就直接执行了，这和通过script标签引用外部文件的原理是一样的
JSONP由两部分组成：
回调函数和数据，回调函数是当响应到来时应该在页面中调用的函数，回调函数的名字一般在请求中指定。当服务器响应时，服务器端就会把函数和数据拼成字符串返回。
JSONP的请求过程：
请求阶段：浏览器创建一个script标签，并给其src赋值（类似http://example.com/api?callback=jsonCallback）
发送请求：当给script的src赋值时，浏览器就会发起一个请求
数据响应：服务端将要返回的数据作为参数和函数名称拼接在一起返回。当浏览器接收到了响应数据，由于发起请求的是script，所以相当于直接调用jsonCallback方法，并且传入一个参数
版权声明：本文为qq_32439381原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。