原生封装Jsonp

Posted 2020-09-23

大家好!我们又见面了,昨天我们讲了一下jQuery的表单验证插件,今天我们来说一下Jsonp.

我们平常做的页面大部分的数据其实都是从后台获取过来的,最常用的方法就是Ajax,但是Ajax不能跨域取数据,这时我们就要用到Jsonp,那么什么是Jsonp?

jsonp原理:

就是利用<script>标签没有跨域的"漏洞"来达到与第三方通讯的目的，当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方API地址，并提供一个回调函数来接受数据，第三方产生为Json数据的包装，这样浏览器会调用callback()函数，并传递解析后的Json对象作为参数，本站脚本可在callback()函数里处理传入的数据.

具体代码如下:

function jsonp(json){  //封装一个函数,方便以后使用,   参数传入一个json对象
　　if(!json.url){       //考虑默认的情况
　　　　alert("请输入地址");
　　　　return;
　　}
　　json.data = json.data || {};  //都要考虑默认情况
　　json.cbName = json.cbName || "";

　　var fnName="show"+Math.random();//为了不使每个函数名一样,给函数名加随机数,避免了一些不必要的麻烦,
　　fnName=fnName.replace(".","");//随机数会有小数点,函数名不能有小数点,替换掉

　　window[fnName]=function(json1){//因为动态添加的script标签,每次调用都会创建一堆的script标签,页面加载的时候先清除一下
　　　　json.success && json.success(json1);//判断用户有没有传入success方法有就执行
　　　　head.removeChild(script);
　　};

　　json.data[json.cbName]=fnName;
　　var arr=[];//创建一个空数组,把用户传入的值放进去
　　for(var name in json.data){
　　　　arr.push(name + "=" + json.data[name]);
　　　　console.log(arr);
　　};

　　var script=document.createElement("script");

　　//网址的格式是地址+?+&(中间是数据)
　　script.src= json.url + "?" + arr.join("&");
　　var head=document.getElementsByTagName("head")[0];
　　head.appendChild(script);
}

剩下的在页面使用这个方法就好了,相信你们都会用的,再见了!