原生javascript里jsonp的实现原理
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生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=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=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的文件，并且关键词是相应的
4.删除没有用的信息
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的回调函数，必须是全局的
以上是关于原生javascript里jsonp的实现原理的主要内容，如果未能解决你的问题，请参考以下文章