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跨域实现某度搜索提示功能
文章网址：https://www.cdcxhl.com/article40/spdheo.html

成都网站建设公司_创新互联，为您提供定制开发、App开发、企业网站制作、全网营销推广、动态网站、云服务器

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容