发现好文章： https://segmentfault.com/a/1190000004322487 ，比js权威指南写的还详细清晰。

1.创建XMLHttpRequest实例对象。
var xhr = new XMLHttpRequest();

2.调用xhr对象的open方法，指定请求类型（常用get,post），请求的url;
xhr.open('GET','/index.html');

3.调用xhr对象的send方法；
xhr.send(); //如果请求类型是post，send方法要有参数。

4.xhr的readystate属性（值为：0,1,2,3,4）用来说明此次请求的进展。我们一般关心的是值为4（请求已完成）的情况。
{
这里要注意的是：当readystate值为4（请求完成）时，请求不一定成功，请求成功与否需要关注status属性
},
{
readystate值的每一次改变都会触发一次readystatechange事件，我们一般在这个事件中查看readystate的值，在readystate值为4并且status属性值为200时，做相应的处理。
}

5.xhr的status属性（值为：200,404,500,503这种）说明此次请求成功与否，我们一般关心的是值为200（请求已成功）的情况。

6.监听xhr的readystatechange事件。
xhr.onreadystatechange = function(){
if(xhr.readystate === 4 && xhr.status === 200）{
//do something
}
}

7.在xhr2规范草案中，定义了很多新事件，xhr对象在请求的不同阶段触发不同的事件，所以不再需要检查readystate属性。
{
//xhr2的新事件
loadstart ： 在调用send()方法时触发。
progress : 正在加载服务器的响应时触发，每隔50ms触发一次，如果响应快速完成，可能不会触发。
load : 请求完成时触发（类似readystatechange事件，为了分辨请求是否成功，要检查status属性值）。
**请求未完成时可能触发以下事件：{
timeout : 请求超时，
abort : 请求终止，
error : 像太多重定向这样的网络错误导致请求失败
}
}
8.progress事件
//
if('onprogress' in xhr){
xhr.onprogress = function(e){
if(e.lengthComputable){
that.innerHTML = Math.round(100 e.loaded/e.total)+'% complete';
callback && callback(xhr);
}
}
}

常用的这些ProgressEvent对象属性：{
type： 事件类型，
timetamp : 时间戳，
loaded : 目前传输的字节数，
lengthComputable : 响应头是否包含'Content-Length'，以告诉我们传输的数据的总长度，
total : 从响应头'Content-Length'传输的数据的整体长度（字节数）
}