jsonp跨域，原生js和ajax实现百度，360，必应等浏览器搜索框的智能补全提示技术，带搜索功能的搜索框

最新推荐文章于 2021-06-04 19:25:31 发布

dream_reason

最新推荐文章于 2021-06-04 19:25:31 发布

阅读量528

点赞数

分类专栏：小demo 文章标签： js javascript ajax jsonp

本文链接：https://blog.csdn.net/liu893100/article/details/105718429

版权

小demo 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

相信许多刚学前端的的同学，都曾对浏览器搜索框自动提示提示的功能挺好奇的，接下让我们一起揭露他的神秘面纱吧！
相信学过javascript的同学都引用过外部的JavaScript吧！，其实跨域就是动态的创建script标签，将script标签url的内容渲染到指定的页面。下面我们将以百度搜索框为例，进行讲解。
第一种方法，jsonp原理，动态生成script标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .search_box{
  width: 500px;
  position: absolute;
  top: 180px;
  left: 460px;
 }
 .search_box #text{
  width: 450px;
  height: 48px;
  box-sizing: border-box;
  transition: width 1.5s;
  margin: 0 auto;
  padding: auto;
  position: relative;
  border: 1px solid rgba(0,0,0,0.6);
  background-color:rgba(0,0,0,0.6);
  border-radius: 20px;
  text-align: center;
  color: rgba(256,256,256,0.9);
}
.search_box #search{
  width: 450px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
}
.search_box #search li{
  line-height: 25px;
  color: #fff;
  background-color:rgba(0,0,0,0.3);
  cursor: pointer;
}
.search_box #search :first-child{
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}
.search_box #search :last-child{
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
.search_box #search li:hover{
  background:rgba(0,0,0,1);
}
.search_box .li1{
  text-indent: 4px;
}
    </style>
</head>
<body>
    <div class="search_box">
        <input type="text" name="text" id="text" value="" placeholder="search"/>
        <ul id="search">
    </ul>
</div>
    <script>
         var ose,lis,li_list;
    var otext = document.getElementById("text"); 
    ose = document.querySelector("#search");  
    lis = document.getElementsByClassName("li1");  // 获取所有的li
    otext.onkeyup = function(){ // 当在input框中键盘弹起发生事件
        if(!otext.value) {   // 判断是否输入了内容,如果无内容，提示框则不展开，也不进行下面的指令
            ose.style.display = 'none'
            return
        }
        ose.style.display = 'block'  
        var osc = document.createElement("script");  // 创建一个script标签
        osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=liu";
        // 将srcipt的src设置为百度提供的Api,然后动态的将文本框内容拼接到url,自定义回调函数处理返回的数据
        // 将创建好的script标签引入到body中
        document.body.appendChild(osc);
        // 监听input框的回车事件，进行页面的跳转
        if(event.keyCode==13){
            // 进行百度搜索跳转
            window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
        }
    }
    // 回调函数处理返回的数据
    function liu(json){
        ose.innerHTML = '' // 清空上一次数据
         // json长度的初始值
//        console.log(json.s);  打印json数据中的所有数据
        for(var i=0;i<10;i++){// 自己定义循环的次数，获取几条数据，这里以10条为例
          var getli = document.createElement('li') // 动态创建p标签
              getli.innerHTML = json.s[i]; // 将返回的数据赋值给p标签
              ose.appendChild(getli) // 将动态生成的p标签添加到提示框中
        }
        li_list = document.getElementById("search").getElementsByTagName("li")
       for(i=0;i<10;i++){
        li_list[i].onclick=function(){ // 为每一个li注册点击事件
           otext.value = this.innerHTML; 
           window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
       }
    }
    
    }
    
    /*单击body中的任意地方隐藏li*/
    document.body.onclick = function(){
        ose.style.display = "none";
    }
   
    </script>
</body>
</html>

效果如下：
在这里插入图片描述
第二种方法，原生js封装请求代码如下：

   if (window.XMLHttpRequest) {
      //主流浏览器提供了XMLHttpRequest对象
      return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      //低版本的IE浏览器没有提供XMLHttpRequest对象
      //所以必须使用IE浏览器的特定实现ActiveXObject
      return new ActiveXObject("Microsoft.XMLHttpRequest");
  }
 
   };
   var xhr = getXmlHttpRequest();
   xhr.onreadystatechange = function() {
    console.log(xhr.readyState);
    if (xhr.readyState === 4 && xhr.status === 200) {
      //获取成功后执行操作
      //数据在xhr.responseText
      var resJson = JSON.parse(xhr.responseText)
     cb(resJson);
    }
   };
  xhr.open("get", uri, true);

第三种ajax方法：
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>


</head>
<body>
 
        请输入：<input list="languageList" id="value" type="text" />
        <ul class="list">

        </ul>
        <script>
            /*设置监听事件，向输入框中输入内容，当键盘按键弹起的时候，将输入的内容作为参数传入到函数info中*/
            $("#value").bind("keyup",function(event){
                /*当键盘按下上下键的时候，不进行监听，否则会与keyup事件起冲突*/
                if(event.keyCode == 38 || event.keyCode == 40){
                    return false;
                }
                var value = $("#value").val();
                    info(value);
            })
            /*将ajax封装到函数中*/
            function info(value){
                /*百度搜索框智能提示的接口*/
                var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
                /*需要传入的参数，cb是callback的缩写*/
                var data = {
                    wd : value,
                    cb : "liu"
                }
                /*因为涉及跨域，这里使用jsonp*/
                $.ajax({
                    url : url,
                    data : data,
                    type : "GET",
                    dataType : "jsonp",
                    jsonpCallback : "liu",
                    success : function (result){
                        var a = result.s;
                        a.forEach(function(data){
                         var lis=$("<li><li>");
                            lis.html(data)
                         $(".list").append( lis)
                        
                        })
                       
                    },
                   
                    error : function(el){
                        console.log(el);
                    }
                })
            }
        </script>
</body>
</html>

分享一些我以前抓过的api接口
必应的请求URL为：http://api.bing.com/qsonhs.aspx?type=cb&cb=callback&q=" + 内容
360的请求URL为：https://sug.so.360.cn/suggest
百度音乐URL：http://tingapi.ting.baidu.com/v1/restserver/ting
搜索要传入 method:“baidu.ting.search.catalogSug”,
其他的yaochua
酷狗音乐：https://wwwapi.kugou.com/yy/index.php

dream_reason

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jsonp跨域，原生js和ajax实现百度，360，必应等浏览器搜索框的智能补全提示技术，带搜索功能的搜索框

相信许多刚学前端的的同学，都曾对浏览器搜索框自动提示提示的功能挺好奇的，接下让我们一起揭露他的神秘面纱吧！相信学过javascript的同学都引用过外部的JavaScript吧！，其实跨域就是动态的创建script标签，将script标签url的内容渲染到指定的页面。下面我们将以百度搜索框为例，进行讲解。第一种方法，jsonp原理，动态生成script标签<!DOCTYPE html&...
复制链接

扫一扫