原生js封装ajax：传json，str，excel文件上传表单提交

由于项目中需要在提交ajax前设置header信息，jquery的ajax实现不了，我们自己封装几个常用的ajax方法。

jQuery的ajax普通封装

var ajaxFn = function(uri, data, cb) {
  $.ajax({
      url: uri,
      type: 'POST',
      dataType: 'json',
      data: data,
    })
    .done(cb)
    .fail(function() {
      console.log("error");
    })
    .always(function() {
      console.log("complete");
    });
}

原生ajax封装，设置header，传json

 var ajaxHdFn = function(uri, data, cb) {
   var getXmlHttpRequest = function() {
     if (window.XMLHttpRequest) {
       //主流浏览器提供了XMLHttpRequest对象
       return new XMLHttpRequest();
     } else if (window.ActiveXObject) {
       //低版本的IE浏览器没有提供XMLHttpRequest对象
       //所以必须使用IE浏览器的特定实现ActiveXObject
       return new ActiveXObject("Microsoft.XMLHttpRequest");
     }

   };
   var xhr = getXmlHttpRequest();
   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
       //获取成功后执行操作
       //数据在xhr.responseText
       var resJson = JSON.parse(xhr.responseText)
       cb(resJson);
     }
   };
   xhr.open("post", uri, true);
   xhr.setRequestHeader("DeviceCode", "56");
   xhr.setRequestHeader("Source", "API");
   xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");

   xhr.setRequestHeader("Content-Type", "application/json");
   var dataStr = JSON.stringify(data);
   xhr.send(dataStr);
 }

原生ajax封装，设置header，传json

 var ajaxStrFn = function(uri, data, cb) {
   var getXmlHttpRequest = function() {
     if (window.XMLHttpRequest) {
       //主流浏览器提供了XMLHttpRequest对象
       return new XMLHttpRequest();
     } else if (window.ActiveXObject) {
       //低版本的IE浏览器没有提供XMLHttpRequest对象
       //所以必须使用IE浏览器的特定实现ActiveXObject
       return new ActiveXObject("Microsoft.XMLHttpRequest");
     }

   };
   var xhr = getXmlHttpRequest();
   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
       //获取成功后执行操作
       //数据在xhr.responseText
       var resJson = JSON.parse(xhr.responseText)
       cb(resJson);
     }
   };
   xhr.open("post", uri, true);
   xhr.setRequestHeader("DeviceCode", "56");
   xhr.setRequestHeader("Source", "API");
   xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");

   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
   var dataStr = '';
   for (var i in data) {
     if (dataStr) {
       dataStr += '&';
     }
     dataStr += i + '=' + data[i];
   }
   xhr.send(dataStr);
 }

原生ajax封装，设置header，传上传excel文件，提交表单

 var ajaxFormFn = function(uri, formObj, cb) {
   console.log('formObj---', formObj);

   var getXmlHttpRequest = function() {
     if (window.XMLHttpRequest) {
       //主流浏览器提供了XMLHttpRequest对象
       return new XMLHttpRequest();
     } else if (window.ActiveXObject) {
       //低版本的IE浏览器没有提供XMLHttpRequest对象
       //所以必须使用IE浏览器的特定实现ActiveXObject
       return new ActiveXObject("Microsoft.XMLHttpRequest");
     }

   };
   var xhr = getXmlHttpRequest();
   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
       //获取成功后执行操作
       //数据在xhr.responseText
       var resJson = JSON.parse(xhr.responseText)
       cb(resJson);
     }
   };
   xhr.open("post", uri, true);
   xhr.setRequestHeader("DeviceCode", "56");
   xhr.setRequestHeader("Source", "API");
   xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");

   xhr.onload = function() {
     console.log("上传完成!");
   };

   xhr.send(formObj);
 }

导入的实现部分是后端的事情。
我们这里需要提交一个excel文件，使用ajax。
并且需要设置ajax的头信息。所以我们不使用封装好的插件。用原生js来封装一个ajaxFormFn() 方法。

提交时候的代码：

 if (document.getElementById("J_ImportFile").files.length > 0) {
   var fileObj = document.getElementById("J_ImportFile").files[0]; // 获取文件对象

   // FormData 对象
   var form = new FormData();
   form.append("file", fileObj); // 文件对象

   util.ajaxFormFn(uri, form, self.importFile);

   Elems.importLoad = layer.msg('正在导入...', { icon: 16 });

 } else {
   layer.msg('请先选择要导入的excel文件');
 }

这里用到两个对象：
第一个对象：FormData
第二个对象：XMLHttpRequest

目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，还在用IE6 ? 只能仰天长叹....

有了这两个对象，我们可以真正的实现Ajax方式上传文件。

jQuery的ajax提交formData：（两个false设置是重点）

/** 传formData **/
ajaxFormFn: function(uri, formData, cb) {
  var self = this;

  $.ajax({
      url: uri,
      type: 'POST',
      dataType: 'json',
      data: formData,
      /**
       * 必须false才会避开jQuery对 formdata 的默认处理
       * XMLHttpRequest会对 formdata 进行正确的处理
       */
      processData: false,
/**
       *必须false才会自动加上正确的Content-Type
       */
      contentType: false,
      beforeSend: function(xhr) {
        xhr.setRequestHeader('Source', self.headers.Source);
        xhr.setRequestHeader('Authentication', self.headers.Authentication);
      }
    })
    .done(cb)
},