ajax请求的原生js实现

我们使用ajax请求一般都用的jQuery, axios封装好了的api, 那么如果只能用原生js, 我们该如何操作了? 上代码.

我们在同目录下写好一个json文件(data.json)用于请求测试

const ajax = function() {
  var ajaxData = {
    type: arguments[0].type || 'GET',
    url: arguments[0].url,
    async: arguments[0].async || true,
    data: arguments[0].data|| null,    
    dataType: arguments[0].dataType || 'json',    
    contentType: arguments[0].contentType || 'application/x-www-form-urlencoded',  
    beforeSend: arguments[0].beforeSend || function(){}, 
    success: arguments[0].success || function(){}, 
    error: arguments[0].error || function(){}  
  }
  // 执行发起请求前要执行的操作
  ajaxData.beforeSend();

  var xhr = createxmlHttpRequest();
  xhr.responseType = ajaxData.dataType;
  // 建立连接
  xhr.open(ajaxData.type, ajaxData.url, ajaxData.async);
  xhr.setRequestHeader('Content-Type', ajaxData.contentType);
  // 发送请求
  xhr.send(convertData(ajaxData.data));
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        ajaxData.success(xhr.response)
      } else {
        ajaxData.error()
      }
    }
  }

  // 创建xhr对象, 兼容IE6
  function createxmlHttpRequest() {  
    if (window.ActiveXObject) {  
      return new ActiveXObject("Microsoft.XMLHTTP");  
    } else if (window.XMLHttpRequest) {  
      return new XMLHttpRequest();  
    }  
  }

  // 将json格式转换成字符串
  function convertData(data){ 
    if( typeof data === 'object' ){ 
      var convertResult = "" ;  
      for(var c in data){  
        convertResult+= c + "=" + data[c] + "&";  
      }  
      convertResult = convertResult.substring(0,convertResult.length-1) 
      return convertResult; 
    }else{ 
      return data; 
    } 
  }
      
   
}

怎么用?

ajax({
  type: 'GET',
  url: './data.json',
  dataType: 'json',
  data: {},
  beforeSend: function() {
    console.log('我是请求前的操作')
  },
  success: function(data) {
    console.log(data)
  },
  error: function() {
    console.log('请求失败')
  }
})