javascript实现获取服务器时间

获取服务器时间是Web开发中经常用到的一个功能，javascript可以通过AJAX技术向服务器发送请求获取服务器时间。以下是获取服务器时间的完整攻略：

步骤1. 创建一个API

首先，需要在服务器端创建一个API，用于返回服务器当前时间。API的地址可以是一个后端程序文件或者一个接口。

以php为例，可以通过以下代码实现：

<?php
 header('Content-Type: application/json');
 $data = array('time' => date('Y-m-d H:i:s'));
 echo json_encode($data);
?>

该API将返回一个JSON对象，包含服务器当前时间的信息。可以通过访问该API来获取服务器当前时间。

步骤2. 发送AJAX请求

javascript可以通过AJAX发送请求获取服务器时间。可以使用XMLHttpRequest对象来发送AJAX请求。以下是示例代码：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
 if (this.readyState == 4 && this.status == 200) {
   var data = JSON.parse(this.responseText);
   var serverTime = new Date(data.time);
   console.log(serverTime);
 }
};
xmlhttp.open("GET", "api.php", true);
xmlhttp.send();

上述代码中，首先创建了一个XMLHttpRequest对象。然后设置了onreadystatechange事件的回调函数，该函数将会在AJAX请求状态改变时被调用。如果请求状态为4，且HTTP状态码为200，则表示请求成功。此时，从服务器返回的数据可以通过this.responseText获取。

接着，通过JSON.parse方法解析返回的JSON字符串获取服务器返回的时间。最后，使用Date对象将该时间转换为javascript中的时间格式。

示例1. 在页面加载时获取服务器时间

以下代码可以在页面加载时获取服务器时间，并输出到控制台：

window.addEventListener('load', function() {
 var xmlhttp = new XMLHttpRequest();
 xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var data = JSON.parse(this.responseText);
    var serverTime = new Date(data.time);
    console.log(serverTime);
  }
 };
 xmlhttp.open("GET", "api.php", true);
 xmlhttp.send();
}, false);

该代码中，使用window.addEventListener方法添加了一个load事件的回调函数。在回调函数中发送了AJAX请求并获取了服务器时间，将时间输出到了控制台。

示例2. 每隔1秒钟更新一次服务器时间

以下代码可以每隔1秒钟更新一次服务器时间，并输出到控制台：

setInterval(function() {
 var xmlhttp = new XMLHttpRequest();
 xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var data = JSON.parse(this.responseText);
    var serverTime = new Date(data.time);
    console.log(serverTime);
  }
 };
 xmlhttp.open("GET", "api.php", true);
 xmlhttp.send();
}, 1000);

该代码中，使用setInterval方法每隔1秒钟执行一次回调函数。在回调函数中发送了AJAX请求并获取了服务器时间，将时间输出到了控制台。