總所周知，為了提提高用戶體驗度，百度搜索引擎在用戶通過輸入框進行關鍵詞搜索的時候，會根據用戶輸入的關鍵詞來匹配出常用的關鍵詞出來以供用戶選擇，比如搜索
建站公司這個詞的時候，會有這樣的效果：
這就是百度搜索提示的功能，看上去是一個小功能，實際上涵蓋的東西還是挺多的；其中實現(xiàn)的原理：就是用戶通過-輸入關鍵詞-這樣一個鍵盤事件來觸發(fā)ajax請求，通過ajxa發(fā)送到百度數(shù)據庫中，返回出用戶常用相匹配的關鍵詞給前臺瀏覽器，呈現(xiàn)出在頁面不刷新的情況下；給用戶一種比較好的搜索體驗度；我們都知道ajxa最大的好處就是可以在不刷新頁面的情況下就可以直接獲取數(shù)據，這種體驗是非常友好的，某種程度上給我們省了很多麻煩。那么，上面的這個功能怎么實現(xiàn)呢，下面，
建站公司小編就帶大家來實現(xiàn)。
首先，我們需要了解ajxa的一個基本使用方法：如圖：
使用ajax的時候，需要幾個基本的參數(shù)：type：服務器請求方式；默認情況下為get；url：需要發(fā)送數(shù)據請求的網址；dataType：服務器返回的數(shù)據格式；data：發(fā)送請求需要傳遞的數(shù)據；success()方法：請求成功的處理函數(shù)；error()函數(shù)：請求失敗的處理函數(shù)；如果要實現(xiàn)百度搜索提示的功能，因為url沒有現(xiàn)成的內容，并且隨著時間的變化，這個URL還不一定一直是不變的(僅僅是筆者的猜測)；所以URL是自己通過瀏覽器分析得到一些線索：
通過搜索不同的關鍵詞，我們可以發(fā)現(xiàn)，百度搜索引擎在鼠標按下的瞬間就會觸發(fā)ajax請求，并且請求的url有些地方是相同的，有些則是不同的，從圖中我們可以分析下參數(shù)：ie：返回結果數(shù)據編碼；from：瀏覽器類型(pc端/手機端);wd：輸入的關鍵詞；cb：處理返回結果集的函數(shù)名對應的參數(shù)名；JQuery.....那一串則是處理返回結果集的函數(shù)名；并且這個函數(shù)名是有ajxa系統(tǒng)自動生成的；為什么需要這么處理呢？在ajax跨域處理的時候，就會使用js動態(tài)創(chuàng)建script標簽，通過引入外部js數(shù)據處理文件來實現(xiàn)跨域的問題；這樣一想，百度官方也是同意外部人員來使用這個接口的吧。其它的參數(shù)，因為不明白什么就不一一解釋了，但是，通過搜索不同的關鍵詞發(fā)現(xiàn)，這些參數(shù)基本都是一樣的；因為通過上面的分析我們就可以得到這個url了：【https://www.baidu.com/sugrec?ie=utf-8&prod=pc&wd=武漢做網站&yy=xxx】；有了url，我們就可以開始實現(xiàn)了，對于跨域問題，大家就自行百度搜索一下吧。下面就直接上代碼了；同時，代碼中還設計到了騰訊開發(fā)的：artTemplae;有興趣的朋友可以網上了解一下；
HTML部分：
HTML部分比較簡單，一個輸入框，一個顯示結果的div。
css部分：
css也比較簡單，讓頁面看起來比較舒服些。
JS部分：
JS部分包括了事件處理，數(shù)據處理，模版定義和內容的渲染；通過鍵盤keyup事件來獲取輸入的關鍵詞，然后通過發(fā)送ajxa請求來獲取數(shù)據；再通過template綁定好數(shù)據到定義好的模版里，最后渲染數(shù)據到顯示結果的div里。
效果展示：
最后測試了一下；通過搜索
建站公司這個關鍵詞得到了效果圖，和在百度里搜索的截圖是一致，ajax跨域實現(xiàn)百度搜索提示的功能就算完成了。
溫馨提示：
1、凡本網注明“來源：***（非盈科互動）”的作品，均轉載自其它媒體，轉載目的在于傳遞更多的信息，并不代表本網贊同其觀點和對其真實性負責。
2、如因作品內容、版權和其它問題需要同本網聯(lián)系的，請在30日內進行。
征稿啟事：
為了更好的發(fā)揮盈科互動新聞資訊平臺價值，促進諸位自身發(fā)展以及業(yè)務拓展，更好地為企業(yè)及個人提供服務，盈科互動誠征各類稿件，歡迎實力來稿。
文章TAG：
網站開發(fā)
網站建設
建網站
加微信獲取報價