zoukankan      html  css  js  c++  java
  • 原生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
  • 相关阅读:
    php集成开发环境搭建三种方式
    阿里云服务器ftp连接后21端口无法使用的问题
    Linux CentOS7 安装FTP服务器
    WIN10分盘
    转载:常见的正则表达式
    转载:什么是分布式系统中的幂等性
    会员通过消费攒积分,升级RENEW以及降级的需求
    CASSANDRA How to import and export data
    tmp for cassandra batch delete
    SQL Insert Case When Update
  • 原文地址:https://www.cnblogs.com/sweeeper/p/6106231.html
Copyright © 2011-2022 走看看