點擊上方“前端進階學習交流”關注

回復“前端”即可領取前端相關學習資料

現(xiàn)在

天

雞

湯

剩下的人在塵埃中流下淚水，向南望去，又要見王石一年。

大家好，我是一名高級學習者。一、前言

小編之前帶領大家搭建了一個版本的搜索引擎，今天我就帶領大家搭建一個版本的搜索引擎。

2、準備工具

360瀏覽器sublime text函數(shù)跳轉，文字3編輯器，就這些了。

3. 取得成果

我們看一下執(zhí)行結果，如圖：

我們只需要輸入關鍵詞，就會出現(xiàn)對應的10條匹配結果。如果我們點擊其中一個結果，就會跳轉到對應的百度搜索界面。

四、項目實現(xiàn)流程 1、找到百度搜索的元素節(jié)點并查詢

因為我們使用百度作為搜索關鍵詞的媒介，所以我們必須了解百度的搜索和查詢元素是如何分布的。打開百度，按F12，如圖：

這里的箭頭標記了他們的關系。

2. 發(fā)送搜索查詢請求并查找模式

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

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

3. 策略和jsonp跨域

之所以講這兩個知識點，是因為我們的搜索引擎是基于這兩個知識點進化而來的。同源策略是瀏覽器最核心、最基本的安全功能。如果缺少同源策略，瀏覽設備的正常功能可能會受到影響。同源是指協(xié)議、域名、端口都相同；而jsonp是跨域的方式，可以減少服務器的負載，但是只支持get請求。

4.查詢結果

當我們輸入查詢關鍵字后，我們還需要獲取待處理的選項。這里我們需要找出查詢選項是什么，如圖：

5. 實現(xiàn)代碼

我們可以先創(chuàng)建一個可以動態(tài)生成代碼的函數(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){
       $('
+item.q+'">'+item.q+'
').appendTo('ol');             })     }  }

最后我們將輸出結果顯示出來sublime text函數(shù)跳轉，如下：

   $('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代碼來讓效果更好。

5. 總結

本文主要講一下如何動態(tài)生成腳本并使用它來訪問百度的搜索服務。可能有點繞，但這確實是一個非常有效的前端跨域解決方案。

如有侵權請聯(lián)系刪除！