1.动态创建一个script标签,src为请求的url。
2.url的参数为callback=callbackName。
3.给全局对象window添加属性callbackName,value为回调函数,属性名最好使用hash,防止冲突。
4.后端读取函数名,返回的data为传入参数的函数,参数即我们所需要的。
5.callback执行完删除。
类似于script标签的还有img,a等。
简单实现
function jsonp(url, cbFn) {
let re = /callback=([^&]+)/;
let fnName = url.match(re)[1];
let script = document.createElement('script');
script.src = url;
document.body.append(script)
window[fnName] = cbFn;
script.onload = function () {
this.remove();
}
}
jsonp('http://127.0.0.1:3000/list?callback=foo', function (data) {
console.log(data);
})
//后端设置
let fnName = ctx.request.query.callback;
ctx.body = fnName + '({"username":"james"})'
记录记录!