jsonp的原理和实现

2021-03-07

字数统计: 728字 | 阅读时长≈ 3分

在应对浏览器跨域问题时，我们经常会遇到一种解决方法，使用 jsonp 。那么 jsonp 到底是什么呢？

概述

jsonp是一种跨域通信的手段，它的原理其实很简单：

首先是利用script标签的src属性来实现跨域。
通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
由于使用script标签的src属性，因此只支持get方法

实现流程

设定一个script标签

< script src = "http://jsonp.js?callback=xxx" > < /script>

callback 定义了一个函数名，而远程服务端通过调用指定的函数并传入参数来实现传递参数，将 fn(response) 传递回客户端

$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';
echo $callback.'(.json_encode($data).)';

客户端接收到返回的js脚本，开始解析和执行 fn(response)

jsonp简单实现

一个简单的jsonp实现，其实就是拼接url，然后将动态添加一个script元素到头部。

function jsonp(req) {
  var script = document.createElement('script');
  var url = req.url + '?callback=' + req.callback.name;
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script);
}

前端js示例

function hello(res) {
  alert('hello ' + res.data);
}
jsonp({
  url: '',
  callback: hello
});

服务器端代码

var http = require('http');
var urllib = require('url');

var port = 8080;
var data = {
  'data': 'world'
};

http.createServer(function(req, res) {
  var params = urllib.parse(req.url, true);
  if (params.query.callback) {
    console.log(params.query.callback);
    //jsonp
    var str = params.query.callback + '(' + JSON.stringify(data) + ')';
    res.end(str);
  } else {
    res.end();
  }

}).listen(port, function() {
  console.log('jsonp server is on');
});

然而，这个实现虽然简单，但有一些不足的地方：

我们传递的回调必须是一个全局方法，我们都知道要尽量减少全局的方法。
需要加入一些参数校验，确保接口可以正常执行。

可靠的jsonp实现

(function(global) {
  var id = 0,
    container = document.getElementsByTagName("head")[0];

  function jsonp(options) {
    if (!options || !options.url) return;

    var scriptNode = document.createElement("script"),
      data = options.data || {},
      url = options.url,
      callback = options.callback,
      fnName = "jsonp" + id++;

    // 添加回调函数
    data["callback"] = fnName;

    // 拼接url
    var params = [];
    for (var key in data) {
      params.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
    }
    url = url.indexOf("?") > 0 ? (url + "&") : (url + "?");
    url += params.join("&");
    scriptNode.src = url;

    // 传递的是一个匿名的回调函数，要执行的话，暴露为一个全局方法
    global[fnName] = function(ret) {
      callback && callback(ret);
      container.removeChild(scriptNode);
      delete global[fnName];
    }

    // 出错处理
    scriptNode.onerror = function() {
      callback && callback({
        error: "error"
      });
      container.removeChild(scriptNode);
      global[fnName] && delete global[fnName];
    }

    scriptNode.type = "text/javascript";
    container.appendChild(scriptNode)
  }

  global.jsonp = jsonp;

})(this);

使用示例

jsonp({
  url: "www.example.com",
  data: {
    id: 1
  },
  callback: function(ret) {
    console.log(ret);
  }
});

参考

jsonp的原理与实现

本文作者： luckyship
本文链接： https://luckyship.github.io/2021/03/07/2021-03-07-jsonp/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！