利用jsonp实现百度搜索--让你彻底弄懂jsonp

各位同好，这篇文章是关于如何在自己的网站中实现百度搜索框的效果，所利用的是jsonp相关的知识点，所以在代码实现之前先普及一下jsonp是用来干嘛的。

首先，我们知道jsonp是用来跨域的，那么，为什么要跨域呢，这里就是因为浏览器有一个同源策略的机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。

这里可能用朋友就会疑问，什么叫做同源，同源嘛，字面意思理解就是同一个源，所以，关键是在“源”上面。

一个源的定义 (详情)

如果协议，端口（如果指定了一个）和主机对于两个页面是相同的，则两个页面具有相同的源。

因为这个机制，所以，今天我们要做的在你的个人网站上实现百度搜索的阻碍就是这个，那么jsonp就是来解决这个问题的。
知道了为什么要使用jsonp，那它到底是如何实现的呢？

早在很久以前，为了解决这个问题，机智的前辈们就发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如script、img、iframe）

首先我们来看一下，百度本身是怎么做的。
打开chrome，在chrome的调试窗口下看看百度搜索发出的请求。当输入关键字“LOL”，如下图：

Paste_Image.png

这里产生了一条类型为script的请求，这就是我们需要的东西，可以点开看一下里面是什么

Paste_Image.png

我们可以看到一个名为“JQuery110204094770724259329_1479977887752”的对象，这个对象里包含的，就是我们所需要的数据，比如图片上对象下方的，g , p , q , s 这些，那这个对象是怎么被请求过来的呢？

Paste_Image.png

我们分析这个地址，我把它复制下来

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=lol&sugmode=2&json=1&p=3&sid=1448_19036_18240_17944_21084_18560_17001_20593_21455_21409_21553_21378_21399&req=2&bs=lol&pbs=lol&csor=3&pwd=lol&cb=jQuery110204094770724259329_1479977887752&_=1479977887766

可以在链接的末尾看到我们熟悉的名字，所以我们可以知道，服务器是通过这个字段&cb=jQuery110204094770724259329_1479977887752将我们所需要的数据打包过来的，那我们如何接收呢，就是通过script标签的src
例如：

以上就是今天我们所要讲的内容了，重点我们总结一下，首先知道如何获取数据(通过script标签)，然后再通过解析出对象中所包含的数据并渲染到页面中来达到我们的目的，实现手法多种多样，但原理都是一样的，所以弄清楚了原理，随便你想怎么玩都可以。就是这么简单~
在最后，感谢彭创同学

上面所用的demo在我的GitHub里，欢迎路过的同学star，O(∩_∩)O~