FormData
现代Web应用中频繁使用的一项功能就是表单数据的序列化,XmlHttpRequest 2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据提供了便利。下面我们先来创建一个FormData对象。
var data = new FormData();
data.append('name','zhangmengying');
append方法接收两个参数。分别对应表单字段的名字和字段中包含的值。
创建了FormData的实例后,可以将它直接传给XHR的send()方法。
var xhr = creatXMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
...
}else{
...
}
xhr.open('post','...',true);
xhr.send(data);
使用FormData的方便之处在于不必明确的在XHR对象上设置请求头。XHR对象能够识别传入的数据类型是FormData的实例。
超时设定
IE8为XHR对象添加了一个timeout属性。表示请求在等待响应多少毫秒之后就终止。在给timeout设置一个数值后,如果在规定的时间内浏览器还没有接受到响应,那么就会触发timeout事件,进而会调用ontimeout事件处理程序。下面我们来看一个例子:
var xhr = creatXMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
try{
if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
...
}else{
...
}
}catch(ex){
...
}
xhr.open('post','...',true);
xhr.timeout = 1000;
xhr.ontimeout = function(){
...
};
xhr.send(null);
在上面的例子中,timeout属性设置为1000毫秒,这就意味着如果请求在1秒钟之内还没有返回,就会自动终止。请求终止时,会调用ontimeout事件处理程序。但此时xhr.readyState可能已经变成了4,这就意味着会调用onreadystatechange事件处理程序。可是,如果在超时终止请求之后在访问status属性,就会导致错误。为避免浏览器报告错误,可以将检查status属性语句封装在try-catch语句当中。