跨域请求实现百度搜索和360搜索的智能提示

引言

      最近打算给自己的小项目加入一个智能搜索的提示,就像在使用百度或者360搜索时,每输入一个字都会出现一个包含关键词的下拉列表的提示,这个轮子如果后端自己造的话,先不谈造出来好不好用,首先肯定会增加一些额外的工作量。俗话说:君子生非异也,善假于物也,于是自然第一想法先去看看有没有现成的接口,后来发现是我想多了,唉,看来这些大厂们还是比较小气的。看来只有亲自去抓一条它们的请求报文分析一下了,分析完后我派出了兵器库里的Jsonp帮我实现了这个功能。(包括搜索框和css样式的东西,完整的js代码等,我会打包放在github(戳我)上,在文章末尾也会有地址链接),最后实现的效果如下图所示:
跨域请求实现百度搜索和360搜索的智能提示_第1张图片

实现过程:

       首先是去抓一个请求报文和一个返回的数据包看看,打开百度搜索,任意输入一个内容,然后通过F12打开chrome开发者工具,查看network,我在搜索框里输入了一个m,于是就在Headers里面拿到了这么一串Request URL,我把它粘贴在下面分析一下(其实很多参数我也不知道是干啥的)。

Request URL:
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=m&json=1&p=3&sid=1451_19036_21093_17001&req=2&csor=1&cb=jQuery110208041528279304828_1502445662172&_=1502445662175
       分析上面这个URL, wd=m 这个肯定表示请求数据了,然后再看一下 cb这个字段,cb应该是callback的缩写,也就是Jsonp中Jsonpcallback对应的字段,后面那个JQuery开头的一长串数字是Jquery自动生成的回调函数名,如果没有什么特殊需求的处理,这个回调函数并不会有什么太大卵用,因为即使不带这一项,一样可以请求到数据,不信可以试着将下面这个缩减版的链接复制到浏览器的地址栏中试一下,https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=m 你会得到下面这样的数据。
window.baidu.sug({q:"m",p:false,s:["美团","mysql","美图秀秀","蚂蜂窝","慕课网","梦幻西游","魅族","名侦探柯南","美元对人民币汇率","魔兽世界"]});

       但是在使用百度的智能提示时,会存在一个问题,虽然我们在浏览器中不带回调函数可以请求到数据,但是由于使用jQuery中的Jsonp请求时,请求路径中带的键名默认是叫callback,而不是cb,所以百度返回的数据是用window.baidu.sug()这个函数去包裹的,而Jsonp的本质是利用了

你可能感兴趣的:(大学时期的小白文章)