本文详解如何通过JavaScript的XMLHttpRequest对象获取服务器时间。利用ajax请求读取响应头中的时间戳，无需后端配合即可实现。文章解析了readyState状态变化，特别是状态2时读取响应头的原理，并提供完整代码示例及多设备测试结果，适用于倒计时等对客户端时间敏感的场景。
本文介绍一种利用JavaScript获取服务器时间的方法，供读者参考。
获取服务器时间的原理
JavaScript运行在客户端，通常使用new Date()获取本地时间。由于客户端时间可被用户随意修改，若用于产品发布倒计时等场景，可能导致显示错误。在实际业务中，有时需要通过纯前端方式获取服务器时间。实现这一目标的关键在于发起一个ajax请求，并读取XMLHttpRequest对象响应头中包含的时间戳信息。
基本思路是：通过ajax向服务器发送请求，无论请求最终成功或失败，只要服务器响应，即可读取响应头中的时间戳。判断服务器是否已处理请求，需关注XMLHttpRequest对象的5种状态变化：
| XMLHttpRequest.readyState值 | 表示的意思 |
| 0 | 未初始化，已经创建一个XMLHttpRequest对象，但是还没有初始化 |
| 1 | 未发送，代码已经调用了xmlhttprequest open()方法并且xmlhttprequest已经准备好把一个请求发送到服务器 |
| 2 | 已发送，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应，可以读取响应头信息了 |
| 3 | 正在接收，已经接收到http响应头部信息，但是消息体部分还没有完全接收完毕 |
| 4 | 已加载，响应已经被完全接收 |
XMLHttpRequest状态监听与代码实现
通过监听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程序设计有所帮助。