老师看看我这个jsonp?

来源:12-4 实现跨域的常见方式 - jsonp 和 CORS

功不唐捐终入海

2020-06-21

function getJsonp(url,callBack){
if(!url){
return;
}
const arr=[‘a’,‘b’,‘c’,‘d’,‘e’,‘f’,‘g’,‘h’];
let num1=Math.floor(Math.random()*8);
let num2=Math.floor(Math.random()*8);
let num3=Math.floor(Math.random()*8);
const fnName = json${arr[num1]}${arr[num2]}${arr[num3]};

        if(url.indexOf('?')>0){
            url+=`&jsonp=getJsonp.${fnName}`;
        }else{
            url+=`?jsonp=getJsonp.${fnName}`;
        }
        getJsonp[fnName]=function(data){
            try{
                callBack && callBack(data);
            }catch (e){

            }finally{
                delete getJsonp[fnName]; 
                script.parentNode.removeChild(script);
            }
        }
        const script = document.createElement('script');
        const head = document.getElementsByTagName('head')[0];
        script.src=url;
        head.appendChild(script);
    }
   虽然能写出这个封装但是还是有点不明白这个数据是怎么拿到手的,就是对这个服务器动态拼接不太懂。
   在我学的时候我是这么理解的,服务器看到我这个携带的数据 jsonp=getJsonp.xxxx他就会认为我这个是个函数然后运行它,并且把数据当作参数传入这个函数。 
写回答

1回答

双越

2020-06-21

首先你要了解以下知识:

  1. 服务端返回的是一段 js 

  2. 服务端返回的 js ,是执行一个全局函数,在函数中传入想要返回的数据

先把这两点搞懂,再去思考你的问题。

1
0

一天时间高效准备前端技术一面 匹配大厂面试要求

针对时下面试高频考点,帮助新人js面试快速通关

4694 学习 · 1681 问题

查看课程