JSONP跨域

同源策略

同源策略是浏览器中的一个基本安全策略。

同源：相同的来源。 指的是： 协议、域名、端口相同。

同源策略规定，请求的内容必须来自同一个服务器。

备注：静态资源不受同源策略的限制。

跨域

跨域指的就是跨域名访问。

简单来说，不符合同源策略就叫做跨域。

判定跨域规则：协议、域名、端口这三个有任何一个不相同就叫做跨域。

JSONP是一种跨域通信方式。

原理：

利用script标签允许跨域
利用script标签可以执行代码

封装JSONP：

var ZS = { 
  jsonp(url, data, callback) { 
    // 获取函数名
    let callbackName = data.callback; 
    // 将这个函数名注册到window上
    window[callbackName] = callback; 
    // 格式化querystring
    let str = '';
    for (let i in data) {
      str += i + '=' + encodeURIComponent(data[i]) + '&';
    }
    str = str.slice(0, -1);
    // 1 创建script标签
    let script = document.createElement('script');
    // 2 设置src
    script.src = url + "?" + str;
    // 3 上树  因为script标签必须在dom树上出现 才可以发送这个请求
    document.body.appendChild(script);

    // 4 等代码执行完毕 删除元素 并且删除函数
    script.onload = function() {
      // 删除元素
      document.body.removeChild(script);
      // delete属性
      delete window[callbackName];
    }
  }
}