原生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的文件，并且关键词是相应的

          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