简单的jsonp跨域请求

最新推荐文章于 2024-05-07 08:37:45 发布

ElegantIce

最新推荐文章于 2024-05-07 08:37:45 发布

阅读量710

点赞数 2

分类专栏： javascript 文章标签： jsonp跨域 javascript html

本文链接：https://blog.csdn.net/ElegantIce/article/details/51794527

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

‘

主要的思路是创建一个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调试的，可以复制粘贴试一试玩的！

ElegantIce

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的jsonp跨域请求

我想写一个页面，页面里用到百度的搜索引擎，这就是一种跨域请求。最简单的，写一个输入框，每当输入的时候，会出现下面一串相似搜索，我们自己的输入框在输入的时候就去请求百度的搜索引擎，然后把得来的数据展示出来。‘主要的思路是创建一个script标签，然后在src属性里调用跨域url。就是比如问号前边就是要访问的搜索引擎，wd是百度那边要搜索的数据，内容我写了个s，然后后面
复制链接

扫一扫