ajax跨域?qū)崿F(xiàn)某度搜索提示功能

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的倉山網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

src="/upload/pic20/1-210FQ55P62X.png" />

總所周知，為了提提高用戶體驗(yàn)度，某度搜索引擎在用戶通過輸入框進(jìn)行關(guān)鍵詞搜索的時候，會根據(jù)用戶輸入的關(guān)鍵詞來匹配出常用的關(guān)鍵詞出來以供用戶選擇，比如搜索建站公司這個詞的時候，會有這樣的效果：

這就是某度搜索提示的功能，看上去是一個小功能，實(shí)際上涵蓋的東西還是挺多的；其中實(shí)現(xiàn)的原理：就是用戶通過-輸入關(guān)鍵詞-這樣一個鍵盤事件來觸發(fā)ajax請求，通過ajxa發(fā)送到某度數(shù)據(jù)庫中，返回出用戶常用相匹配的關(guān)鍵詞給前臺瀏覽器，呈現(xiàn)出在頁面不刷新的情況下；給用戶一種比較好的搜索體驗(yàn)度；我們都知道ajxa最大的好處就是可以在不刷新頁面的情況下就可以直接獲取數(shù)據(jù)，這種體驗(yàn)是非常友好的，某種程度上給我們省了很多麻煩。那么，上面的這個功能怎么實(shí)現(xiàn)呢，下面，建站公司小編就帶大家來實(shí)現(xiàn)。



首先，我們需要了解ajxa的一個基本使用方法：如圖：




使用ajax的時候，需要幾個基本的參數(shù)：type：服務(wù)器請求方式；默認(rèn)情況下為get；url：需要發(fā)送數(shù)據(jù)請求的網(wǎng)址；dataType：服務(wù)器返回的數(shù)據(jù)格式；data：發(fā)送請求需要傳遞的數(shù)據(jù)；success()方法：請求成功的處理函數(shù)；error()函數(shù)：請求失敗的處理函數(shù)；如果要實(shí)現(xiàn)某度搜索提示的功能，因?yàn)閡rl沒有現(xiàn)成的內(nèi)容，并且隨著時間的變化，這個URL還不一定一直是不變的(僅僅是筆者的猜測)；所以URL是自己通過瀏覽器分析得到一些線索：

通過搜索不同的關(guān)鍵詞，我們可以發(fā)現(xiàn)，某度搜索引擎在鼠標(biāo)按下的瞬間就會觸發(fā)ajax請求，并且請求的url有些地方是相同的，有些則是不同的，從圖中我們可以分析下參數(shù)：ie：返回結(jié)果數(shù)據(jù)編碼；from：瀏覽器類型(pc端/手機(jī)端);wd：輸入的關(guān)鍵詞；cb：處理返回結(jié)果集的函數(shù)名對應(yīng)的參數(shù)名；JQuery.....那一串則是處理返回結(jié)果集的函數(shù)名；并且這個函數(shù)名是有ajxa系統(tǒng)自動生成的；為什么需要這么處理呢？在ajax跨域處理的時候，就會使用js動態(tài)創(chuàng)建script標(biāo)簽，通過引入外部js數(shù)據(jù)處理文件來實(shí)現(xiàn)跨域的問題；這樣一想，某度官方也是同意外部人員來使用這個接口的吧。其它的參數(shù)，因?yàn)椴幻靼资裁淳筒灰灰唤忉屃耍?，通過搜索不同的關(guān)鍵詞發(fā)現(xiàn)，這些參數(shù)基本都是一樣的；因?yàn)橥ㄟ^上面的分析我們就可以得到這個url了：【http://muchs.cn/sugrec?ie=utf-8&prod=pc&wd=成都做網(wǎng)站&yy=xxx】；有了url，我們就可以開始實(shí)現(xiàn)了，對于跨域問題，大家就自行某度搜索一下吧。下面就直接上代碼了；同時，代碼中還設(shè)計(jì)到了騰訊開發(fā)的：artTemplae;有興趣的朋友可以網(wǎng)上了解一下；



HTML部分：

HTML部分比較簡單，一個輸入框，一個顯示結(jié)果的div。



css部分：

css也比較簡單，讓頁面看起來比較舒服些。



JS部分：

JS部分包括了事件處理，數(shù)據(jù)處理，模版定義和內(nèi)容的渲染；通過鍵盤keyup事件來獲取輸入的關(guān)鍵詞，然后通過發(fā)送ajxa請求來獲取數(shù)據(jù)；再通過template綁定好數(shù)據(jù)到定義好的模版里，最后渲染數(shù)據(jù)到顯示結(jié)果的div里。



效果展示：

標(biāo)題名稱：ajax跨域?qū)崿F(xiàn)某度搜索提示功能
文章網(wǎng)址：http://muchs.cn/article40/spdheo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、App開發(fā)、企業(yè)網(wǎng)站制作、全網(wǎng)營銷推廣、動態(tài)網(wǎng)站、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計(jì)公司