XMLHttpRequest对象的进阶

一，FormData类型

• 现在web应用中频繁使用的一项功能就是表单数据的序列化（将表单对象序列化为字符串）；
• 为此XMLHttpRequest新定义了FormData类型；FormData为序列化表单以及创建表单格式相同的数据提供了便利；

 // 为按钮添加点击事件
        btn.onclick=function(){
            // 将普通的html表单转换成表单对象
            var formData=new FormData(form);
            // 创建ajax对象
            var xhr=new XMLHttpRequest();
            // 配置ajax
            xhr.open("post","http://localhost:3000/formData");
            // 发送请求
            xhr.send(formData);
            // 监听xhr对象下面的noload事件
            xhr.onload=function(){
                // 对http状态码进行判断
                if(xhr.status==200){
                    console.log(xhr.responseText);
                }
            };
        };

FormData对象下的实例方法：
1，formData.get(“key”)；根据name获取表单对象的值；

var formData=new FormData(form);
formData.get("username");

2，formData.set(“key”,“value”) ：根据key设置表单对象的值；
// 如果设置的表单属性存在，就会覆盖属性原来的值；如果设置的表单的对象没有这个属性，就会创建这个表单属性

var formData=new FormData(form);
formData.set("username","admin");

3，formData.delete(‘key’) ：根据key删除表单对象属性中的值；

// 删除用户输入的密码
formData.delete("password");

4，formData.append(“key”，value)： 向表单中追加数据

formData.append("username","itheima");
//  会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键。

• 使用FormData方便之处就是不用明确的在xhr对象上设置请求头信息；xhr能够自动识别传入的数据类型是Fomrdata实例，并且配置设置头部信息；

二，超时设定timeout

• xhr对象中的timeout属性；表示请求在等待响应多少毫秒之后就终止；
• 给timeout设置一个数值后，如果在规定的时间没浏览器还没有接收到响应；那么就会触发timeout事件，然后调用ontimeout事件处理程序；

xhr.timeout = 10000; // 十秒
xhr.ontimeout = function(){
	this.$message.error('连接超时，请重新请求');
}

三，进度事件：

• ProgressEvent 接口是测量如 HTTP 请求（一个XMLHttpRequest请求，或者一个 <img，<audio，<video，<style 或 <link 等底层资源的加载）等底层流程进度的事件。
• 常见的进度事件：

loadstart：在接收到响应数据的第一个字节时触发；
progress：在接收到响应数据时不断的持续触发；
error：在请求发送错误时触发；
abort：在调用abort()方法时终止连接时触发；
load：在接收到完整的响应数据时触发；
loadend：在通信完成或者触发error，abort，load事件后触发；

• 注意：每一个请求都是从触发loadstart事件开始，接下来是一个或者多个progress事件，然后触发error，abort或者load中的一个，最后以loadend事件结束；

1，load事件：

• xhr引入了load事件用于替代readystatechange事件，响应接收完毕后将会触发Load事件，因此也就没有必要再去检查readystate属性了；而onload事件处理程序将会接收到一个event对象，其target属性就指向了xhr对象；因此可以访问到xhr对象的所有方法和属性；
• 只有浏览器接收到服务器的响应，不管其状态如何，说明请求过程是成功的，都会触发Load事件，只是需要检查status属性，才能确定返回的数据是否正确可用；

2，progress事件：（内容有变化，阅读最新版）

• 这个事件会在浏览器接收响应数据期间不断的触发；而onprogress事件处理程序会接收到一个event对象，其target属性是xhr对象，但是包含了三个额外的属性；lengthComputable，position和totalsize；其中lengthComputable是一个表示进度是否可用的布尔值，position表示已经接收的字节数，totalsize表示本次请求总的字节数（根据content-length响应头确定下来的字节数）；根据这些信息我们可以创建一个进度指示条；