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

Posted on by

封装ajax,ajax封装,原生js

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

jQuery的ajax普通封装

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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文件，提交表单

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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() 方法。

提交时候的代码：

0
1
2
3
4
5
6
7
8
9
10
11
12
13
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设置是重点）

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/** 传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)
},

感觉最后这个原生JS封装漂亮些。

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
* 原生JS封装AJAX请求
* 可根据实际需要进行扩展
*
* @param opts object {url:[string],type:[string],header[object:非必须的],success:[function],error:[function]}
*/
function ajax(opts) {
    var xhr = new XMLHttpRequest(); // 创建ajax对象
    xhr.onreadystatechange = function (ev) {
        if(xhr.readyState === 4 && xhr.status === 200){
            opts.success(JSON.parse(xhr.responseText))
        }else if(xhr.readyState === 4 && xhr.status !== 200){
            opts.error(xhr.status)
        }
    };
    var urlStr = '';
    for(var key in opts.data){
        urlStr += key + '=' + opts.data[key] + '&';
    }
    urlStr = urlStr.substring(0, urlStr.length-1);
 
    if(opts.type.toLowerCase() === 'post'){
        xhr.open('post', opts.url, true);
        if(typeof opts.header === "object" && !!opts.header.length){
            for(var index in opts.header){
                xhr.setRequestHeader(index, opts.header[index]);
            }
        }else{
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        }
        xhr.send(urlStr);
    } else if(opts.type.toLowerCase() === 'get'){
        xhr.open('get', opts.url + '?' + urlStr, true);
        if(typeof opts.header === "object" && !!opts.header.length){
            for(var index in opts.header){
                xhr.setRequestHeader(index, opts.header[index]);
            }
        }
        xhr.send()
    }
}
 
btn.addEventListener('click', function () {
    ajax({
        url: 'list.json',
        type: 'post',
        header: {'Content-type': 'application/x-www-form-urlencoded'},
        success: function (data) {
            console.log(data.list)
        },
        error: function () {
            console.log('发生了错误...')
        }
    })
});

 

承接各种网站开发与修改、爬虫、数据采集分析、小程序等任务

Html+Css+JS+PHP+Nodejs+Python

专治网站各种不服

一起探讨，互相学习，共同进步！有事儿您说话。

This entry was posted in JavaScript and tagged , , by 织梦先生. Bookmark the permalink.