简单的jsonp跨域请求

来源：互联网发布：蚂蚁金服规模知乎编辑：程序博客网时间：2024/04/29 19:57

我想写一个页面，页面里用到百度的搜索引擎，这就是一种跨域请求。

最简单的，写一个输入框，每当输入的时候，会出现下面一串相似搜索，我们自己的输入框在输入的时候就去请求百度的搜索引擎，然后把得来的数据展示出来。

‘

主要的思路是创建一个script标签，然后在src属性里调用跨域url。就是比如

问号前边就是要访问的搜索引擎，wd是百度那边要搜索的数据，内容我写了个s，然后后面cb就是百度完成搜索之后返回的回调函数的名字。这两个参数是百度的规则。

你可以把上串代码写在一个空白网页里，刷新页面会发现console里报错，找不到wxl123这个函数，因为这个标签在完成搜索之后就会把数据传给wxl123，并且执行这个函数。

因此，我们就随便把这个函数写上，并且读取里面的数据就行了，比如

function wxl123(data){console.log(data);}

然后我们就可以在控制台里我们通过跨域获取来的数据啦！！这就完成了一次跨域请求。

接下来我们模仿百度页面，每次输入都会更新一次模糊搜索的信息，这么就需要多次建立这么一个标签了！而且用完之后，我们应该及时的把这个标签删掉。

所以应该自己创建一个函数，每次输入一次值的时候，我们获取input的值，并且自己组装一下script标签，然后还要保证返回执行的函数一定不想同。我直接拉代码就好了。

function jsonp(json){  //json是一个对象，需要获取html的值，大概是这样的  // json{  //   url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',  //   data:{  //     wd:'s'   //   },  //   success:function (data) {  //     console.log(data);  //   }  // }  //把json里的数据拆一下  var json = json || {};  var url  = json.url;  var success = json.success;  if(!url)return;  var data = json.data || {};  //下面两句相当于这样：  // json{  //  rtl:'',  //   data:{  //       wd:'s',  //       cb:'wxl123'  //       },  //   success:func...  // }  json.cbname = json.cbname || 'cb';  var wxl = 'wxl' + Math.random();  wxl = wxl.replace('.','');  data[json.cbname] = wxl;  //这是在定义wxl123函数，函数把百度搜索的数据又返回到success函数里了  window[wxl] = function(data){    success && success(data);    b.removeChild(a);  }    var arr = [];  //arr 是 ['wd=s','cb=wxl123']  for(var name in data){    arr.push(name + '=' + data[name]);  }  //创建标签  var a = document.createElement('script');  //给标签赋src属性  a.src = url + '?' + arr.join('&');  //src =  https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=s&cb=wxl123  var b = document.getElementsByTagName('head')[0];  //把完整的标签放在了head标签里面了  b.appendChild(a);}

上面就定义好了一个函数，每次输入的时候获取输入事件，然后获取输入的值，并且写好success函数，这个函数里主要是操纵dom把获取得到的值显示出来。代码是这样的

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>跨域请求</title>  <style>    *{      margin: 0;      padding: 0;    }    .box{      margin:100px auto;      width: 200px;    }    .box p{      color: #fb3    }    #u1{      margin-top: 30px;      display: block;      height: 38px;      width: 198px;      outline: none;      font-size: 30px;      padding-left: 20px;    }    li{      list-style: none;      font-size: 16px;      line-height: 38px;      border-bottom: 1px dashed #555;      padding-left: 20px;    }    li.hello{      background-color: #eee;    }  </style>  <script src='jsonp.js'></script>   <script>    window.onload = function(){      var a = document.getElementById('u1');      var b = document.getElementById('u2');      var index = -1;      a.onkeyup = function(e) {        if(e.which === 40 || e.which === 38)return;        jsonp({          url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',          data:{            wd:a.value          },          success:function(data){            b.innerHTML = '';            data.s.forEach(function(text){              var cli = document.createElement('li');              cli.innerHTML = text;              b.appendChild(cli);            })          }        })      };      a.onkeydown = function(e){        var a = b.getElementsByTagName('li');        var c = document.getElementById('u1');        if(e.which === 40){            ++index;            for(var i = 0 ; i<a.length;i++){              a[i].className = '';            }            if(index == a.length){              index = -1;            }            if(index!=-1){              a[index].className = 'hello';            }            c.value = a[index].innerHTML;          }        if(e.which === 38){            --index;            for(var i = 0 ; i<a.length;i++){              a[i].className = '';            }            if(index == -2){              index = a.length - 1;            }            if(index!=-1){              a[index].className = 'hello';            }            c.value = a[index].innerHTML;            //防止光标滑到最左边             e.preventDefault()        }        }                }  </script></head><body>  <div class="box">    <p>告诉你，这也是个百度！！</p>    <input type="text" id ='u1'>    <ul id = 'u2'></ul>  </div>  </body></html>

思路就是每次调用jsonp函数的时候给它一个对象，对象包含着我们的数据，url，以及以后要操作的函数。这个函数会在wxl123函数建立好的时候开始调用。

这就是一个简单的调用，chrome调试的，可以复制粘贴试一试玩的！

0 0