首页 > 代码库 > 原生javascript里jsonp的实现原理
原生javascript里jsonp的实现原理
ajax不能跨域,jsonp可以跨域
跨域的核心思想:
调用(拿到的接口),定义(jsonp核心处理器)分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据 )
jsonp传进来的数据是{url:‘‘,data:{
cbName=‘cb‘,(根据接口制定的命名规范,有些事叫callback)
wd=‘aaa‘,
......(之后的数据都要进行字符串拼接)
},success:function(result){}}
一:设置默认状态(容错处理)
json=json||{};
if(!json.url)return;
json.data.cbName=json.data.cbName ||‘cb‘;
json.data=http://www.mamicode.com/json.data||{};
二:函数名做清除缓存处理
json.data[json.data.cbName ]=‘show‘+Math.random(); json.data[json.data.cbName]=json.data[json.data.cbName].replace(‘.‘,‘‘);
三:data数据转成字符串
for(var name in json.data){
arr.push(name+‘=‘+encodeURIComponent(json.data[name]));
}
var str=arr.join(‘&‘);
四:定义处理数据函数返回回调函数
window[json.data[json.data.cbName] ]=function(result){
success&&success(result);
oH.removeChild(oS);//数据获取到后删除掉oS
};
五:存放数据到script ,获取调用接口
var oH=document.getElementsByTagName(‘head‘)[0];
var oS=document.createElement(‘script‘);
oS.src=http://www.mamicode.com/json.url+‘?‘+str;
oH.appendChild(oS);
1.把拿到的数据存到一个script里面它的src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abb&cb=show "这里相当于数据调用的地方
其真实面目是:show({q:"abb",p:false,s:["abb变频器","abb电机","abb变频器配件","abby","bbs","abb式的词语","abbyy","abba","abb接触器","abbs建筑论坛"]});
2.定义
function show(json){
json.s//取到的数据是一个数组:["abb变频器","abb电机","abb变频器配件","abby","bbs","abb式的词语","abbyy","abba","abb接触器","abbs建筑论坛"]
}
function jsonp(url//数据形参){
//存数据到地址到新的script
var oH=document.getElementsByTagName(‘head‘)[0];
var oS=document.createElement(‘script‘);
oH.appendChild(oS);
}
当某个事件触发的时候调用:
jsonp(url//数据地址实参);
1.拿到jsonp接口
拿到百度搜素接口的步骤
1.F12
2.Network==找开头是su的文件,并且关键词是相应的
3.https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abb&json=1&p=3&sid=18285_1423_17948_18205_17001_17072_15711_12291_18086_18016&csor=3&cb=jQuery110207279864843003452_1456310625782&_=1456310625787
4.删除没有用的信息
5.地址删减完:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abb&cb=show
wd word 关键字
cb callback 回调函数
6.地址放入浏览器得出的数据是:
show({q:"abb",p:false,s:["abb变频器","abb电机","abb变频器配件","abby","bbs","abb式的词语","abbyy","abba","abb接触器","abbs建筑论坛"]});
jsonp提供的数据接口相当于一个调用函数
所以需要在跨域的时候先定义一个函数show
地址接口相当于是获取了这些数据
注意:1.人家给你接口你才能用
2.jsonp的回调函数,必须是全局的
转自:http://www.cnblogs.com/shiyou00/p/5533486.html
原生javascript里jsonp的实现原理
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。