武汉网站建设
NEWS
新闻观点

ajax跨域实现百度搜索提示功能

作者:网站开发武汉 | 浏览量: | 来源:武汉网站建站公司 | 更新时间:2021-07-08 | 当前栏目:武汉网站建设
       总所周知,为了提提高用户体验度,百度搜索引擎在用户通过输入框进行关键词搜索的时候,会根据用户输入的关键词来匹配出常用的关键词出来以供用户选择,比如搜索建站公司这个词的时候,会有这样的效果:
百度搜索建站公司提示效果

       这就是百度搜索提示的功能,看上去是一个小功能,实际上涵盖的东西还是挺多的;其中实现的原理:就是用户通过-输入关键词-这样一个键盘事件来触发ajax请求,通过ajxa发送到百度数据库中,返回出用户常用相匹配的关键词给前台浏览器,呈现出在页面不刷新的情况下;给用户一种比较好的搜索体验度;我们都知道ajxa最大的好处就是可以在不刷新页面的情况下就可以直接获取数据,这种体验是非常友好的,某种程度上给我们省了很多麻烦。那么,上面的这个功能怎么实现呢,下面,建站公司小编就带大家来实现。

首先,我们需要了解ajxa的一个基本使用方法:如图:

ajax基本使用方法

       使用ajax的时候,需要几个基本的参数:type:服务器请求方式;默认情况下为get;url:需要发送数据请求的网址;dataType:服务器返回的数据格式;data:发送请求需要传递的数据;success()方法:请求成功的处理函数;error()函数:请求失败的处理函数;如果要实现百度搜索提示的功能,因为url没有现成的内容,并且随着时间的变化,这个URL还不一定一直是不变的(仅仅是笔者的猜测);所以URL是自己通过浏览器分析得到一些线索:

ajxa数据请求url
ajxa数据请求分析

       通过搜索不同的关键词,我们可以发现,百度搜索引擎在鼠标按下的瞬间就会触发ajax请求,并且请求的url有些地方是相同的,有些则是不同的,从图中我们可以分析下参数:ie:返回结果数据编码;from:浏览器类型(pc端/手机端);wd:输入的关键词;cb:处理返回结果集的函数名对应的参数名;JQuery.....那一串则是处理返回结果集的函数名;并且这个函数名是有ajxa系统自动生成的;为什么需要这么处理呢?在ajax跨域处理的时候,就会使用js动态创建script标签,通过引入外部js数据处理文件来实现跨域的问题;这样一想,百度官方也是同意外部人员来使用这个接口的吧。其它的参数,因为不明白什么就不一一解释了,但是,通过搜索不同的关键词发现,这些参数基本都是一样的;因为通过上面的分析我们就可以得到这个url了:【https://www.baidu.com/sugrec?ie=utf-8&prod=pc&wd=武汉做网站&yy=xxx】;有了url,我们就可以开始实现了,对于跨域问题,大家就自行百度搜索一下吧。下面就直接上代码了;同时,代码中还设计到了腾讯开发的:artTemplae;有兴趣的朋友可以网上了解一下;

HTML部分:

HTML部分


HTML部分比较简单,一个输入框,一个显示结果的div。


css部分:

css部分


css也比较简单,让页面看起来比较舒服些。


JS部分:

js部分


JS部分包括了事件处理,数据处理,模版定义和内容的渲染;通过键盘keyup事件来获取输入的关键词,然后通过发送ajxa请求来获取数据;再通过template绑定好数据到定义好的模版里,最后渲染数据到显示结果的div里。

效果展示:

效果展示


最后测试了一下;通过搜索建站公司这个关键词得到了效果图,和在百度里搜索的截图是一致,ajax跨域实现百度搜索提示的功能就算完成了。

温馨提示:

1、凡本网注明“来源:***(非盈科互动)”的作品,均转载自其它媒体,转载目的在于传递更多的信息,并不代表本网赞同其观点和对其真实性负责。

2、如因作品内容、版权和其它问题需要同本网联系的,请在30日内进行。

征稿启事:

为了更好的发挥盈科互动新闻资讯平台价值,促进诸位自身发展以及业务拓展,更好地为企业及个人提供服务,盈科互动诚征各类稿件,欢迎实力来稿。

文章TAG:

网站建设 建网站 网站开发
热门城市网站建设
浠水网站建设 通城网站建设 蔡甸网站建设 长阳网站建设 通山网站建设 沙市网站建设 赤壁网站建设 咸丰网站建设 江汉网站建设 沙洋网站建设 钟祥网站建设 谷城网站建设 洪湖网站建设 铁山网站建设 江夏网站建设 襄城网站建设 罗田网站建设 南漳网站建设 点军网站建设 兴山网站建设 秭归网站建设 云梦网站建设 洪山网站建设 石首网站建设 京山网站建设 华容网站建设 利川网站建设 孝南网站建设 黄梅网站建设 东西湖网站建设 萝岗网站建设 白云网站建设 浈江网站建设 宝安网站建设 福田网站建设 罗湖网站建设 仁化网站建设 番禺网站建设 龙岗网站建设 潮南网站建设 金平网站建设 曲江网站建设 荔湾网站建设 从化网站建设 始兴网站建设 澄海网站建设 花都网站建设 天河网站建设 海珠网站建设 乐昌网站建设 潮阳网站建设 新丰网站建设 金湾网站建设 光明新网站建设 南海网站建设 乳源网站建设 龙华新网站建设 顺德网站建设 黄埔网站建设 盐田网站建设 麻阳网站建设 韶山网站建设 华容网站建设 临澧网站建设 汉寿网站建设 醴陵网站建设 北湖网站建设 鹤城网站建设 资阳网站建设 雨湖网站建设 慈利网站建设 临武网站建设 涟源网站建设 永兴网站建设 天元网站建设 绥宁网站建设 辰溪网站建设 宁远网站建设 鼎城网站建设 宁乡网站建设 邵东网站建设 邵阳网站建设 东安网站建设 岳塘网站建设 芦淞网站建设 沅陵网站建设 会同网站建设 炎陵网站建设 安乡网站建设 珠晖网站建设
首页 | 网站建设 | 微信开发 | H5制作 | 网络营销 | 案例展示 | 新闻中心 | 文字版官网| 米拓模版标签在线手册
136-2726-6633 / 027-82756-772

地址:武汉市解放大道1328号中原大厦1806室

E-mail:wuhan1806@163.com;QQ:6686935

本网站所刊载信息,不代表盈科互动观点,部分信息及数据来源于互联网,如果侵犯您的权益,请速与我们联系。
Copyright © 2006- 盈科动力(vikasp.net) 版权所有-鄂ICP备13002765号-1技术支持:武汉网站建设

在线
客服

技术在线服务时间:9:00-20:00

在盈科,您对接的直接是技术员,而非客服传话!

电话
咨询

027-8275-6772
7*24小时客服热线

136-2726-6633
项目经理手机

微信
咨询

加微信获取报价
顶部