武汉网站建设
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:

网站开发 网站建设 建网站
热门城市网站建设
湖北网站建设 武汉网站建设 黄石网站建设 十堰网站建设 宜昌网站建设 襄樊网站建设 鄂州网站建设 荆门网站建设 孝感网站建设 荆州网站建设 黄冈网站建设 咸宁网站建设 随州网站建设 广水网站建设 恩施网站建设 仙桃网站建设 潜江网站建设 天门网站建设 北京网站建设 东城网站建设 西城网站建设 崇文网站建设 宣武网站建设 朝阳网站建设 丰台网站建设 石景山网站建设 海淀网站建设 门头沟网站建设 房山网站建设 通州网站建设 顺义网站建设 昌平网站建设 大兴网站建设 怀柔网站建设 平谷网站建设 密云网站建设 延庆网站建设 上海网站建设 黄浦网站建设 卢湾网站建设 徐汇网站建设 长宁网站建设 静安网站建设 普陀网站建设 闸北网站建设 虹口网站建设 杨浦网站建设 闵行网站建设 宝山网站建设 嘉定网站建设 浦东新网站建设 金山网站建设 松江网站建设 青浦网站建设 南汇网站建设 奉贤网站建设 崇明网站建设 广东网站建设 广州网站建设 韶关网站建设 深圳网站建设 珠海网站建设 汕头网站建设 佛山网站建设 江门网站建设 湛江网站建设 茂名网站建设 肇庆网站建设 惠州网站建设 梅州网站建设 汕尾网站建设 河源网站建设 阳江网站建设 清远网站建设 东莞网站建设 中山网站建设 潮州网站建设 揭阳网站建设 云浮网站建设 湖南网站建设 长沙网站建设 株洲网站建设 湘潭网站建设 衡阳网站建设 邵阳网站建设 岳阳网站建设 常德网站建设 张家界网站建设 益阳网站建设 郴州网站建设 永州网站建设 怀化网站建设 娄底网站建设 湘西网站建设 安徽网站建设 合肥网站建设 亳州网站建设 芜湖网站建设 马鞍山网站建设 池州网站建设 黄山网站建设 滁州网站建设 安庆网站建设 淮南网站建设 淮北网站建设 蚌埠网站建设 宿州网站建设 宣城网站建设 六安网站建设 阜阳网站建设 铜陵网站建设 明光网站建设 天长网站建设 宁国网站建设 界首网站建设 桐城网站建设 潜山网站建设
本网站所刊载信息,不代表盈科互动观点,部分信息及数据来源于互联网,如果侵犯您的权益,请速与我们联系。
Copyright © 2006- 盈科动力(vikasp.net) 版权所有-鄂ICP备13002765号-1技术支持:武汉网站建设

在线
客服

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

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

电话
咨询

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

136-2726-6633
项目经理手机

微信
咨询

加微信获取报价
顶部