Javascript獲取伺服器時間
阿新 • • 發佈:2018-12-04
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 = newwindow.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>