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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
jQuery的框架介绍
May 11 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
vue2单元测试环境搭建
May 24 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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面试题附答案
2009/01/07 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
jQuery参数列表集合
2011/04/06 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
js实现网页收藏功能
2015/12/17 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
ant design实现圈选功能
2019/12/17 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
详解python 注释、变量、类型
2018/08/10 Python
详解python中的Turtle函数库
2018/11/19 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
读书之星事迹材料
2014/05/12 职场文书
测控技术自荐信
2014/06/05 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS