原生js封装ajax请求

一个完整的ajax请求封装，适用场景：

1. get 请求
2. post请求
3. 表单提交方式
4. 表单上传文件

function ajax(options) {
    var method = options.method || 'get'; //请求方法，默认get
    var url = options.url || ''; //请求url
    var succFn = options.success || function(){console.log('请求成功！')}; //请求成功回调
    var data = options.data || null; // 请求数据
    var isAsync = options.async === undefined ? true : options.async; //是否是异步请求，默认true
    var isFormData = options.isFormData || false; //是否采用表单提交数据的方式，默认false
	
	// 创建异步象
    var ajax = null;
    if(window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    }
    else {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    // get请求参数处理
    if (data && method.toLowerCase() === 'get') {
        url += '?';
        for(var key in data) {
            url += key + "=" + encodeURIComponent(data[key]) + "&";
        }
        url = url.slice(0, url.length - 1);
    }

    ajax.open(method, url, isAsync);
	
	// post请求处理, 非表单数据提交方式
    if(method.toLowerCase() == 'post' && !isFormData) {
        var contentType = "application/x-www-form-urlencoded";
        ajax.setRequestHeader("Content-type", options.contentType || contentType);
        
        if(data) {
            var dataJSON = '';
            for(var key1 in data) {
                dataJSON += key1 + "=" + encodeURIComponent(data[key1]) + "&"; 
                // encodeURIComponent 当get请求参数中有特殊字符时必须转码，否则会丢失特殊符号
            }
            dataJSON = dataJSON.slice(0, dataJSON.length - 1);
            ajax.send(dataJSON);
        } else {
            ajax.send();
        }

    }
	
	// post请求 表单数据提交方式
    if(isFormData) { 
        ajax.send(data);
    }

    if(method.toLowerCase() === 'get') {
        ajax.send();
    }

    ajax.onreadystatechange = function () {
        if (ajax.readyState==4 && ajax.status==200) {
            succFn(ajax);
        }
    }
}

使用方式：

ajax({
   method: 'get',
   url: 'http://127.0.0.1/ajax/url',
   data: {
   		id: id,
   		name: name
   },
   success: function(res) {
   		console.log(res);
   }
});

ajax({ 
  method: 'post',
   url: 'http://127.0.0.1/post/data/url',
   data: {
       name: name,
       id: id,
       type: type
   },
   success: function(res) {
   		console.log(res);
   }
})

表单方式提交异步请求：

var file = document.getElementById('file');
file.addEventListener('change', function() {  
   var files = this.files;

    var formData = new FormData();
    formData.append("files[]", files[0]); // []表示files字段的数据格式为数组
    formData.append("parentId", '父级id');
    ajax({
       method: "post",
       url: 'http://127.0.0.1/upload/file/',
       contentType: "multipart/form-data",
       isFormData: true, // 使用表单数据提交方式
       data: formData,
       success: function(res) {
			console.log(res);
       }
   })
})