手写jsonp的实现

嘛是jsonp

一个众所周知的问题，Ajax请求是不能跨域的，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准。

不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有src这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）。

于是如果想通过纯web端跨域访问数据就可以这样：在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。

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

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

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

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

JSONP的客户端实现

First Blood

假设远程服务器有个app.js文件，代码如下

alert('111111')；

html页面如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://xx.xx.xx.xx/app.js"></script>
</head>
<body>

</body>
</html>

很显然页面会显示一个弹出框

Double Kill

现在稍微改动一下

<!-- html代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    var handler = function (data) {
        alert(data)
    }
  </script>
  <script src="http://xx.xx.xx.xx/app.js"></script>
</head>
<body>

</body>
</html>

// 远程服务器的 app.js 代码
handler({"result":"我是远程js带来的数据"});

毫无疑问，是可以运行成功的

Triple Kill

动态生成handler函数名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    var xxxHandler = function(data){
        alert(data);
    };
    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
    var url = "http://xx.xx.xx.xx/xyz?param1=123&callback=xxxHandler";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
    document.body.appendChild(script); 
  </script>
</head>
<body>

</body>
</html>

这次改动，不再把远程js文件写死。在调用的url中传递了一个code参数，告诉服务器参数信息，而callback参数则告诉服务器，本地回调函数叫做xxxHandler，所以请把查询结果传入这个函数中进行调用。

Ultra Kill

不废话了，直接上最后封装过的代码

(function (global) {
  function jsonp (url, params, callback) {
    let queryStringArr = [];
    for (var k in params) {
      queryStringArr.push(`${k}=${param[k]}`);
    }

    let random = Math.random().toString().replace('.', '');
    let callbackFunctionName = 'jsonp_' + random;
    queryStringArr.push(`callback=${callbackFunctionName}`);

    let script = document.createElement('script');
    script.src = url + '?' + queryStringArr.join('&');
    document.body.appendChild(script);

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

  global.jsonp = jsonp;
})(window);

链接: https://fly63.com/article/detial/9554