原生实现 跨域资源共享JSONP

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解析的是字符串)
})

猜你喜欢

转载自blog.csdn.net/qq_35333936/article/details/84787682