XHR对象send方法的同异步问题

  XHR对象上的send方法不仅是用于发送数据部分,只有调用了send方法,整个HTTP请求头才会被发出,然后才是真正的内容部分。如此复杂的过程在规范中也没有具体的定义,所以目前各大浏览器上的实现都存在细微的差异,特别是同异步这个大坑再次中枪。

一个精密的实验

  其实我以前一直以为 send 方法总是同步发起的(注意这里讨论的是“发起”这个行为本身的同异步, open 方法的第三个参数始终为 true ,不讨论 false 的情况),还在讨论同异步的文章中使用了XHR对象的例子,现在看来确实是个不恰当的例子。在一些浏览器中XHR对象的 send 方法确实是同步发起的,但并不是所有浏览器都这样,可以通过下面的实验来证实(NodeJS 的部分需要  harmony  和  use_strict ):
//nodejsrequire('http').createServer(function(request,response){ response.setHeader('Content-Type','text/html'); if(request.url=='/test'){ console.log(request.url); let connection=request.connection; connection.write('HTTP/1.1 100 Continue\n\n'); console.log(100); request.on('data',function(e){ console.log(e+""); response.end('ok'); }); }else{ let path=process.cwd()+request.url; require('fs').readFile(path,function(error,data){ response.end(error?'error':data); }); };}).listen(1234); <!--test.html-->
<script>
var xhr=new XMLHttpRequest;
xhr.onreadystatechange=function(){
console.log(xhr.readyState,xhr.status);
};
xhr.open("POST","test");
xhr.send("data");
var t=new Date;
while(new Date-t<3000);
</script>
  这个测试在三大主流浏览器上测试会得到三个不同的结果:
  • Chrome39:请求同步发出,死循环不会影响请求
  • Firefox33:请求被注册到下一个消息中异步发出
  • IE11:请求的头部分同步发出,内容部分被注册到下一个消息中异步发出

实验结果影响的现实

  这个结果对实际运用有什么影响呢?在同步过程中多次调用 open 方法就能看出差异。XHR对象在调用 open 方法时会停止原来的工作,于是有以下几种情况:
  • Chrome的send是同步发出的,即使在send之后马上调用open也无法停止已经send的东西了,已经泼出去的水,根本停不下来。
  • Firefox就完全不同,由于是注册到下一个消息中,send后马上调用open就会取消掉原先注册但还没执行到的动作。
  • IE比较奇葩,在调动send时头已经发出了,这部分是收不回来的。send后马上调用open只能阻止内容部分的发出。


源引:https://www.web-tinker.com/article/20790.html

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值