原生javascript里jsonp的实现原理

Posted sweeeper

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的回调函数,必须是全局的
 
转自:http://www.cnblogs.com/shiyou00/p/5533486.html

以上是关于原生javascript里jsonp的实现原理的主要内容,如果未能解决你的问题,请参考以下文章

javascript 原生实现JSONP

原生javascript实现jsonp的封装

基于原生JS的jsonp方法的实现

AJAX jsonp实现过程

用原生JS实现AJAX和JSONP

JSONP跨域的原理解析及其实现介绍