XMLHttpRequest异步对象

XMLHttpRequest 异步对象

参考链接: MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX

一个成功的响应：有两个条件:
1：服务器成功响应了。
2：异步对象的响应状态为4。

1 xhr.status == 200 可以获取当前服务器的响应状态。
2 xhr.readyState == 4。异步对象发送请求给服务器，服务器响应数据内容解析完毕，可以使用了。
3 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" 的 <input> 元素。
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这是格式。

表单提交(文件上传)

	<input
		ref="input"
		type="file"
		:class="[prefixCls + '-input']"
		@change="handleChange"
		:multiple="multiple"
		:accept="accept">