XMLHttpRequest2规范

文章目录

1. 1. XMLHttpRequest
   1. 1.1. 初始化
   2. 1.2. 传输进度
2. 2. FormData
   1. 2.1. 初始化
   2. 2.2. append方法
3. 3. ProgressEvent
   1. 3.1. 示例
   2. 3.2. 扩展:progress标签

XMLHttpReque Level 2 对原有XMLHttpReque对象进行了增强，除此之外，还新增了两个对象。

新规范如下图示：

XMLHttpRequest

初始化

new的过程和之前是一样的，跨域请求需要加上withCredentials这个属性

var xhr = new XMLHttpRequest();
//跨域请求
xhr.withCredentials = true;

传输进度

进度分为下载进度和上传进度：

// 下载进度
xhr.addEventListener('progress',uploadProgressHandler,false);
// 上传进度
xhr.upload.addEventListener('progress',downloadProgressHa

FormData

初始化

var fd = new FormData();

append方法

FormData 接口的append() 方法 会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键。如果指定的键已经存在,会把新值添加到已有值集合的后面。

这个方法有两个版本：一个有两个参数的版本和一个有三个参数的版本:

// value为string类型或者blob类型(比如File)
fd.append(name,value);

// 如果value是blob类型，则第三个参数为blob的文件名
// filename默认值为'blob'
fd.append(name,value,filename)

blob全称为binary large object,可译为’二进制大对象’

ProgressEvent

示例

function progressHandler(e) {
    // 触发一次或者多次
    if(e.lengthComputable) {
        console.log(e.total);
        console.log(e.loaded)
    }
}
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.upload.addEventListener('progress',
progressHandler,false);

如上，在监听到progress事件之后，会返回三个属性

1. lengthComputable：资源长度是否可计算
2. total：资源总长度
3. loaded：已处理资源长度

它们的单位都是字节数

扩展:progress标签

html5新增了<progress>标签，我们来看一下这个标签

使用很简单：

<progress max="100" value="50"></progress>

效果：

PS：可以用chrome控制台模拟慢网速