原生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

 1 var ajaxHdFn = function(uri, data, cb) {
 2   var getXmlHttpRequest = function() {
 3     if (window.XMLHttpRequest) {
 4       //主流瀏覽器提供了XMLHttpRequest對象
 5       return new XMLHttpRequest();
 6     } else if (window.ActiveXObject) {
 7       //低版本的IE瀏覽器沒有提供XMLHttpRequest對象
 8       //因此必須使用IE瀏覽器的特定實現ActiveXObject
 9       return new ActiveXObject("Microsoft.XMLHttpRequest");
10     }
11 
12   };
13   var xhr = getXmlHttpRequest();
14   xhr.onreadystatechange = function() {
15     if (xhr.readyState === 4 && xhr.status === 200) {
16       //獲取成功後執行操做
17       //數據在xhr.responseText
18       var resJson = JSON.parse(xhr.responseText)
19       cb(resJson);
20     }
21   };
22   xhr.open("post", uri, true);
23   xhr.setRequestHeader("DeviceCode", "56");
24   xhr.setRequestHeader("Source", "API");
25   xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");
26 
27   xhr.setRequestHeader("Content-Type", "application/json");
28   var dataStr = JSON.stringify(data);
29   xhr.send(dataStr);
30 }

 

原生ajax封裝，設置header，傳json

 1 var ajaxStrFn = function(uri, data, cb) {
 2   var getXmlHttpRequest = function() {
 3     if (window.XMLHttpRequest) {
 4       //主流瀏覽器提供了XMLHttpRequest對象
 5       return new XMLHttpRequest();
 6     } else if (window.ActiveXObject) {
 7       //低版本的IE瀏覽器沒有提供XMLHttpRequest對象
 8       //因此必須使用IE瀏覽器的特定實現ActiveXObject
 9       return new ActiveXObject("Microsoft.XMLHttpRequest");
10     }
11 
12   };
13   var xhr = getXmlHttpRequest();
14   xhr.onreadystatechange = function() {
15     if (xhr.readyState === 4 && xhr.status === 200) {
16       //獲取成功後執行操做
17       //數據在xhr.responseText
18       var resJson = JSON.parse(xhr.responseText)
19       cb(resJson);
20     }
21   };
22   xhr.open("post", uri, true);
23   xhr.setRequestHeader("DeviceCode", "56");
24   xhr.setRequestHeader("Source", "API");
25   xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");
26 
27   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
28   var dataStr = '';
29   for (var i in data) {
30     if (dataStr) {
31       dataStr += '&';
32     }
33     dataStr += i + '=' + data[i];
34   }
35   xhr.send(dataStr);
36 }

 

原生ajax封裝，設置header，傳上傳excel文件，提交表單

 1 var ajaxFormFn = function(uri, formObj, cb) {
 2   console.log('formObj---', formObj);
 3 
 4   var getXmlHttpRequest = function() {
 5     if (window.XMLHttpRequest) {
 6       //主流瀏覽器提供了XMLHttpRequest對象
 7       return new XMLHttpRequest();
 8     } else if (window.ActiveXObject) {
 9       //低版本的IE瀏覽器沒有提供XMLHttpRequest對象
10       //因此必須使用IE瀏覽器的特定實現ActiveXObject
11       return new ActiveXObject("Microsoft.XMLHttpRequest");
12     }
13 
14   };
15   var xhr = getXmlHttpRequest();
16   xhr.onreadystatechange = function() {
17     if (xhr.readyState === 4 && xhr.status === 200) {
18       //獲取成功後執行操做
19       //數據在xhr.responseText
20       var resJson = JSON.parse(xhr.responseText)
21       cb(resJson);
22     }
23   };
24   xhr.open("post", uri, true);
25   xhr.setRequestHeader("DeviceCode", "56");
26   xhr.setRequestHeader("Source", "API");
27   xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");
28 
29   xhr.onload = function() {
30     console.log("上傳完成!");
31   };
32 
33   xhr.send(formObj);
34 }

 

導入的實現部分是後端的事情。
咱們這裏須要提交一個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)
},