原生封装Jsonp

你们好!咱们又见面了,昨天咱们讲了一下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);
}

剩下的在页面使用这个方法就行了,相信大家都会用的,再见了!