xhr的浏览器差异

原创 2012年04月08日 14:46:25
各个浏览器虽然都支持xhr,但还是有些差异。

1超市设定
IE8为xhr对象添加了一个timeout属性,表示请求在等待响应多少毫秒后就终止。
再给timeout这只一个数值后,如果在规定的时间内浏览器还没有接收到响应,那么就会触发timeout事件,进而会调用ontimeout事件处理程序。

var xhr = creatXHR();
xhr.onreadystatechange = function(event){
try {
      if(xhr.readyState ==4){
              if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){
                          alert(xhr.responseText);
                   }
                    else {
                             alert("Request was unsuccessful:" + xhr.status);
                   }
     }
} catch(ex){
                       // 假设ontimeout事件处理程序处理
      }
};

xhr.open("get" , "timeout.php" , true);
xhr.timeout = 1000;
xhr.ontimeout = function(){
   alert("Request did not return in a second.");
};
xhr.send(null);


2加载事件

Firfox在实现XHR对象的某个版本是时,曾致力于简化异步交互模型。于是引入load事件,用以代替readystatechange事件。响应接收完毕后将触发load事件,因此也就没有必要去检查readystate属性了。最终结果为:
var xhr = creatXHR();
xhr.onload = function(event){
 if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){
                          alert(xhr.responseText);
                   }
                    else {
                             alert("Request was unsuccessful:" + xhr.status);
                   }
     };
xhr.open("get","altevents.php",true);
xhr.send(null);

只要浏览器接收到服务器的响应,不管其状态如何,都会触发load事件。而这意味着你必须检查status属性,才能确定数据是否真的已经可用了。

3.进度事件

Mozilla对XHR的另一个革新是添加了progress事件,这个时间会在浏览器接受新数据期间周期性的触发,而onprogress事件处理程序会接收到一个event对象,其target属性是XHR对象,但包含着两个额外的属性:position和totalSize。其中position表示已经接受的字节数,totleSize表示根据Content-Length响应头部确定的预期字节数。
var xhr = creatXHR();
xhr.onload = function(event){
 if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){
                          alert(xhr.responseText);
                   }
                    else {
                             alert("Request was unsuccessful:" + xhr.status);
                   }
     };
xhr.onprogress = function(event){
var.divStatus = document.getElementById("status");
  divStatus.innerHTML = "Received" + event.position + "of" + event.totalSize +"bytes";
};

xhr.open("get","altevents.php",true);
xhr.send(null);


相关文章推荐

IE、FF、Chrome浏览器中的JS差异介绍

原文链接:http://www.jb51.net/article/40533.htm 因为浏览器公司各自为利益考虑,到目前为止各浏览器的HTML标准或是JS标准都还未统一。在平常的开发中,我们常使用...

option属性的js事件浏览器差异

  • 2011年09月27日 18:06
  • 854B
  • 下载

各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异

问题描述 一般情况下,onbeforeunload 事件处理函数内会写入一些提示性语句,当用户的浏览器跳转到其他页面时,用来提醒用户当前页面将要跳转,请用户决定是否观看新页面。 或者在 onbef...

各浏览器对于获取文档水平及垂直方向滚动条位置(scrollLeft、scrollTop)时的参考元素存在差异

 问题描述 针对获取页面的垂直滚动条的位置,IE Firefox Opera 标准模式下使用 document.documentElement.scrollLeft 获取页面的水平滚动条位置,...

JavaScript细微差别(函数声明与函数表达式及浏览器差异)

我将描述一个JavaScript的古怪问题。幸运的是我之前从未在实际工作中出现问题。我确信function a(){}和var a = function (){}是完全相同的的。...
  • tt361
  • tt361
  • 2013年07月11日 16:06
  • 1765

window.open 浏览器差异

window.open 浏览器差异. 首先引入 w3help的,莫的测试: 原帖地址:http://www.w3help.org/zh-cn/causes/BX1053   w3he...
  • li_ser
  • li_ser
  • 2012年10月09日 11:16
  • 578

浏览器的鼠标坐标值获取及pageX、clientX、screenX的差异

写在前面获取方法比较简单。重点在于理解三种值的实际意义。代码screen: client: page: 三个...

解决document.elementFromPoint浏览器差异问题

While writing a new drag & drop component, i came across the javascript function elementFromPoint(x,...
  • zsms_sk
  • zsms_sk
  • 2013年12月08日 03:19
  • 1382
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:xhr的浏览器差异
举报原因:
原因补充:

(最多只允许输入30个字)