看了SF 上的一篇文章感触颇深：你真的会使用XMLHttpRequest吗？
在这我写上我读后的笔记：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest测试</title>
</head>
<body>
<progress id="uploadprogress" value="0" min="0" max="100">0</progress>
<script type="text/javascript">
//构造表单数据
var formData = new FormData();
formData.append('username','tom');
//创建XHR对象
var xhr=new XMLHttpRequest();
//设置xhr过期时间
xhr.timeout = 3000;
//手动设置了中content-type
//xhr.setRequestHeader();
//设置响应返回数据格式
xhr.responseType="json";
//创建一个post 异步请求
xhr.open("post",'./server.php',true);
/**
*
* 匿名函数参数e为progressEvent 进度事件
*
**/
//注册相关事件回调处理函数
xhr.onload = function(e){
if(this.status==200 || this.status==304){
//alert(this.responseText);
console.log(this.response);
//console.log(e);
}
}
//当请求结束（包括请求成功和请求失败）时触发
xhr.onloadend =function(e){
console.log("触发onloadend 请求结束");
}
//调用xhr.send()方法后立即触发，若xhr.send()未被调用则不会触发此事件。
xhr.onloadstart=function(e){
console.log("触发onloadstart 发送时立刻触发");
}
//获取xml错误事件
xhr.ontimeout= function(e){
alert("超时！");
console.log(e);
}
//获取xml错误事件
xhr.onerror=function(e){
alert("服务器发生错误！");
console.log(e);
}
//获取xml进度事件
xhr.onprogress = function(e) {
if (e.lengthComputable) {
var complete = (e.loaded / e.total * 100 | 0);
var progress = document.getElementById('uploadprogress');
progress.value = progress.innerHTML = complete;
}
};
xhr.onabort=function(e){
console.log("你取消了这个ajax请求");
}
//每当当前状态变化时触发
xhr.onreadystatechange = function () {
//获取xmr请求当前的状态
switch(xhr.readyState){
case 0://初始状态，未打开
console.log("此时xhr对象被成功构造，open()方法还未被调用")
break;
case 1://OPENED
console.log("open()方法已被成功调用，send()方法还未被调用");
break;
case 2://HEADERS_RECEIVED 已获取响应头
//abort()取消这个请求
//xhr.abort();
console.log("send()方法已经被调用, 响应头和响应状态已经返回")
break;
case 3://LOADING 正在下载响应体
console.log("响应体(response entity body)正在下载中，此状态下通过xhr.response可能已经有了响应数据")
break;
case 4://DONE 响应结束
console.log("整个数据传输过程结束，不管本次请求是成功还是失败")
break;
}
}
try{
//在请求时 如果发生错误 需要捕获否则无法执行下面的代码
xhr.send(formData);
}catch(e) {
console.log(e);
};
//console.log(formData);
//console.log(xhr);
</script>
</body>
</html>