快捷導(dǎo)航

JavaScript獲取服務(wù)器時(shí)間的方法詳解

更新時(shí)間：2016年12月11日 11:51:26 作者：wangmeijian

這篇文章主要介紹了JavaScript獲取服務(wù)器時(shí)間的方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript基于ajax獲取服務(wù)器時(shí)間的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript獲取服務(wù)器時(shí)間的方法。分享給大家供大家參考，具體如下：

Javascript是運(yùn)行在客戶端的腳本，我們一般都用new Date()來獲取當(dāng)前時(shí)間，但是得到的是客戶端的時(shí)間，客戶端時(shí)間是隨意更改的，如果要做一個(gè)產(chǎn)品發(fā)布倒計(jì)時(shí)的話，客戶端時(shí)間一改，就要鬧笑話了。業(yè)務(wù)中需要用到服務(wù)器時(shí)間的場(chǎng)景還有很多，那么僅僅通過js怎么拿到服務(wù)器時(shí)間呢？事實(shí)上，只需要一個(gè)ajax請(qǐng)求就搞定，通過讀取XMLHttpRequest對(duì)象的響應(yīng)頭里面的時(shí)間戳得到當(dāng)前服務(wù)器時(shí)間！

原理就是這么簡單：通過ajax向服務(wù)器發(fā)送請(qǐng)求，當(dāng)服務(wù)器收到請(qǐng)求后即可讀取響應(yīng)頭的時(shí)間戳了，不管請(qǐng)求成功或失敗，都可以拿到時(shí)間戳。怎么判斷服務(wù)器收到請(qǐng)求了呢？當(dāng)ajax請(qǐng)求發(fā)送之后，XMLHttpRequest有5中狀態(tài)變化：

XMLHttpRequest.readyState值	表示的意思
0	未初始化，已經(jīng)創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，但是還沒有初始化
1	未發(fā)送，代碼已經(jīng)調(diào)用了xmlhttprequest open()方法并且xmlhttprequest已經(jīng)準(zhǔn)備好把一個(gè)請(qǐng)求發(fā)送到服務(wù)器
2	已發(fā)送，已經(jīng)通過send()方法把一個(gè)請(qǐng)求發(fā)送到服務(wù)器端，但是還沒有收到一個(gè)響應(yīng)，可以讀取響應(yīng)頭信息了
3	正在接收，已經(jīng)接收到http響應(yīng)頭部信息，但是消息體部分還沒有完全接收完畢
4	已加載，響應(yīng)已經(jīng)被完全接收

通過監(jiān)聽XMLHttpRequest的readystatechange事件來判斷當(dāng)前處于哪種狀態(tài)，從表中可以看出，當(dāng)XMLHttpRequest.readyState值為2時(shí)就可以讀取響應(yīng)頭拿到我們要的時(shí)間戳了。代碼如下：

<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的方式請(qǐng)求當(dāng)前文件
 xhr.open("get","/");
 xhr.send(null);
 // 監(jiān)聽請(qǐng)求狀態(tài)變化
 xhr.onreadystatechange = function(){
  var time = null,
   curDate = null;
  if(xhr.readyState===2){
  // 獲取響應(yīng)頭里的時(shí)間戳
  time = xhr.getResponseHeader("Date");
  console.log(xhr.getAllResponseHeaders())
  curDate = new Date(time);
  document.getElementById("time").innerHTML = "服務(wù)器時(shí)間是："+curDate.getFullYear()+"-"+(curDate.getMonth()+1)+"-"+curDate.getDate()+" "+curDate.getHours()+":"+curDate.getMinutes()+":"+curDate.getSeconds();
  }
 }
 }
</script>

到此，服務(wù)器時(shí)間就取到了。其實(shí)響應(yīng)頭里面的信息不僅僅有時(shí)間戳，可以使用xhr.getAllResponseHeaders()來獲取整個(gè)響應(yīng)頭信息，響應(yīng)頭里面還包括服務(wù)器類型及版本號(hào)、請(qǐng)求的文件類型及編碼等其他信息（見下圖一），都可以通過這種方式讀取。為了證明獲取的確實(shí)是服務(wù)器時(shí)間，我用手機(jī)測(cè)試了一下（見下圖二），當(dāng)前北京時(shí)間是2015年4月20日21:59，PC機(jī)時(shí)間我調(diào)成了2015年2月1日 21:16

圖一