服务器之家

服务器之家 > 正文

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

时间:2021-08-24 23:24     来源/作者:前端进阶学习交流

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

大家好,我进阶学习者。

一、前言

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

二、准备工具

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

三、实现结果

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

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

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

四、项目实现过程

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

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

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

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

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

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

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

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

3.同源策略和jsonp跨域

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

4.查询结果

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

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

5.实现代码

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

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

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

  1. function getData(data){ 
  2.       var script=document.querySelector('#jsonp'); 
  3.       script.parentNode.removeChild(script); 
  4.       $('ol').html(''); 
  5.       var da=data.g 
  6.    if(da){ 
  7.     da.forEach(function(item,index){ 
  8.  
  9.        $('<li><a target="_blank" href ="https://www.baidu.com/s?wd='+item.q+'">'+item.q+'</a></li>').appendTo('ol'); 
  10.         
  11.       }) 
  12.      } 
  13.   } 

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

  1. $('input:text').keyup(function(){ 
  2.      var wd=$(this).val(); 
  3.      if(wd==''){ 
  4.          $('ol').css('display','none'); 
  5.          $('ol').css('zIndex',-10); 
  6.       }else
  7.          $('ol').css('display','block'); 
  8.       $('ol').css('zIndex',20); 
  9.       } 
  10.         getlist(wd); 
  11.   }); 

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

五、总结

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

原文链接:https://mp.weixin.qq.com/s/n7V70phBU6fyaGKP5qyvVw

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部