[[419159]]

大家好，我進(jìn)階學(xué)習(xí)者。

一、前言

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

二、準(zhǔn)備工具

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

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

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

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

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

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

因?yàn)槲覀兪鞘褂冒俣葹槊浇閬磉M(jìn)行關(guān)鍵字的搜索，因此我們必須了解百度的搜索和查詢的元素是怎么分布的，打開百度，按下F12，如圖：

這里的箭頭處就是標(biāo)注的它們的關(guān)系。

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

我們來進(jìn)行一次關(guān)鍵字查詢，如圖：

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

3.同源策略和jsonp跨域

之所以講這兩個知識點(diǎn)，是因?yàn)槲覀兊乃阉饕婢褪歉鶕?jù)這兩個知識點(diǎn)演變而來，同源策略是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。同源指的是協(xié)議、域名、端口全都相同;而jsonp則是一種跨域方式，它可以減輕服務(wù)器的負(fù)載，但是它只支持get請求。

4.查詢結(jié)果

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

5.實(shí)現(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){ 
 
       $('<li><a target="_blank" href ="https://www.baidu.com/s?wd='+item.q+'">'+item.q+'</a></li>').appendTo('ol'); 
        
      }) 
     } 
  } 

最后我們就來將輸出的結(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腳本進(jìn)而可以利用它來訪問百度的搜索服務(wù)，可能說的有點(diǎn)繞口，不過這個的確就是前端跨域的一種很有效的解決方式。