JSONP跨域模拟百度搜索

这篇文章主要介绍了JSONP跨域模拟百度搜索,JSONP是JSON with padding 的简写,应用JSON的一种新方法，在后来的Web服务中非常流行，JSONP看起来与JSON差不多，只不过是被包含在函数中调用的JSON,对此感兴趣的小伙伴可以参考一下下面文章内容

一、什么是JSONP

JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是应用JSON的一种新方法，在后来的Web服务中非常流行，JSONP看起来与JSON差不多，只不过是被包含在函数中调用的JSON，就像下面这样：

 callback({"name": "王欢"});

SONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。下面就是一个典型的JSONP请求。

 https://freegeoip.net/json/?callback=handleResponse

这个URL是在请求一个JSONP地理定位服务，通过查询字符串来指定JSONP服务的回调参数是很常见的，就像上面的URL所示，这里指定的回调函数的名字叫做：handleResponse()
JSONP是通过动态

假设前端已经把函数名告诉了后端，后端就可以调用这个getData() ，并且可以传递信息。在jsonp.html就可以请求到下述jsonp.js文件。

 getData({ name: '小王', age: 20 })

运行得到结果为：

得到了一个Object对象，就是我们所传递的数据。那么，我们如何告诉服务器getData()这个函数呢？如果我们每次都固定是getData(),我们的开发会很死板，就不能定义其他函数名字。实际上，我们可以通过get请求将我们前端定义的函数名字通过参数告诉后端，后端动态生成这样的一个脚本文件并返回给函数的调用就可以。百度就有一个这样的接口，我们一起来看看。打开浏览器百度页面，打开调试工具，看一下NETwork标签下面会监听所有关于浏览器向服务器发送的http请求并查看数据。

在搜索框键入“b”，请求如图：

请求得到的关键字为：

这里的callback函数其实是jquery生成的一个全局函数。得到这个URL后，我们可以保存其有用的信息，并将回调函数换成别的函数：

 https://www.baidu.com/sugrec?pre=1&wd=b&req=2&csor=1&cb=getData();

将其输入到地址栏中进行测试：

可以发现，这个回调函数就变成了我们设置的。

`三、模拟百度搜索`

我们现在就可以通过这个接口去发生JSON来模拟一下百度搜索页面。我们定义一个全局变量作为接收数据的函数，data就是接收到的数据，一旦getdata()函数被调用，说明我们我们的Jsonp函数就发送完成，此时可以通过removeChild()删除script标签，这样就可以实现每当我们发送一次请求，script标签在接收到数据后就会被删除，在数据处理的时候，getData（）返回给我们的是一个对象，对象里面有一个关键字g,里面对应的是一个数组，数组里面是字符串，我们先将这个数组遍历，然后根据每个元素生成一个li加到input下面的ul就可以，先将ul里面的html清空，这样的话，每次请求的li都是全新的，当keyup出来的时候，首先取到当前input的value值并调用getdata()函数，将wd传进来，就实现了jsonp传递数据的过程。

代码如下：