JSONP的原理是<script src=''></script>
script标签内的src可以解析任何符合js语法标准的文件(后缀名不重要,内容重要)
实现原理的代码(方便后面封装的理解)
- 在请求页面中
<head>
<script src="http://127.0.0.1:8081/js"></script>
</head>
<script>
console.log(data);
</script>
开始封装
- 在请求页面中
var getJSON=function(url,callback){
var fnname='fn_'+Math.floor(100*Math.random()+1);
//随机生成1-100的整数,避免函数名重复
url=url.replace('*',fnname);
//将地址中的'*'号替换成随机生成的函数名
window[fnname]=function(ret){//全局调用函数
callback(ret);
}
window.onload=function(){
var sp=document.createElement('script');
//创建一个script标签
sp.src=url;
//设置script的src属性
document.head.insertAdjacentElement('beforeend',sp);
//插入head中
}
}
getJSON('http://127.0.0.1:8081/js?fnname=*',function(data){
//?后的fnname=*是传给后端的参数,后端可以通过req.query.参数名,获取到
//调用封装的getJSON函数
console.log(data);
})
被请求页面的路由设置
app.get('/js',function(req,res){
var data=JSON.stringify({a:1,b:2});
//传的数据必须是字符串形式
var fn=req.query.fnname;
//获取到前端传的参数
res.send(fn+'('+data+')');
//send的内容必须是字符串(因为src解析的是字符串)
})