jsonp 的原理和实现

[theydy]

工作原理

script 标签的src 属性不受浏览器的跨域限制。所以能够使用get 方法向服务端发送请求，接着服务端返回一段调用函数的js 代码，将json 格式的数据以参数的形式传递，如：

callback({"a":"a", "b":"b"});

这段服务端返回的js 代码在客户端环境下会直接执行。所以我们就可以事先在全局作用域下(window) 挂载一个名为callback 的函数，在这个函数中就可以拿到数据并执行具体的操作了。这里存在一个可以优化的点，回调函数执行完就delete 掉。

具体实现

const concatUrl = function (data) {
  // 拼接url
  let url = '';
  for (let k in data) {
    let value = data[k] !== undefined ? data[k] : '';
    url += `&${k}=${encodeURIComponent(value)}`;
  }
  return url ? url.substring(1) : '';
}

const josnp = function (url, callback, cbName, data) {
  let script = document.createElement('script');

  // 设置回调函数的函数名
  data['callback'] = cbName;

  url += (url.indexOf('?') < 0 ? '?' : '&') + concatUrl(data);

  script.src = url;

  window[cbName] = function (data) {
    callback(data);
    window[cbName] && (delete window[cbName]);
  };

  document.querySelector('head').appendChild(script);
}