###1. XMLHttpRquest 2级
1) FormData
现代web应用中频繁使用的一项功能就死表单数据的序列化, XMLHttpRquest 2级为此定义了FormData类型
FormData为序列化表单以及创建于表单格式相同数据(用于通过XHR传输)提供了便利
eg: var data = new FormData();
data.append("name","Tom") // append(键 , 值)
在post请求表单提交数据时,可直接使用该方法对表单数据进行处理
eg: var form = document.getElementById("user-info") // id为user-info的form表单
xhr.send(new FormData(form))
2) 超时设定 timeout属性,表示请求在等待响应多少毫秒之后就终止,触发该事件后会调用ontimeout事件处理程序
eg: xhr.timeout = 1000; // 将超时设置为1s
xhr.ontimeout = function(){
alert("Request did not return in a second"); // 输出“请求没有立即返回”
}
3) overrideMimeType() 用于重写XHR响应的MIME类型
4)进度事件
6中进度事件
loadstart: 在接受到相应数据的第一个字节是触发
progress: 在接受响应期间持续不断触发
error: 在请求发生错误时
abort: 调用abort() 触发
load: 在接收到完整的响应数据是触发
loadend: 在通信完成或触发error·abort或load事件后触发
4.1) load事件
用以替代readystatechange事件,响应接受完毕后将触发load事件,因此也没有必要去检查readyState属性。
而onload事件处理程序会接收到一个event对象,其target属性就指向xhr对象实例,可以访问到XHR对象的所有方法和属性
4.2)progress事件
会接收到一个event对象,其target属性是XHR对象,但包含着三个额外的属性
lengthComputable 表示进度信息是否可用的布尔值
position 表示已经接受的字节数
totalSize 表示根据Content-Length 响应头部确认的预期字节数
可以根据这些信息为用户创建一个进度指示器 为确保正常执行,必须在调用open方法之前添加该事件处理程序
eg:
xhr.onprogress = function(event){
var obj = document.getElementById("xxx");
if(event.lengthComputable){
obj.innerHTML = "Received" + event.position + "of" + event.totalSize + "bytes" // 收到了xxx字节中的xxx个
}
}