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);


解析ajax核心XMLHTTPRequest对象的创建与浏览器的兼容问题

MLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始。   了解XMLHttpRequest 对象就先从创建XMLHttpRequ...
  • chuck_kui
  • chuck_kui
  • 2017年02月09日 11:41
  • 1648

XMLHttpRequest对象(简称XHR)兼容处理

IE5是第一款引入XHR对象的浏览器。在IE5中,XHR对象是通过MSXML库中的一个ActiveX对象实现的。...
  • wu_xianqiang
  • wu_xianqiang
  • 2017年04月15日 22:38
  • 396

ajax读取json格式数据或者说获取浏览器XHR中数据

XHR中有这样两组json数据 通过getJSON获取$.getJSON("{% url villa:get_expect pk=object.id %}",//url地址 ...
  • liyong5695
  • liyong5695
  • 2016年08月16日 10:03
  • 761

浏览器兼容性改造之创建兼容性XHR

1、问题描述     IE5是第一款引入XMLHttpRequest对象的浏览器。在IE5中,XMLHttpRequest对象是通过MSXML库中的一个ActiveX对象实现的。因此,在IE中可能遇...
  • xuanze520
  • xuanze520
  • 2012年10月11日 15:20
  • 2639

不同浏览器之间的一些差异整理(持续更新ing)

火狐浏览器中,非float的div前面有同一父级的float的div,此div若有背景图,要使用clear:both,才能显示背景图,而IE6.0中不用使用clear:both 在[text-d...
  • duandianyiwai
  • duandianyiwai
  • 2016年08月03日 12:15
  • 756

浅谈IE事件处理与其他浏览器的差异

1、触发事件对象(触发事件的元素被认为是目标target): (1)IE下,event对象有srcElement属性,但没有target属性。 (2)Firefox下,event对象有target属性...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月05日 13:52
  • 623

XHR 是什么?

就是XMLHttpRequest 对象。 也就是ajax功能实现所依赖的对象。 相关资料: http://www.w3school.com.cn/xml/xml_http.asp...
  • lzz957748332
  • lzz957748332
  • 2014年03月01日 17:34
  • 4383

不同浏览器之间的区别

1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-...
  • gudanyehai
  • gudanyehai
  • 2011年10月27日 17:54
  • 4066

支持xhr浏览器:超时设定加载事件进度事件

各个浏览器虽然都支持xhr,但还是有些差异。 1超时设定 IE8为xhr对象添加了一个timeout属性,表示请求在等待响应多少毫秒后就终止。再给timeout这只一个数值后,如果在规定的时间内浏...
  • lifan_3a
  • lifan_3a
  • 2013年06月21日 11:23
  • 887

XMLHttpRequest超时事件

《IE8 & 9开发实战:基于下一代IE的应用开发》第3章用AJAX和JSON来丰富Web应用程序的功能,本章将介绍Internet Explorer中的一些新功能和经过升级的功能,使开发人员能够增强...
  • lifan_3a
  • lifan_3a
  • 2013年06月21日 10:01
  • 1711
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:xhr的浏览器差异
举报原因:
原因补充:

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