码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript获取服务器时间

时间:2018-12-04 14:35:21      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:mon   soft   log   code   并且   重定向   icon   不显示   对象   

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

  原理就是这么简单:通过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>

应用场景:判断时间获取的时间是否符合订餐时间

 <script>
function updateorder(username, status, starthour, endhour) {
        //Logger log = Logger.getLogger(this.getClass());
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new window.XMLHttpRequest();
        } else { // ie
            xhr = new ActiveObject("Microsoft")
        }
        // 通过get的方式请求当前文件
        xhr.open("get", "/javawebservlet/index.jsp");
        xhr.send(null);
        // 监听请求状态变化
        xhr.onreadystatechange = function () {
            var time = null;
            if (xhr.readyState === 2) {
                // 获取响应头里的时间戳
                time = xhr.getResponseHeader("Date");
                console.log(xhr.getAllResponseHeaders());
                var date = new Date(time);
                console.log("转换后的中国时间为: "+date)
                //1. 创建Date对象
//        var date = new Date();
                //5. 获得当前小时
                var hour = date.getHours();
                //6. 获得当前分钟
                var min = date.getMinutes();
                //7. 获得当前秒
                var sec = date.getSeconds();
//                alert(hour + ":" + min + ":" + sec);
                var curr = hour * 60 * 60 + min * 60 + sec;
                var startime = starthour * 60 * 60 + 30 * 60;
                var endtime = endhour * 60 * 60 + 15 * 60;
                var startimetext = "还没有到订餐时间!";
                var endtimetext = "吃饭不积极,订餐已经结束了!";
                if (username.length == 0) {
                    layer.msg(‘请重新登录!‘, {icon: 1, time: 3000});
                    //重定向,打开新页面同时把老页面关闭
                    window.top.location.href = "/javawebservlet/login.jsp"
                } else {
                    if (curr < startime) {
                        //alert("还没有开始");
                        layer.open({
                            type: 1
                            , offset: ‘auto‘
                            , id: ‘layerDemo‘ + 1 //防止重复弹出
                            , content: ‘<div style="padding: 20px 100px;">‘ + startimetext + ‘</div>‘
                            , btn: ‘关闭全部‘
                            , btnAlign: ‘c‘ //按钮居中
                            , shade: 0 //不显示遮罩
                            , yes: function () {
                                layer.closeAll();
                            }
                        });
                    } else if (curr > endtime) {
//            alert("已经结束");
                        layer.open({
                            type: 1
                            , offset: ‘auto‘
                            , id: ‘layerDemo‘ + 1 //防止重复弹出
                            , content: ‘<div style="padding: 20px 100px;">‘ + endtimetext + ‘</div>‘
                            , btn: ‘关闭全部‘
                            , btnAlign: ‘c‘ //按钮居中
                            , shade: 0 //不显示遮罩
                            , yes: function () {
                                layer.closeAll();
                            }
                        });
                    } else if (curr >= startime && curr <= endtime) {
                        layer.msg(‘订餐成功!‘, {icon: 1, time: 3000});
                        window.location.href = "/javawebservlet/UpdateStatusServlet?username=" + username + "&status=" + status;
                    }

                }

            }
        }
</script>
<span class="layui-btn layui-btn-normal layui-btn-mini" onclick=‘updateorder("${username}","1","15","18")‘>一起订餐</span>

 

Javascript获取服务器时间

标签:mon   soft   log   code   并且   重定向   icon   不显示   对象   

原文地址:https://www.cnblogs.com/appium/p/10063581.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!