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

成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的仓山网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

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

总所周知,为了提提高用户体验度,某度搜索引擎在用户通过输入框进行关键词搜索的时候,会根据用户输入的关键词来匹配出常用的关键词出来以供用户选择,比如搜索建站公司这个词的时候,会有这样的效果:

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



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




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

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



HTML部分:

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



css部分:

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



JS部分:

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



效果展示:
分享文章:ajax跨域实现某度搜索提示功能
网站路径:http://cdiso.cn/article/spdheo.html

其他资讯