JSONP的手写实现

JSONP的前世今生

JSONP的出现是为了解决跨域——浏览器请求资源调用的问题而出现的。

在了解跨域概念之前，需要先学习同源策略

同源策略

同源策略是浏览器的一个功能，Same Origin Policy，同源就是当协议、域名、端口号一致时就是同源。不同源的客户端脚本在没有明确授权下，不能读写对方的资源。简单地理解就是因为JavaScript同源策略的限制，它是浏览器为了安全性考虑一种非常重要的策略，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。

跨域就是为了突破同源策略的限制，而JSONP就属于解决跨域问题的一种方式

JSONP的手写实现

实现原理

在html页面中，凡是使用src属性调用的资源（图片<img>、脚本<script>、<iframe>等）都不受同源策略的限制。

所以，web端跨域请求访问数据可以这样：在远程服务器上设法把数据装进js格式的文件中，供客户端调用和进一步处理

恰巧有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。

这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件，显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。

客户端在对js文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了。

为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

代码实现

(function (global) {
  global.jsonp = function (url, params, callback) {
    let queryParamArr = []
    for (let key in params) {
      if (params.hasOwnProperty(key))
        queryParamArr.push(`${key}=${params[key]}`)
    }
    let callbackFunctionName = 'jsonp_' + Math.random().toString().replace('.', '')
    queryParamArr.push(callbackFunctionName)

    let script = document.createElement('script')
    script.src = queryParamArr.join('&')
    document.body.appendChild(script)

    global[callbackFunctionName] = function (param) {
      callback(param)
      document.body.removeChild(script)
    }
  }
})(window)