【JSONP 笔记】模拟百度的下拉搜索框

宁阿宁阿宁

于 2022-04-17 09:05:53 发布

阅读量157

点赞数

分类专栏：前端学习笔记文章标签： ajax

本文链接：https://blog.csdn.net/JT61100/article/details/124224807

版权

前端学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JSONP原理

1、Web页面上用 <script> 引入 js 文件时则不受是否跨域的影响

（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如 <script>、<img>、<iframe>）

2、于是我们把数据放到服务器上，并且数据为 json 形式（因为 js 可以轻松处理 json 数据）

3、因为我们无法监控通过 <script> 的 src 属性是否把数据获取完成，所以我们需要做一个处理

4、实现定义好处理跨域获取数据的函数，如 function doJSON（data）{}

5、用 src 获取数据的时候添加一个参数 cb=‘doJSON’（服务端会根据参数 cb 的值返回对应的内容）此内容为以 cb 对应的值 doJSON 为函数真实要传递的数据为函数的参数的一串字符，如 doJSON（’数据‘）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSONP跨域搜索下拉框</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    div{
      width: 300px;
      height: 400px;
      border: 3px solid black;
      position: absolute;
      top: 100px;
      left: 100px;
    }
    input{
      width: 200px;
      height: 30px;
      position: relative;
      top: 50px;
      left: 50px;
    }
    ul{
      display: none;
      position: relative;
      top: 50px;
      left: 50px;
    }
    ul li{
      list-style: none;
      margin: 5px 10px;
    }
  </style>
</head>
<body>
  <div>
    <input type="text">
    <ul></ul>
  </div>

  <script>
    oInput = document.getElementsByTagName('input')[0];
    oUl = document.getElementsByTagName('ul')[0];
    oInput.onkeyup = function(){
      var keyword = oInput.value;
      var oScript = document.createElement('script');
      if(keyword){
        oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + keyword + '&cb=doJson';
        document.body.appendChild(oScript);
        oScript.remove;
      }else{
        oUl.style.display = 'none';
      }
    }
    function doJson(data) {
      console.log(data);
      var dataList = data.s;
      oUl.innerHTML = '';
      oUl.style.display = 'block';
      dataList.forEach(function(element,index){
        var oLi = document.createElement('li');
        var oA = document.createElement('a');
        oA.href = 'https://www.baidu.com/s?wd=' + element;
        oA.innerText = element;
        oLi.appendChild(oA);
        oUl.appendChild(oLi);
      });
    }
  </script>
</body>
</html>

宁阿宁阿宁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JSONP 笔记】模拟百度的下拉搜索框

JSONP原理1、Web页面上用 <script> 引入 js 文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如 <script>、<img>、<iframe>）2、于是我们把数据放到服务器上，并且数据为 json 形式（因为 js 可以轻松处理 json 数据）3、因为我们无法监控通过 <script> 的 src 属性是否把数据获取完成，所以我们需要做一个处理4、实现定义好处理跨域
复制链接

扫一扫

专栏目录