前端通信的方式

通信是在面试中，作为考验各位知识面广度的重要方式；当然它也可以问的很细：从基本原理到代码实现；再到兼容性的问题。 

 参考文档： 前端跨越通信的几种方式

Ajax的实现： 

请一定要考虑到兼容性问题；

状态码请自行百度咯：

var ajax = function(param) {
  // 兼容性问题
  var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  // 获取参数
  var type = param.type.toUpperCase();
  var url = param.url;
  if (!url) {
     return
  }
  var data = param.data,
      dataArr = [];
  // 拼接请求字段
  for (var k in data) {
     dataArr.push(k + '=' + data[k]);
  }
  if (type == 'GET') {
     url = url + '?' + dataArr.join('&');
     xhr.open(type, url);
     xhr.send();
  } else {
    xhr.open(type, url);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(dataArr.join('&'));
  }
  // 请求成功的监听
  xhr.onload = function() {
    // 对http状态码的验证
    // 不要忽视了304，其含义代表资源重定向，即利用本地缓存； 如果其他的请求情况 可能还需要添加其他的请求状态码（如请求数据量较大的媒体资源，使用206）
    if (xhr.status === 200 || xhr.status === 304) {
      var res;
      if (opt.success && opt.success instanceof Function) {
        res = xhr.responseText;
        if (typeof res === 'string') {
          res = JSON.parse(res);
          opt.success.call(xhr, res);
        }
      }
    } else {
      if (opt.error && opt.error instanceof Function) {
        opt.error.call(xhr, res);
      }
    }
  }
}

jsonp 的跨越通信：

jsonp本质上就是利用HTML元素中script标签的异步加载来实现的

通过加载script标签的方式去发送一个请求，然后返回一个js块，这个块中有：回调函数名 和 代码

例如： 有着这样的一个script标签：  

<script src="http://www.baidu.com?data=name&callbcak=jsonp" charset="utf-8">

那么就会返回：

<script>

 　jsonp({

　　data:{}

　　....

　})

</script>

代码实现：

function jsonp(url, data = {}, callback = "callback") {
  data.callback = callback;
  url = url.replace(/?$/g, '');
  var params = [];
  // 拼接请求字段
  for (const k in data) {
    params.push(k + '=' + data[k]);
  }
  params.join('&');
  // 创建script标签
  var script = document.createElement('script');
  script.src = url + '?' + params.join('&');
  document.body.appendChild(script);
  // 创建Promise对象进行处理
  return new Promise((resolve, reject) => {
    window[callback] = (data) => {
      try {
        resolve(data)
      } catch (e) {
        reject(e)
      } finally {
        // 最后一定要移除元素
        script.parentNode.removeChild('script');
      }
    }
  })
}