b) 监听超时事件 (如果超时了,怎么处理)
xhr.ontimeout = function () {// code}
当请求超时,此事件就会被触发
2、FormData
a) 提供了一个新的内建对象,可用于管理表单数据
b) 首先要获取一个表单元素form
c) 然后在实例化时 new FormData(form),将表单元素form传进去
d) 会返回一个对象,此对象可以直接做为xhr.send(formData)的参数
e) 此时我们的数据就是以二进制形式传递了
f) 注意我们这里只能以post形式传递,浏览器会自动为我们设置一个合适的请求头
FormData对象:用于一次性收集form表单数据
var formObj = document.querySelector("form表单");
var formData = new FormData(formObj);
//然后直接作为xhr的send参数:
xhr.send( formData );
细节:
2.1)xhr此时只能是post请求
2.2)xhr此时无需设置请求头
2.3)FormData还可以追加数据,形式为:
formData.append('key', "value");
3、文件上传
a) 我们上传文件是以二进制形式传递的
f) 最后将 formData 做为xhr.send(formData)的参数
4、上传进度
a) 利用XMLHttpRequest我们可以实现文件的上传
b) 并且我们可以通过xhr.upload.onprogress = function (ev) {// code},监听上传的进度
c) 这时我们上传的进度信息会保存在事件对象ev里
d) ev.loaded 表示已上传的大小,ev.total表示文件整体的大小
e) var percent = ev.loaded / ev.total
xhr.upload.onprogress = function(e){
var current = e.loaded; //已上传 的 数据大小
var total = e.total; //要上传的总数据大小
//然后就可以去根据这两个数据设定进度条的表现了
}