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

一、前言

小編之前帶著大家一起做過一個(gè)python版的搜索引擎，今天帶大家做一個(gè)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)的百度搜索界面。

四、項(xià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)鍵字查詢，如圖：

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

3.同源策略和jsonp跨域

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

4.查詢結(jié)果

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

5.實(shí)現(xiàn)代碼

我們可以先創(chuàng)建一個(gè)能夠動態(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" +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)生成一個(gè)JavaScript腳本進(jìn)而可以利用它來訪問百度的搜索服務(wù)，可能說的有點(diǎn)繞口，不過這個(gè)的確就是前端跨域的一種很有效的解決方式。