武汉网站建设
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了:【http://www.sizzup.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
项目经理手机

微信
咨询

加微信获取报价
顶部
国产99视频精品免视看9_中国护士毛茸茸性_波多野结衣在线播放_市长含着秘书的奶头