FromData
现代Web 应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2 级为此定义了FormData 类型。FormData 为序列化表单以及创建与表单格式相同的数据(用于通过XHR 传输)提供了便利。下面的代码创建了一个FormData 对象,并向其中添加了一些数据。
var data = new FormData();
data.append("name", "Nicholas");
这个append()方法接收两个参数:键和值,分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。而通过向FormData 构造函数中传入表单元素,也可以用表单元素的数据预先向其中填入键值对儿:
var data = new FormData(document.forms[0]);
创建了FormData 的实例后,可以将它直接传给XHR 的send()方法,如下所示:
varxhr = createXHR();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200&& xhr.status < 300) || xhr.status == 304){
} else {
alert("Request wasunsuccessful: " + xhr.status);
}
}
};
xhr.open("post","postexample.php", true);
var form = document.getElementById("user-info");
xhr.send(new FormData(form));
使用FormData 的方便之处体现在不必明确地在XHR 对象上设置请求头部。XHR 对象能够识别传
入的数据类型是FormData 的实例,并配置适当的头部信息。
支持FormData 的浏览器有Firefox 4+、Safari 5+、Chrome 和Android 3+版WebKit
超时设定
只有IE8支持
进度事件
Mozilla 对 XHR 的另一个革新是添加了 progress事件,这个事件会在浏览器接收新数据期间周期性地触发。而 onprogress 事件处理程序会接收到一个event 对象,其 target 属性是 XHR 对象,但包含着三个额外的属性: lengthComputable、position 和 totalSize。其中, lengthComputable是一个表示进度信息是否可用的布尔值, position 表示已经接收的字节数,totalSize 表示根据Content-Length 响应头部确定的预期字节数。有了这些信息,我们就可以为用户创建一个进度指示器了。下面展示了为用户创建进度指示器的一个示例。
var xhr = createXHR();
xhr.onload = function(event){
if ((xhr.status >= 200 &&xhr.status < 300) ||xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request wasunsuccessful: " + xhr.status);
}
};
xhr.onprogress = function(event){
var divStatus = document.getElementById("status");
if (event.lengthComputable){
divStatus.innerHTML = "Received " + event.position + " of" +event.totalSize +" bytes";
}
};
xhr.open("get", "altevents.php", true);
xhr.send(null);
为确保正常执行, 必须在调用 open()方法之前添加 onprogress 事件处理程序。在前面的例子中每次触发 progress 事件,都会以新的状态信息更新HTML 元素的内容。如果响应头部中包含Content-Length 字段,那么也可以利用此信息来计算从响应中已经接收到的数据的百分比。