虽然XMLHttpRequest这个对象使用很简单，但很少有人用好，我比较喜欢使用js原生对象，因为大多数时候不需要安装什么工具，直接打开浏览器控制台即可完成很多功能，写这个的目的也是方便要用的时候能从这里很快复制使用。
1、XMLHttpRequest简称xhr，使用步骤按顺序一般分为5步：
1.1、实例化一个xhr对象，考虑兼容性：var xhr = XMLHttpRequest && new XMLHttpRequest() || new ActiveXObject();
1.2、设置状态改变的响应处理事件，一般状态为4时表示请求响应完成：xhr.onreadystatechange = callback;
1.3、使用open函数打开连接，接受三个参数，分别是请求方法、请求路径、是否异步请求：xhr.open(method, url, isAsyc);
1.4、设置header、cookie等：xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset=UTF-8‘);
1.5、使用send函数发起请求，接受一个需要发送的数据参数：xhr.send(params);
2、使用xhr发起get请求比较简单，代码如下：
var xhr = XMLHttpRequest && new XMLHttpRequest() || new ActiveXObject(); xhr.onreadystatechange = c => { if (c.target.readyState == 4) { console.log(c.target.responseText); } }; xhr.open(‘GET‘, ‘/login?username=ruphy&passwd=123456‘, true); xhr.send();
3、使用xhr发起post请求，一般就两种格式，一种是键值对字符串，另一种是form表单
3.1、发送的数据使用&号连接的键值对字符串时（如：‘username=ruphy&passwd=123456‘），代码如下:
var xhr = XMLHttpRequest && new XMLHttpRequest() || new ActiveXObject(); xhr.onreadystatechange = c => { if (c.target.readyState == 4) { console.log(c.target.responseText); } }; xhr.open(‘POST‘, ‘/login‘, true); xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset=UTF-8‘); xhr.send(‘username=ruphy&passwd=123456‘);
3.2、发送的数据使用form表单方式时（通常发送JSON对象），代码如下：
var xhr = XMLHttpRequest && new XMLHttpRequest() || new ActiveXObject(); xhr.onreadystatechange = c => { if (c.target.readyState == 4) { console.log(c.target.responseText); } }; xhr.open(‘POST‘, ‘/login‘, true); var fd = new FormData(); fd.append(‘username‘, ‘ruphy‘); fd.append(‘passwd‘, ‘123456‘); xhr.send(fd);
3.3、一般情况下，当参数为json对象时，我比较喜欢将json对象转为form表单形式发送，json转form表单的代码如下：
var params = {username: ‘ruphy‘, passwd: ‘123456‘}; var fd = new FormData(); for (var k in params) { fd.append(k, params[k]); }
4、上面就是使用xhr发送get和post请求的基本用法，下面使用函数简单封装一下，兼容jQuery的$.get和$.post方法、支持回调函数方式和promise方式处理响应结果
4.1、封装get请求，代码如下：
var get = function (url, params, func, type) { if(typeof params === ‘function‘){ func = params; params = undefined; } if(params){ !/\?/.test(url) && url += "?"; if(typeof params !== ‘string‘){ for(var k in params){ url +=k + ‘=‘ + params[k]; } } else { url += params; } } var promiss = new Promise(function (resolve, reject) { var xhr = XMLHttpRequest && new XMLHttpRequest() || new ActiveXObject(); xhr.onreadystatechange = c => { if (c.target.readyState == 4) { func && func.call(c.target.responseText, c.target.responseText, c.target.status); // 回调函数存在时调用回调函数，返回数据和状态 if(c.target.status < 300){ resolve && resolve(c.target.responseText); // 成功时调用resolve函数 } else { reject && reject(c.target.responseText); // 失败时调用reject函数 } console.log(c.target.responseText); } }; xhr.open(‘GET‘, url, true); xhr.send(); }); return promiss; }
4.2、封装post请求，代码如下：
var post = function (url, params, func) { if(typeof params === ‘function‘){ func = params; params = undefined; } var promiss = new Promise(function (resolve, reject) { var xhr = XMLHttpRequest && new XMLHttpRequest() || new ActiveXObject(); xhr.onreadystatechange = c => { if (c.target.readyState == 4) { console.log(c.target.responseText); func && func.call(c.target.responseText, c.target.responseText, c.target.status); // 回调函数存在时调用回调函数，返回数据和状态 if(c.target.status < 300){ resolve && resolve(c.target.responseText); // 成功时调用resolve函数 } else { reject && reject(c.target.responseText); // 失败时调用reject函数 } } }; xhr.open(‘POST‘, ‘/login‘, true); if(typeof params === ‘string‘){ xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset=UTF-8‘); xhr.send(params); } else { // xhr.setRequestHeader(‘Content-Type‘, ‘multipart/form-data; charset=UTF-8‘); 不需要设置 var fd = new FormData(); for (var k in params) { fd.append(k, params[k]); } xhr.send(fd); } }); return promiss; }
4.3、调用方式，post为例：
4.3.1、回调函数方式
post(‘/login‘, {username: ‘ruphy‘, passwd: ‘123456‘}, (data, status)=>{
console.log(data);
//其他业务处理
});
4.3.2、promise异步方式
post(‘/login‘, {username: ‘ruphy‘, passwd: ‘123456‘})
.then(data=>{
console.log(data);
// 其他业务处理
},err=>{
console.log(err);
// 其他错误处理
});