XMLHttpRequest 异步对象
参考链接: MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX
一个成功的响应：有两个条件
1：服务器成功响应了。
2：异步对象的响应状态为4。
- xhr.status == 200 可以获取当前服务器的响应状态。
- xhr.readyState == 4。异步对象发送请求给服务器，服务器响应数据内容解析完毕，可以使用了。
- xhr.responseText 服务器返回的数据 或者是XML数据格式。
- readystatechange 监听客户端异步对象状态变化事件
- readyState 可以检测 XHR 对象的 readyState 属性，该属性表示请求 / 响应过程的当前活动阶段
超时预定
XMLHttpRequest 2 级规范中为 XHR 对象添加了一个 timeout 属性，表示请求在等待响应多少毫秒之后就终止。
在给 timeout 设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发 timeout 事件，
进而会调用 ontimeout 事件处理程序。如果在超时之后还去访问status属性就会导致错误，可以在status中封装
一个try-catch语句。
进度事件
load事件: 简化了异步交互模型，代替了readystatechange 响应接收完毕后将触发 load 事件，因此也就没有必 要去检查 readyState 属性了。
progress事件: 这个事件会在浏览器接收新数据期间周期性地触发, 事件对象lengthComputable、position 和 totalSize。
1：lengthComputable 是一个表示进度信息是否可用的布尔值:。
2：position 表示已经接收的字节数:。
3：totalSize 表示根据 Content-Length 响应头部确定的预期字节数。
作用用于计算从响应中已经接收到的数据的百分比。
FormData的诞生
XMLHttpRequest 2 级为此定义了 FormData 类型。FormData 为序列化表单以及创建与表单格式相同的数据。
第一种使用方式:
向FormData 构造函数中传入from表单元素，也可以用表单元素的数据预先向其中填入键值对
new FormData(formDM); 传给 XHR 的 send()方法，如下所示：
第二种使用方式:
var data = new FormData();
data.append(“name”, “Nicholas”);
接收两个参数：键和值，分别对应表单字段的名字name和字段中包含的值value。
可以像 这样添加任意多个键值对儿。
使用formData序列化表单即使是post请求，依然不用设置请求头了, XHR
发生send发生传递的是formDate实例就自动的添加上了header头。
log打印控制台是看不到被序列化的字符串数据 直接传就行了。
比如post请求在传递的参数在 network中的 header头下边的 formData中。
xhr.send(from); from得到的是这样的字符串 name=tom123&pass=123;
提交表单
enctype属性的使用
当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的取值有：
application/x-www-form-urlencoded：未指定属性时的默认值。
multipart/form-data：此值用于一个 type 属性设置为 “file” 的 元素。
text/plain：(HTML5)
文件上传
- 提交表单或者上传二进制文件– 使用纯Ajax或者FormData对象
- 默认情况下，服务器对 POST提交的Web表单并不会一视同仁。
必须是username=张三&password=123456 用于获取客户端提交过来的表单值。
1 首先将 Content-Type 头部信息设置为 application/x-www-form-urlencoded，也就是表单提交时的内容类型
2 要将页面中表单的数据进行序列化，然后再通过 XHR 发送到服务器。
JSON格式数据转换为键值对的类型 name=zs&age=30这是格式。
表单提交(文件上传)
下面的代码是iviewUI库文件上传的部分html源码,感兴趣的可以去了解一下。
<input
ref="input"
type="file"
:class="[prefixCls + '-input']"
@change="handleChange"
:multiple="multiple"
:accept="accept">
