前言
上一篇文章我们主要聊了一下如何实现一个ajax，但是由于文章篇幅有限并没有聊到JSONP，它也是ajax重要的组成部分，所以这篇文章我们一起来看看如何实现一个JSONP。
为什么需要JSONP？
因为浏览器同源策略的存在，在跨域时，XMLHttpRequest对象发起的请求是不被浏览器允许的，浏览器的控制台会出现一堆错误信息！
那么什么是跨域呢？
当页面请求一个接口，此时页面的地址和接口的协议、域名和端口都相同时就叫做同源，其他情况都是跨域。
那么JSONP的作用就是即使在跨域的情况下，ajax依然能正常发送和接受请求！
JSONP的原理
想一想，咱们维护的网站页面引入的外链js都是同源的吗？
显然不全是，可以翻看一下各大公司的网站，你会发现它们引入的外链静态资源（js、css、img）使用的域名可能都各不一样，但是页面运行正常，这就说明浏览器的同源策略对script标签引入的外链js是不起作用的，所以jsonp的原理就是向页面中动态的插入含有src属性的script标签，从这里可以看出jsonp是一个get请求。
操作具体步骤，请看下图：
图1
- 页面在发请求之前会先在接口上拼接一个key=value，图1中我们拼接的是callback=callbackname，这个key和value可以随便取，只要和后端rd约定好就可以；
- 在发请求前还需要做一件事就是以value作为函数名（此处名字是callbackname）定义一个全局方法，挂在window上主要是为了容易获取，当然你也可以把函数挂在其他对象上；
- 请求到达后端，后端会解析出key和value，比如图1事例，先前你需要告诉后端rd你的key是callback，value不需要告之；
- rd通过key拿到value，将会以value(data)的形式返回给页面，页面将会把它当做js执行，好在我们在发请求之前已经定义了以value为函数名的方法，只要js被加载就能执行成功，这样我们就可以在value函数中拿到后端的数据了；
- 最后一步就是删掉script标签，并且重置value方法。
JSONP的具体实现
既然已经清楚原理了，我们就接着上篇文章的ajax代码继续补充jsonp的具体实现逻辑。
图2