日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

一、前言

小編之前帶著大家一起做過一個python版的搜索引擎，今天帶大家做一個JavaScript版的搜索引擎。

創(chuàng)新互聯(lián)是一家專業(yè)提供民和企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站設計、成都做網(wǎng)站、H5網(wǎng)站設計、小程序制作等業(yè)務。10年已為民和眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡公司優(yōu)惠進行中。

二、準備工具

360瀏覽器，sublime text 3編輯器，僅此而已。

三、實現(xiàn)結(jié)果

我們來看下實現(xiàn)結(jié)果，如圖：

我們只需要輸入關鍵字即可出現(xiàn)相應10條匹配結(jié)果，如果我們點擊其中一條結(jié)果，則會跳轉(zhuǎn)到對應的百度搜索界面。

四、項目實現(xiàn)過程

1.找到百度的搜索和查詢的元素節(jié)點

因為我們是使用百度為媒介來進行關鍵字的搜索，因此我們必須了解百度的搜索和查詢的元素是怎么分布的，打開百度，按下F12，如圖：

這里的箭頭處就是標注的它們的關系。

2.發(fā)送搜索查詢請求，找規(guī)律

我們來進行一次關鍵字查詢，如圖：

這樣我們就知道了這個網(wǎng)頁地址是我們請求后的最終地址，所以我們要將這個地址保存好。

3.同源策略和jsonp跨域

之所以講這兩個知識點，是因為我們的搜索引擎就是根據(jù)這兩個知識點演變而來，同源策略是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。同源指的是協(xié)議、域名、端口全都相同;而jsonp則是一種跨域方式，它可以減輕服務器的負載，但是它只支持get請求。

4.查詢結(jié)果

我們輸入查詢關鍵詞后，還要獲取到它有哪些待定的選項，這里就要搞清楚查詢選項有哪些，如圖：

5.實現(xiàn)代碼

我們可以先創(chuàng)建一個能夠動態(tài)生成JavaScript代碼的函數(shù)，如下：

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);
  }

然后我們再獲取到它的數(shù)據(jù)，如下：

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){

       $('
       
      })
     }
  }

最后我們就來將輸出的結(jié)果顯示出來，如下：

$('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代碼，可以將效果寫的更棒。

五、總結(jié)

本篇文章主要講的就是如何使用JavaScript動態(tài)生成一個JavaScript腳本進而可以利用它來訪問百度的搜索服務，可能說的有點繞口，不過這個的確就是前端跨域的一種很有效的解決方式。