大家好!我们又见面了,昨天我们讲了一下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);
}
剩下的在页面使用这个方法就好了,相信你们都会用的,再见了!