新版本的XMLHttpRequest对象,针对老版本的缺点,做出了大幅改进。
- 可以设置HTTP请求的时限。
xhr.timeout = 3000;
xhr.ontimeout = function (event){
alert('请求超时!');
}
- 可以使用FormData对象管理表单数据。
var form = document.getElementById('myform');
var formData = new FormData(form);
formData.append('secret', '123456'); // 添加一个表单项
xhr.open('POST', form.action);
xhr.send(formData);
- 可以上传文件。
var formData = new FormData();
for (var i = 0; i < files.length; i++){
formData.append('files[]', files[i]);
}
- 可以请求不同域名下的数据(跨域请求)。
使用"跨域资源共享"的前提,是浏览器必须支持这个功能,而且服务器端必须同意这种"跨域"。如果能够满足上面的条件,则代码的写法与不跨域的请求完全一样。
xhr.open('GET', 'http://other.server/and/path/to/script');
- 可以获取服务器端的二进制数据。
方法A:改写MIMEType
方法B:responseType属性
- 可以获得数据传输的进度信息。
它分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象,上传的progress事件属于XMLHttpRequest.upload对象。
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
function updateProgress(event){
if (event.lengthComputable){
var percentComplete = event.loaded / event.total;
}
}
event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0
- load事件:传输成功完成。
- abort事件:传输被用户取消。
- error事件:传输中出现错误。
- loadstart事件:传输开始。
- loadEnd事件:传输结束,但是不知道成功还是失败。