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('请求失败')
   }
 })