js原生请求XMLHttpRequest封装
//js原生请求XMLHttpRequest const ajaxProtogenesis = { post: function (url, data, success, error, headers) { //默认application/json if (!headers) { headers = { "Content-type": "application/json" }; } this.ajax('post', url, true, data, success, error, headers); }, get: function (url, success, error, headers) { this.ajax('get', url, true, null, success, error, headers); }, ajax: function (method, url, async, data, success, error, headers, updateProgress) { //请求对象 var xhr = new XMLHttpRequest(); //请求类型,请求地址 .open(method, url, async, user, password); if (!method) { method = "post" } if (async == undefined || async == null) { async = true } xhr.open(method, url, async); xhr.responseType = 'json';//返回数据解析类型 //状态事件 xhr.onreadystatechange = function () { //readyState=4请求完成 if (xhr.readyState == 4) { var res = xhr.response; if (xhr.status == 200) { if (success) { success(res); } } else if (error) { error(res); } } }; //// 请求成功回调函数readyState等于4 //xhr.onload = e => { // console.log('request success'); // console.log(e.explicitOriginalTarget.responseText); //}; //// 请求结束 //xhr.onloadend = e => { // console.log('request loadend'); // console.log(e.explicitOriginalTarget.responseText); //}; //// 请求出错 //xhr.onerror = e => { // console.log('request error'); // console.log(e.explicitOriginalTarget.responseText); //}; //// 请求超时 //xhr.ontimeout = e => { // console.log('request timeout'); // console.log(e.explicitOriginalTarget.responseText); //}; //xhr.timeout = 0; // 设置超时时间,0表示永不超时 //传输进度获取 //var updateProgress=function (event) {if (event.lengthComputable) { var completedPercent = event.loaded / event.total; } } if (updateProgress) { //xhr.onprogress = updateProgress;当readyState等于3 //xhr.upload.onprogress = updateProgress; xhr.upload.addEventListener("progress", updateProgress, false); } //请求头//formData参数不能设置请求头 if (headers) { for (var i in headers) { xhr.setRequestHeader(i, headers[i]); } } //json对象参数转json字符串 if (headers && headers["Content-type"].toLowerCase() == "application/json") { if (typeof (data) == "object") { data = JSON.stringify(data); } } //参数,发出请求xhr.send(null || new FormData || 'a=1&b=2' || 'json字符串'); xhr.send(data); //终止请求xhr.abort(); }, formData: function (url, data, success, error, updateProgress) { //data例{ planId: planId, file: document.getElementById("fileUpload").files[0] } //updateProgress传输进度回调 let formData = new FormData(); for (var i in data) { formData.append(i, data[i]); } //formData参数不能设置请求头 this.ajax("POST", url, true, formData, success, error, null, updateProgress); } }