XMLHttpRequest Level2 的新特性

---

一、旧版本 XMLHttpRequest 的缺点

1. 只支持文本数据的传输，无法用来读取和上传文件
2. 传送和接收数据时，没有进度信息，只能提示有没有完成

二、XMLHttpRequest Level2 的新功能

1. 可以设置 HTTP 请求的时限
2. 可以使用 FormData 对象管理表单数据
3. 可以上传文件
4. 可以获得数据传输的进度信息

1. 设置 HTTP 请求时限

设置请求时限一般会结合 xhr 对象的 timeout 属性和 ontimeout 事件。

• timeout 属性：用于设置请求时限，当数据请求超过时限, 则自动停止 HTTP 请求，单位, 毫秒(ms), 1秒 = 1000毫秒。
• ontimeout 事件：会在数据请求超过时限时被触发，必须结合 timeout 属性使用。如：
  

2. 利用 FormData 对象管理表单数据

HTML5 新增了一个 FormData 对象，可以模拟表单操作。

• 使用 FormData 对象的步骤

1. 新建一个空的 FormData 对象
   var fd = new FormData();
2. 为 FormData 对象添加表单项, 调用 append() 方法
   fd.append() ，有两个参数：属性名字符串、属性值字符串
3. 创建 xhr 对象
4. xhr 对象调用 opend() 方法, 发送 POST 请求
5. xhr 对象调用 send() 方法, 传入 fd 对象作为参数

示例：

• 使用 FormData 对象获取网页中表单的数据

1. 获取表单元素
2. 监听表单元素的 submit 事件
3. 阻止表单 默认提交行为
4. 创建 FormData 对象，将表单元素传入构造函数
5. 创建 xhr 对象
6. xhr 对象发起 POST 请求，将 FormData 对象作为 send() 函数的参数
7. 监听 xhr 对象的 onreadystatechange 事件

示例：

3. 上传文件

步骤：

1. 定义 UI 结构 (DOM 结构)
   

2. 为上传按钮绑定 click 事件, 验证是否选择了文件
   

3. 创建 FormData 对象, 并向 FormData 中追加文件
   

4. 创建 xhr 对象, 并使用 xhr 对象发起上传文件的请求
   

5. 监听 xhr 对象的 onreadystatechange 事件, 获取服务器响应数据, 并将数据渲染到页面中
   

4. 获取文件的上传进度

新版本的 XMLHttpRequest 对象中，可以通过监听 xhr.upload.onprogress 事件，来获取到文件的上传进度。

• onprogress 事件对象的属性：

1. lengthComputable ：布尔值，表示当前上传的资源是否具有可计算的长度，只有当这个属性为 true 时才能计算上传进度。
2. loaded ：已传输的字节数
3. total ：总字节数

示例：

---

完