首页 > Web开发 > 详细

利用XMLHttpRequest.readyState实现倒计时

时间:2015-10-13 18:36:58      阅读:332      评论:0      收藏:0      [点我收藏+]

转帖: http://www.barretlee.com/blog/2013/04/13/cb-readyState_3_interactive/

技术分享

还剩多久多久,这个东西你是怎么做的。

不推荐方案

脑残方案一:

把截止时间保存到cookie中,然后与现在时间做差值,进行比较。

方案评价:

    1. 如果用户cookie没开怎么办?

    2. cookie不宜过多,cookie过期管理等麻烦!

脑残方案二:

把服务器的本地时间作为参数送到客户端,然后js相关处理

方案评价:

     因网络延迟等原因存在误差

 

   先给你看一张图:(向服务器请求的某个任意文件)

技术分享

好像有的同学瞬间就懂了。

是的,在请求头中就包含了服务器的标准时间。那么下一步就是怎么获取这个Date。

XMLHttpRequert

我们知道在XMLHttpRequest中用readyState来表示相应状态。

技术分享

大家可能很少用到readyState为3这个状态,那么这个问题,就要用到他了。

Solution [解决方案]

<script type="text/javascript">
var xhr = new XMLHttpRequest();
 xhr.open(‘get‘, ‘testServer.txt‘, true); //这里的testServer.txt,其实我没有创建,完全可以不需要这个文件,我们只是要时间罢了
 xhr.onreadystatechange = function(){
if(xhr.readyState == 3){ //状态3响应
var header = xhr.getAllResponseHeaders(); //获得所有的头信息
console.log(header);//会弹出一堆信息
console.log(xhr.getResponseHeader(‘Date‘)); //弹出时间,那么可以利用获得的时间做倒计时程序了。
     }
 }
 xhr.send(null);
</script>

注:上述代码IE9以下版本不兼容,不清楚的童鞋自己百度AJAX兼容性等关键词。

Reference [参考资料]

  1. Exodia

  2. 百度文库

利用XMLHttpRequest.readyState实现倒计时

原文:http://www.cnblogs.com/abapscript/p/4875186.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!