jsonp百度跨域搜索

恩？好像有很久没有更新博客了吧？最近了解到一点点的（也只有一点点）jsonp跨域的操作，差不多我们每天都会打开这个网页，当然不包括那些打开Google的人（没翻墙软件）那么我们是如何实现这个效果的呢？

一、骨架

那么我们的一个基本骨架就搭建好了

html

<div id='box'>
    <form action="">
      <input type="text" id='text'>
      <button id='btn' >百度一下</button>
    </form>
    <div id='show'>
      <ul></ul>
    </div>
  </div>

二、功能

这里我们用es6的语法，恩。。。当然是因为学了要用嘛

思路：我们应该首先获取到基本的元素，这里无论你用何种方式获取到。（当然这里用个坑啊，因为我一开是用的button标签从而导致浏览器默认它的类型是submit从而我一点击的时候它就会默认提交表单，所以我们要换成input标签）当然我们应该有个事件对这些元素进行基本操作，我们想一下，我们经常在百度的时候我们边打字其下的下拉列表框会有时会出现我们在文本框中搜索的关键字。当然用onkeyup(键盘抬起事件)，在这个事件中，我们首先获取的是文本框的值，其次我们要创建一个script标签，（为什么要创建script标签呢？因为script的标签有src，当然你也可以使用Img但是已经没有很多人用Img标签）xhr浏览器回拦截，不允许跨域。接着将script标签的src拼接到我们需要搜索的值，向页面中插入我们创建的标签，当然还是要删掉这个标签（要不然就会很多script标签）这里我们是执行完回调函数才删除script标签的。

javascript

let search = document.getElementById('text');
    let btn = document.getElementById('btn');
    let ul = document.getElementsByTagName('ul')[0];
    let show = document.getElementById('show');
    search.onkeydown = ()=>{
      let value = search.value;
      let script= document.createElement('script');
      script.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+value+'&cb=jsonp';
      document.body.appendChild(script);
      document.body.removeChild(script);
    }
    function jsonp(arg){
      let data = arg.s;
      ul.innerHTML = '';
      if(data.length)
      {
          show.style.display = 'block';
          data.forEach((el,index) => {
          let li = document.createElement('li');
          li.innerHTML = el;
          ul.appendChild(li);
          li.onclick = ()=>
          {
            window.location.href = 'https://www.baidu.com/s?wd='+el;
          }
        });
      }else{
        show.style.display = 'none';
      }
    }

cors

cors实现跨域，它允许浏览器向跨源浏览器发出XMLHttpRequest请求，从而克服了只能同源使用的限制。