业界动态
[转]怎么样把百度搜索引入自己的网站JS实现(附源代码)
2024-12-07 16:52
[转]怎么样把百度搜索引入自己的网站JS实现(附源代码) 自己的

from http://www.cnblogs.com/sufei/archive/2011/12/19/2293289.html

[转]怎么样把百度搜索引入自己的网站JS实现(附源代码)

大家都见过这种效果吧

怎么样把他引入到自己的网站里面呢?下面咱们一起来分析一下吧

使用Ie9的”开发工具“可可以轻松获取到,在你输入一个关键字时百度是怎么获取智能提示,就是相关的关键字的。

一起来看一下吧

大家可以清楚的看到在我们每次修改查询框时,百度就是发一个Ajax请求去调相应的数据

地址就是:http://suggestion.baidu.com/su?wd=博客&p=3&cb=window.bdsug.sug&t=1324271669786

大家不难看出来吧,wd=博客 这个博客 就是我输入的关键字,如果你想使用其它的关键字的话,只需要动太的修改wd的值就行了。

这时大家一定会这样想,我们是不是只要发一个Get请求,只要每次在我们自己的网站上查询时动态的发一个Ajax请求去访问这个地址就行了呢?是的,

但大家一个不要傻着去使用Http请求,因为这样的请求是从你的服务器发起的,当然百度肯定是会封你的。

我们需要怎么做才能避免这个问题呢?

那就只有一个方法了,使用Js,在客户端执行请求。因为Js是在客户端发起的,就算是百度封的话,那它封的是所有过量使用你网站的用户,相信百度不会傻到这点上吧。因为这样他们失去很多用户

所以这个方法应该 是成立的

但是大家都知道Js是不能跨越访问的,而百度又不可能给你跨越的接口,或者是权限,我们应该怎么办呢?

简单,我们上面也看到了,Baidu给我们的是一个Jsonp的数据格式,那么我们就可以直接使用Jsonp的方法去发起Ajax请求了,因为返回Jsop格式数据的JS是可以跨越访问的

大家一起来看下我的代码吧。

代码很简单大家一看应该就明白了,我只解释一下这句吧

wd是我们要输入的关键字。

p  和就不用管了

cb是什么呢?是Ajax返回是直接调用的方法,个是百度返回的数据里面会执行方法进行调用,我们不用做任何的处理

只需要写一个方法接受数据就行了

urls 这个就是我们需要的数据,我们一起来看看调用后返回的数据是什么样式的吧

这就是百度返回的数据,我们只需要s后面的数据就行了,现在应该明白我写var urls = strurls["s"]; 这句的意思了吧。

在个时候大家可以自己试试了。

因为百度只返回的数据,所以我们还要做一个智能提供的框,当然也就可以自己定义样子了。先来看看这个框吧

样式如下

方法如下

这个方法这句 if ($(this)[0].getAttribute('url') == 'true') {//给所有的url=true属性的Text加效果

的意思是,我们所有引用这个网页的Text框中,只要有一个属性是url='true'的都会实现这个效果,也就是说我们只要把样式和Js文件引入一下,然后想让那具控件显示就直接添加一个属性

url='true'就行了,别的什么也不需要做了。是不是很方便啊。

一起来看看绑定方法的实现吧

下面是整个Js文件(这里还包括一个同时输入多个文本框的效果)

网页代码如下:

好了我们一起浏览一下效果吧

是不是很拉风啊。

说到这里不仅仅是百度这样,像Soso,Sogou等都可以使用同样的方法来实现。

大家如有兴趣的话可以下载这个例子看看。下载地址:http://download.csdn.net/detail/sufei1013/3949230

    以上就是本篇文章【[转]怎么样把百度搜索引入自己的网站JS实现(附源代码)】的全部内容了,欢迎阅览 ! 文章地址:http://keair.bhha.com.cn/news/4146.html 
     文章      相关文章      动态      同类文章      热门文章      栏目首页      网站地图      返回首页 康宝晨移动站 http://keair.bhha.com.cn/mobile/ , 查看更多   
最新文章
金秀贤记者会上“否认与金赛纶未成年时交往”
大家好呀~这里是你们的小娱!今天韩娱圈又爆出重磅炸弹!据韩国媒体3月31日报道,演员金秀贤31日突然召开紧急记者会,首度回应与
差价1000元!OPPO Watch X和华为WATCH4 Pro,谁才是最佳之选?智能腕表手机「差价1000元!OPPO Watch X和华为WATCH4 Pro,谁才是最佳之选?」
近年来,智能手表逐渐取代传统腕表,成为了许多年轻人和商务人士的新宠。但要说能做到【真智能】的产品,除了Apple Watch之外,
华为三折叠手机,女生实现裸眼3D体验的神奇之选裸眼3d手机「华为三折叠手机,女生实现裸眼3D体验的神奇之选」
华为三折叠手机是女生实现裸眼3D体验的神奇之选,其独特的折叠设计不仅方便携带,还为用户带来全新的视觉体验。该手机采用先进技
OPPO Find X3和OPPO Find X3 Pro详细对比评测手机看家「OPPO Find X3和OPPO Find X3 Pro详细对比评测」
目前高端旗舰市场,Find X3系列绝对是一大热门,OPPO Find X3系列共有两款机型,分别为OPPO Find X3和OPPO Find X3 Pro。虽然一
模拟人生4苹果官方正版 v46.0.0.156548 ios版模拟人生手机版「模拟人生4苹果官方正版 v46.0.0.156548 ios版」
模拟人生4是一款模拟经营类游戏。游戏中玩家可以体验不同职业的人生,你可以在城市中找一份工作,同时还能装修自己的房子。玩家
火山冒险王冒险王手机版「火山冒险王」
火山王是一款经典而有趣的冒险游戏。你可以在这里自由选择自己喜欢的职业,进行突破和冒险。它整体以魔幻风格建造,加上大量的,
探讨新手机为何耗电快的多重原因为什么手机耗电快「探讨新手机为何耗电快的多重原因」
为什么新手机耗电快 Why New Phones Drain Battery Quickly随着科技的不断进步,智能手机的功能越来越强大,性能也越来越高。然
你有酥胸我有美臀 斗鱼龙珠女主播大战一触即发这是我的战争手机版「你有酥胸我有美臀 斗鱼龙珠女主播大战一触即发」
  斗鱼三骚抵制赵世熙的内斗还历历在目,这边龙珠斥资2000W签约的多位韩国女主播又让众姐们儿危机感爆棚,显然斗鱼与龙珠的女
苹果手机备忘录删除了怎么恢复?3个技巧,教你迅速还原苹果手机数据恢复「苹果手机备忘录删除了怎么恢复?3个技巧,教你迅速还原」
​​你有时候是不是会因为着急找某些资料或者是信息,着急忙慌地不小心按错了按钮,结果就把苹果手机里的备忘录给删了呢?当发生
如何在安卓手机中安装Arch Linux chroot 容器linux手机「如何在安卓手机中安装Arch Linux chroot 容器」
chroot是Linux发行版中一个用于将进程隔离在一个受限空间的软件,而由于将进程隔离到了受限空间中,我们只需要将系
相关文章