JavaScript获取服务器时间的方法详解


Posted in Javascript onDecember 11, 2016

本文实例讲述了JavaScript获取服务器时间的方法。分享给大家供大家参考,具体如下:

Javascript是运行在客户端的脚本,我们一般都用new Date()来获取当前时间,但是得到的是客户端的时间,客户端时间是随意更改的,如果要做一个产品发布倒计时的话,客户端时间一改,就要闹笑话了。业务中需要用到服务器时间的场景还有很多,那么仅仅通过js怎么拿到服务器时间呢?事实上,只需要一个ajax请求就搞定,通过读取XMLHttpRequest对象的响应头里面的时间戳得到当前服务器时间!

原理就是这么简单:通过ajax向服务器发送请求,当服务器收到请求后即可读取响应头的时间戳了,不管请求成功或失败,都可以拿到时间戳。怎么判断服务器收到请求了呢?当ajax请求发送之后,XMLHttpRequest有5中状态变化:

XMLHttpRequest.readyState值 表示的意思
0 未初始化,已经创建一个XMLHttpRequest对象,但是还没有初始化
1 未发送,代码已经调用了xmlhttprequest open()方法并且xmlhttprequest已经准备好把一个请求发送到服务器
2 已发送,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应,可以读取响应头信息了
3 正在接收,已经接收到http响应头部信息,但是消息体部分还没有完全接收完毕
4 已加载,响应已经被完全接收

 

通过监听XMLHttpRequest的readystatechange事件来判断当前处于哪种状态,从表中可以看出,当XMLHttpRequest.readyState值为2时就可以读取响应头拿到我们要的时间戳了。代码如下:

<p id="time"></p>
<script>
ajax()
 function ajax(option){
 var xhr = null;
 if(window.XMLHttpRequest){
  xhr = new window.XMLHttpRequest();
 }else{ // ie
  xhr = new ActiveObject("Microsoft")
 }
 // 通过get的方式请求当前文件
 xhr.open("get","/");
 xhr.send(null);
 // 监听请求状态变化
 xhr.onreadystatechange = function(){
  var time = null,
   curDate = null;
  if(xhr.readyState===2){
  // 获取响应头里的时间戳
  time = xhr.getResponseHeader("Date");
  console.log(xhr.getAllResponseHeaders())
  curDate = new Date(time);
  document.getElementById("time").innerHTML = "服务器时间是:"+curDate.getFullYear()+"-"+(curDate.getMonth()+1)+"-"+curDate.getDate()+" "+curDate.getHours()+":"+curDate.getMinutes()+":"+curDate.getSeconds();
  }
 }
 }
</script>

到此,服务器时间就取到了。其实响应头里面的信息不仅仅有时间戳,可以使用xhr.getAllResponseHeaders()来获取整个响应头信息,响应头里面还包括服务器类型及版本号、请求的文件类型及编码等其他信息(见下图一),都可以通过这种方式读取。为了证明获取的确实是服务器时间,我用手机测试了一下(见下图二),当前北京时间是2015年4月20日21:59,PC机时间我调成了2015年2月1日 21:16

图一

 JavaScript获取服务器时间的方法详解

图二

 JavaScript获取服务器时间的方法详解

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
js生成word中图片处理方法
Jan 06 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 #Javascript
AngularJS过滤器filter用法分析
Dec 11 #Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 #Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 #Javascript
利用JS判断鼠标移入元素的方向
Dec 11 #Javascript
实现JavaScript高性能的数据存储
Dec 11 #Javascript
探索Javascript中this的奥秘
Dec 11 #Javascript
You might like
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
Array对象方法参考
2006/10/03 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
javascript计时器详解
2015/02/28 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
时尚圣经:The Fashion Bible
2019/03/03 全球购物
开会迟到检讨书
2014/01/08 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
村官工作鉴定评语
2014/01/27 职场文书
中学生自我评价范文
2014/02/08 职场文书
委托书怎样写
2014/08/30 职场文书
2014年团总支工作总结
2014/11/21 职场文书
内勤岗位职责
2015/02/10 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书