回覆“前端”即可獲贈前端相關學習資料
大家好，我進階學習者。
一、前言
小編之前帶着大家一起做過一個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.gif(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');})}}
最後我們就來將輸出的結果顯示出來，如下：
$('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腳本進而可以利用它來訪問百度的搜索服務，可能說的有點繞口，不過這個的確就是前端跨域的一種很有效的解決方式。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點贊，留言，轉發，轉載，感謝大家的相伴與支持
想加入前端學習羣請在後臺回覆【入羣】
萬水千山總是情，點個【在看】行不行
本文分享自微信公衆號 - 前端進階學習交流（gh_cf4e462f0835）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。