文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

手把手教你用JavaScript打造一个网页搜索引擎

2024-11-28 15:29

关注

小编之前带着大家一起做过一个python版的搜索引擎,今天带大家做一个JavaScript版的搜索引擎。

二、准备工具

360浏览器,sublime text 3编辑器,仅此而已。

三、实现结果

我们来看下实现结果,如图:

我们只需要输入关键字即可出现相应10条匹配结果,如果我们点击其中一条结果,则会跳转到对应的百度搜索界面。

四、项目实现过程

1.找到百度的搜索和查询的元素节点

因为我们是使用百度为媒介来进行关键字的搜索,因此我们必须了解百度的搜索和查询的元素是怎么分布的,打开百度,按下F12,如图:

这里的箭头处就是标注的它们的关系。

2.发送搜索查询请求,找规律

我们来进行一次关键字查询,如图:

这样我们就知道了这个网页地址是我们请求后的最终地址,所以我们要将这个地址保存好。

3.同源策略和jsonp跨域

之所以讲这两个知识点,是因为我们的搜索引擎就是根据这两个知识点演变而来,同源策略是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。同源指的是协议、域名、端口全都相同;而jsonp则是一种跨域方式,它可以减轻服务器的负载,但是它只支持get请求。

4.查询结果

我们输入查询关键词后,还要获取到它有哪些待定的选项,这里就要搞清楚查询选项有哪些,如图:

5.实现代码

我们可以先创建一个能够动态生成JavaScript代码的函数,如下:

function getlist(wd){
    var script=document.createElement('script');
    script.id='jsonp';
    script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd;
    document.body.appendChild(script);
  }

然后我们再获取到它的数据,如下:

function getData(data){
      var script=document.querySelector('#jsonp');
      script.parentNode.removeChild(script);
      $('ol').html('');
      var da=data.g
   if(da){
    da.forEach(function(item,index){


       $('
  • '+item.q+'
  • ').appendTo('ol'); }) } }

    最后我们就来将输出的结果显示出来,如下:

    $('input:text').keyup(function(){
           var wd=$(this).val();
           if(wd==''){
               $('ol').css('display','none');
               $('ol').css('zIndex',-10);
            }else{
               $('ol').css('display','block');
            $('ol').css('zIndex',20);
            }
              getlist(wd);
        });

    然后我们再配合自己写的html和css代码,可以将效果写的更棒。

    五、总结

    本篇文章主要讲的就是如何使用JavaScript动态生成一个JavaScript脚本进而可以利用它来访问百度的搜索服务,可能说的有点绕口,不过这个的确就是前端跨域的一种很有效的解决方式。

    来源:前端进阶学习交流内容投诉

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 历年真题答案解析
    • 备考技巧名师总结
    • 高频考点精准押题
    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机
    位置:首页-资讯-后端开发
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯