利用XMLHttpRequest響應頭部的Date來做倒計時

關鍵詞：倒計時 XMLHttpRequest readyState Date AJAX

 

Problem [問題描述]

先看看這個：（搜狗團購網站）

還剩多久多久，這個東西你是怎么做的。

 

不推薦方案

腦殘方案一：

　　把截止時間保存到cookie中，然后與現在時間做差值，進行比較。

　　方案評價：

　　　　1. 如果用戶cookie沒開怎么辦？

　　　　2. cookie不宜過多，cookie過期管理等麻煩！

 

腦殘方案二：

　　把服務器的本地時間作為參數送到客戶端，然后js相關處理

　　方案評價：

　　　　 因網絡延遲等原因存在誤差

 

屌絲看完變高富帥^_^

　  先給你看一張圖：（向服務器請求的某個任意文件）

好像有的同學瞬間就懂了。

 

是的，在請求頭中就包含了服務器的標准時間。那么下一步就是怎么獲取這個Date。

 

XMLHttpRequert

我們知道在XMLHttpRequest中用readyState來表示相應狀態。

0 （未初始化）	對象已建立，但是尚未初始化（尚未調用open方法）
1 （初始化）	對象已建立，尚未調用send方法
2 （發送數據）	send方法已調用，但是當前的狀態及http頭未知
3 （數據傳送中）	已接收部分數據，因為響應及http頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤，
4 （完成）	數據接收完畢，此時可以通過通過responseBody和responseText獲取完整的回應數據

大家可能很少用到readyState為3這個狀態，那么這個問題，就要用到他了。

 

Solution [解決方案]

<script type="text/javascript">
 var xhr = new XMLHttpRequest();
 xhr.open('get', 'testServer.txt', true); //這里的testServer.txt，其實我沒有創建，完全可以不需要這個文件，我們只是要時間罷了
 xhr.onreadystatechange = function(){
     if(xhr.readyState == 3){ //狀態3響應
      var header = xhr.getAllResponseHeaders(); //獲得所有的頭信息
      console.log(header);//會彈出一堆信息
      console.log(xhr.getResponseHeader('Date')); //彈出時間，那么可以利用獲得的時間做倒計時程序了。
     }
 }
 xhr.send(null);
</script>

上面看着懂大概的意思就行哈~

注：上述代碼IE9以下版本不兼容，不清楚的童鞋自己百度AJAX兼容性等關鍵詞。

 

Reference [參考資料]

　　1. Exodia

　　2. 百度文庫