XMLHttpRequest2级

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 字段,那么也可以利用此信息来计算从响应中已经接收到的数据的百分比。



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值