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

 更新时间:2016年12月11日 11:51:26   作者:wangmeijian  
这篇文章主要介绍了JavaScript获取服务器时间的方法,结合实例形式详细分析了javascript基于ajax获取服务器时间的相关操作技巧,需要的朋友可以参考下

本文实例讲述了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动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

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

相关文章

  • 微信小程序audio组件在ios端无法播放的解决办法

    微信小程序audio组件在ios端无法播放的解决办法

    audio是音频组件,用于播放一个基于http协议的音频资源,这篇文章主要给大家介绍了关于微信小程序audio组件在ios端无法播放的解决办法,需要的朋友可以参考下
    2021-07-07
  • 小程序表单校验uni-forms的正确使用方式以及避坑指南

    小程序表单校验uni-forms的正确使用方式以及避坑指南

    因微信小程序上没有自带表单验证,为了实现就自己做了个表单验证,下面这篇文章主要给大家介绍了关于小程序表单校验uni-forms的正确使用方式以及避坑指南,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 深入理解 webpack 文件打包机制(小结)

    深入理解 webpack 文件打包机制(小结)

    这篇文章主要介绍了深入理解 webpack 文件打包机制(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 能说明你的Javascript技术很烂的五个原因分析

    能说明你的Javascript技术很烂的五个原因分析

    Javascript在互联网上名声很臭,但你又很难再找到一个像它这样如此动态、如此被广泛使用、如此根植于我们的生活中的另外一种语言
    2011-10-10
  • Webpack按需加载打包chunk命名的方法

    Webpack按需加载打包chunk命名的方法

    这篇文章主要给大家介绍了关于Webpack按需加载打包chunk命名的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Webpack具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • 详解JavaScript RegExp对象

    详解JavaScript RegExp对象

    RegExp对象是原生JavaScript中表示正则表达式的对象。接下来通过本文给大家详细介绍javascript regexp对象知识,需要的的朋友参考下吧
    2017-02-02
  • 详解a++和++a的区别

    详解a++和++a的区别

    搞开发已经很久了,一直搞不懂a++和++a到底有所什么不同,后来通过查阅相关资料总结出一点规律,下面小编通过本文给大家介绍
    2017-08-08
  • JavaScript原生编写《飞机大战坦克》游戏完整实例

    JavaScript原生编写《飞机大战坦克》游戏完整实例

    飞机大战坦克是一款小游戏,相信很多朋友都有玩过,由于最近在深入学习Javascript,所以想着用利用Javascript来实现这个游戏,下面这篇文章主要介绍了如何利用JavaScript原生编写《飞机大战坦克》游戏,需要的朋友可以参考下
    2017-01-01
  • 谷歌浏览器不支持showModalDialog模态对话框的解决方法

    谷歌浏览器不支持showModalDialog模态对话框的解决方法

    谷歌浏览器不支持showModalDialog模态对话框和无法返回returnValue,这个问题,想必很多朋友都有遇到过吧,解决方法很简单,下面的思路,大家可以看看
    2014-09-09
  • 在IE8上JS实现combobox支持拼音检索功能

    在IE8上JS实现combobox支持拼音检索功能

    这篇文章主要介绍了在IE8上JS实现combobox支持拼音检索功能的相关资料,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05

最新评论