1. 程式人生 > >Javascript獲取服務器時間

Javascript獲取服務器時間

length soft 20px tcl ati seconds obj 文件 獲得

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獲取服務器時間