原生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)
},

 

posted @ 2016-06-16 21:21  暖风叔叔  阅读(7404)  评论(0)  编辑  收藏  举报