搜索引擎优化入门与进阶( 一个JavaScript一个版的搜索引擎如何使用JavaScript动态生成一个代码)

　　搜索引擎优化入门与进阶(

一个JavaScript一个版的搜索引擎如何使用JavaScript动态生成一个代码)

　　大家好，我是进阶学习者。

　　一、前言

　　之前小编带大家搭建了一个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+'</a>').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脚本，然后使用它来访问百度的搜索服务。可能有点绕，但这确实是一个非常有效的前端跨域。解决方案。

　　【编辑推荐】

　　19岁“天才少年”自制CPU！1200个晶体管，手工马斯克发布机器人，“钢铁侠”实物！特斯拉推出全球超高速AI电脑Windows 11来了，它们还活着！盘点常青小软件Windows 11预览版更新！带你看Windows 11的新内置功能从不使用5G，为什么不买非5G手机呢？