一个小例子学习JSONP的基本使用

在JavaScript中Ajax是无法跨域的，当协议或者域名或者端口任一不同时，都会出现跨域，跨域处理的其中一种方案就是JSONP。今天就利用百度的一个JSONP接口来实现一个仿百度首页。

怎么去使用jsonp？

在JS中，src属性是没有同源策略限制的，所以通过src属性来实现跨域请求，jsonp的原理就是在src接口调用一个函数，在代码里定义这个函数，我们来看一下百度接口
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=百度&cb=getData
wb=后面跟上要查找的内容，cb=后面写函数名字，上面的地址输入到地址栏结果如下：

getData({q:"百度",p:false,s:["百度云盘","百度翻译","百度地图","百度杀毒","百度卫士","百度学术","百度文库","百度音乐","百度外卖","百度指数"]});
//可以看到getData是我们定义的函数名字，参数是一个对象，也就是说这个接口是一个函数的调用

那么我们可以在代码里先定义这个函数的内容，再通过script的src去引入这个地址，就等于调用了一个函数，参数就是我们要处理的数据；
那么现在来实现一下：

//html 代码 样式自己定义
<div id="show"></div>
<div id="div">
    <input type="text" id="search" >
    <a href="#" id="baidu">百度一下</a>
</div>

Paste_Image.png

//js代码
window.onload = function(){
            var search = document.getElementById('search');
            //获取搜索框
            //百度一下按钮
            var baidu = document.getElementById('baidu');           
            baidu.onclick = function () {
                // location.href = "https://www.baidu.com/s?wd="+search.value;
                // 新窗口打开
                window.open("https://www.baidu.com/s?wd="+search.value);
            }
            search.onkeyup = function(){
                //每次键盘抬起获取输入框内容,抬起的时候需要调用那个接口执行getData函数
                //所以每次去动态生成script标签，src定义为接口地址，这样就等于执行了一个名字叫getData的函数
                var val = search.value;
                var script = document.createElement('script');
                script.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + val + "&cb=getData";//引入js地址,cb=此处函数名字可以随便取，与自己定义的函数名相同即可
                script.id = 'import';
                document.body.appendChild(script);//把script加入到页面中
            }
        }
//然后定义getData函数怎么去实现对数据处理
function getData(data){
    var showDiv = document.getElementById('show');//显示搜索词条div
    //下面这个script是需要对添加的script标签进行处理
    var script = document.getElementById('import');//导入的js
    script.parentNode.removeChild(script);//移除导入的js
    var ul = document.createElement('ul');//创建一个ul
    showDiv.innerHTML = "";//每次调用函数先把显示内容清空
    for(var i=0;i<data.s.length;i++){//循环导入src接口里面的词条
        var li = document.createElement('li');//动态创建li
        li.innerHTML = data.s[i];//li的内容是src里的s
        ul.appendChild(li);
    }
    show.appendChild(ul);
    //给每个词条li加点击事件
    var aLi = document.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
      aLi[i].onclick = function () {
          location.href = "https://www.baidu.com/s?wd="+this.innerHTML;
          // 新窗口打开链接
          // window.open("https://www.baidu.com/s?wd="+this.innerHTML);
         }
    }
}```
至此，就完成了一个基础的JSONP调用