jsonp概念原理以及实现

jsonp

1、为什么会有跨域

浏览器是同源策略，他是一个约定也是最核心的内容，同时也是安全性的最佳保障。试想一下，如果没有这种限制的话，一个页面同时加载了a与b两个域下的js文件，那么他们的document以及cookie等信息都是共享的，也就是说a可以拿到b域下的信息，反之b也可以拿到a域下的信息，这样的结果是非常可怕的

2、同源的概念

两个页面具有相同的协议（protocol），主机（host）和端口号（port）。可以将下列代码拷贝到控制台进行执行，查看结果

  console.log(location.protocal); // 查看当前页面的协议
  console.log(location.hostname); // 查看当前页面的域名(主机名)
  console.log(location.port); // 查看当前页面访问的端口号

端口号大部分是80(http)、443(https)

3、jsonp实现原理

jsonp的实现其实就是向头部插入一段script标签，然后在window上添加一个方法。当script请求返回的时候，会执行的返回内容。返回内容为 添加到windows上的方法(returnValue);

比如

设置的方法为jsonpCb1, 接口返回的实际数据为hello world，则加载后的请求返回实际的数据就是jsonpCb1(‘hello world’)

4、jsonp实现方法

  let count = 0; // 计数器，保证所有请求的回调函数不相同
  function jsonp(url, params, callback){
    let script = document.createElement('script');
    let cb = `callback${count++}`; // 后端实际根据这个参数去返回的方法名
    url += url.includes('?') ? `&callback=${cb}` : `?callback=${cb}`;
    script.src = url;

    function clean() {
      script.parentNode.removeChild(script); // 移除script标签
      window[cb] = null; // 把回调函数置为空
    }

    // 实际请求成功获取到的数据
    window[cb] = result => {
      cleanup();
      callback(null, result);
    }; // 请求有响应

    // 请求错误监听
    script.onerror = function(e) {
      cleanup();
      callback(e, null);
    };
    document.head.appendChild(script); // 插入到dom中，进行实际请求
  }

上述大概实现了一个简单的jsonp请求，实际还可以设置timeout等参数信息，感兴趣的同学可以自己进行扩展