JSONP的手写实现

梦里梦外; 2022-10-30 12:21 175阅读 0赞

# JSONP的前世今生 #

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

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

## 同源策略 ##

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

![跨域问题表格][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70]

**跨域就是为了突破`同源策略`的限制，而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)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70]: /images/20221024/fb723afcaa3245b199a58b9b21c02639.png