JS实现类似于百度搜索引擎功能（jspon跨域）

最新推荐文章于 2023-06-29 20:36:27 发布

柠檬柚子1104

最新推荐文章于 2023-06-29 20:36:27 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签：百度搜索引擎 css

本文链接：https://blog.csdn.net/michelledai1104/article/details/119954175

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

首先测试百度接口

  <!-- 测试百度接口 -->
  <!-- <script src="https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34305,34099,33970,34273,34278,34004,34281,34107,34111,26350,22159&wd=爱奇艺&req=2&csor=2&cb=fn&_=1627023610785"></script> -->

打开百度搜索引擎
右击检查，切换到network，在输入框添加输入文字，得到请求URl
把***Request URL: https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=%E5%AE%B6%E5%8A%A1&p=3&cb=window.baidu_so_csdn_lenovo_callback&t=1630047424048***中的wd和cb改了
替换URL中的参数
在preview中可以看到回调函数的键值对

找到请求头
替换参数

得到返回的数据
最后结果

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
   
  </style>
</head>
<body>

  





  <script>
    /*
      搜索引擎
        + 能实现使用百度家的服务器, 是因为人家的服务器确实是按照 jsonp 的规则书写
        + 查看百度的搜索引擎接口
        + https://www.baidu.com/sugrec?
          pre=1&
          p=3&
          ie=utf-8&
          json=1&
          prod=pc&
          from=pc_web&
          sugsid=34305,34099,33970,34273,34278,34004,34281,34107,34111,26350,22159&
          wd=ab&
          req=2&
          csor=2&
          cb=jQuery1102019930028420068102_1627023610760&
          _=1627023610785
    */
  </script>

  <!-- <script>
    function fn(res) {
      console.log(res)
    }
  </script> -->


</body>
</html>

基本布局

<div class="box">
    <input type="text">
    <button>百度一下</button>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>

css代码


 * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 650px;
      height: 60px;
      border: 1px solid #333;
      position: relative;
      display: flex;

      margin: 50px auto;
    }

    input, button {
      outline: none;
      border: none;
    }

    .box > input {
      width: 450px;
      padding-left: 50px;
      line-height: 60px;
      font-size: 30px;
    }

    .box > button {
      flex: 1;
      font-size: 20px;
      cursor: pointer;
    }

    .box > ul {
      position: absolute;
      width: 650px;
      padding: 20px;
      box-sizing: border-box;
      border: 1px solid #333;
      border-top: none;
      top: 100%;
      left: 0;

      display: none;
    }

    .box > ul.active {
      display: block;
    }

    .box > ul > li {
      list-style: none;
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      cursor: pointer;
    }

    .box > ul > li:hover {
      background-color: #ccc;
      color: #fff;
    }

实现搜索引擎JS

 /*
      实现搜索引擎功能
    */

    const inp = document.querySelector('input')
    const ul = document.querySelector('ul')

    // 1. 绑定 input 事件
    inp.oninput = function () {
      // 2. 拿到输入的文本内容
      const text = this.value.trim()

      // 3. 发送请求请求数据了
      // 动态创建一个 script 标签
      const script = document.createElement('script')
      // 给 script 标签设置 src 属性
      script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34305,34099,33970,34273,34278,34004,34281,34107,34111,26350,22159&wd=${ text }&req=2&csor=2&cb=fn&_=1627023610785`



      // 把 script 标签插入到 body 里面
      document.body.appendChild(script)
      // 这个 script 标签插入到页面以后, 请求发送出去
      // 回来的时候, 一定会执行代码, script 标签已经没有用了
      script.remove()
    }

    // 把返回的函数定义在全局
    // 因为后端返回的是 'fn()' 这一段代码就是调用全局 fn 函数
    function fn(res) {
      // 4. 根据后端返回的 res 渲染页面
      // console.log(res)
      // 只有返回的 res 内有一个叫做 g 的数组存在的时候
      // 说明当前的关键字有相关的内容, 此时才渲染
      // 否则就不渲染了
      if (!res.g) {
        // 说明没有 g 这个数组
        ul.classList.remove('active')
        return
      }

      // 代码执行到这里, 说明有内容需要渲染
      let str = ''
      res.g.forEach(item => {
        str += `<li>${ item.q }</li>`
      })

      // 插入到 ul 内部
      ul.innerHTML = str

      // 让 ul 显示
      ul.classList.add('active')
    }

跨域请求（拓展1）

    + 我们需要请求非同源服务器的数据
    + 我们管这种请求叫做 跨域请求
    + 常见的跨域请求解决方案
      1. jsonp
      2. cors(跨域资源共享)
      3. proxy(代理)

jsonp 跨域方式（拓展2）

    + 是一个 ajax 技术没有关系的 跨域方式

  认识一下 script 标签 和 src 属性
    => 因为 src 属性只是标注引入一个外部资源的路径
    => script 标签默认会把你引入的所有内容当做 js 代码来执行
    => src 属性的特点
      -> src 属性是 W3C 标准给出专门用来引入外部资源的属性
      -> 浏览器不会去管 src 引入的内容是否是跨域的
      -> 浏览器的同源策略不管 src 属性

  jsonp 的实现方式
    + 利用 script 标签的 src 属性, 去请求一个 非同源的 服务器地址
    + 要求: 服务器给出的内容必须是一段合法的可以执行的 js 代码
    + 要求: 服务器给出的 js 代码需要是一个 '函数名(数据)' 的格式

柠檬柚子1104

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
JS实现类似于百度搜索引擎功能（jspon跨域）

首先测试百度接口  <!-- <script src="https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34305,34099,33970,34273,34278,34004,34281,34107,34111,26350,22159&wd=爱奇艺&req=2&
复制链接

扫一扫