在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间.

客户端时间通过 javascript中的Date对象可以获取,如

  1. var dt = new Date();
  2. var tm = dt.getTime();

那么tm就是客户端的时间,另外也可以通过对应的getFullYear(),getMonth(),getDate()取到对应的年月日等...
但这个时间可靠吗?

好吧,那取服务器时间吧
经常用到的是后台写一个php,jsp,cgi,asp...通过这些程序来返回一个时间,这是一种解决方案,但仅仅一个时间点,有必要用程序后台程序来实现吗?

那还有什么解决方案吗?
PS:在生成页面的时候把服务器时间就写在里边,然后就可以直接用了.但如果只是一个静态页面了呢,能这么干吗?

好吧,我在这里提出我的解决方案: Ajax HTTP Head

原理:
一般服务器在发送静态页面的时候(apache, nginx, lighttpd就目前所知)都是会在 HTTP 头里带一个Date的头信息的,那么我用Ajax直接取头信息里的Date不就OK了吗!8)

PS:但ajax发请求出去不是会有正文返回吗,那正文的内容比请求一次动态页面的代价可高多了,是这样的吗?8)

实现:

  1. var xhr = new XMLHttpRequest();
  2. if( !xhr ){
  3. xhr = new ActiveXObject("Microsoft.XMLHTTP");
  4. }
  5. xhr.open("HEAD",location.href,true);
  6. xhr.onreadystatechange=function(){
  7. if( xhr.readyState == 4 && xhr.status == 200 ){
  8. alert(xhr.getResponseHeader("Date"));
  9. }
  10. }
  11. xhr.send(null);

解释:
常见的Ajax请求方法为GET,POST而这两种请求都可能会返回正文体,而发HEAD头则只会返回对应的头信息,不会有正文,且只要javascript可以执行,就可以取当前域的地址作为请求地址,有一定的通用性,且避免了跨域的问题.:lol:

实践:

以上代码的完整版在ie6,7,8,9,opera,chrome,firefox下测试通过

适用范围:

javascript正常执行的作用域是http/https下生效

其他:
服务器一定会返回Date头信息吗?
这个是RFC里要求服务器必须实现的,只有在101,103,500等几个状态码的情况下服务器才可以不返回Date头.但我们的location.href不在这个情况之列,所以只要当前javascript代码能正常执行(http方式),那么这个时间就可以取得到

定制的服务器不在本文讨论范围之内

转载请保留以下内容:
author:mooring
sites: http://mooring.iteye.com
date:2012/02/23

------------------------------

1. jquery封装的ajax方法获取web服务器时间

var t = $.ajax({type:'HEAD', async:'false'}).getResponseHeader('date'); //同步请求

2.chrome强烈不建议在主线程发同步的ajax请求,异步的写法如下:

var t;

$.ajax({type:'HEAD', async: true})

.success(function(data, status, xhr){

t=xhr.getResponseHeader('Date');

});

通过原生js的ajax或jquery的ajax获取服务器的时间的更多相关文章

  1. js原生ajax与jquery的ajax的用法区别

    什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...

  2. 原生js使用forEach()与jquery使用each遍历数组,return false 的区别

    原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...

  3. 原生JS研究:学习jquery源码,收集整理常用JS函数

    原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...

  4. 折腾一天,获取下列多选框的所有选中值,原生js可直接通过obj.val()来获取,可jq不行,要通过循环取值来获取;

    折腾一天,获取下列多选框的所有选中值,原生js可直接通过obj.val()来获取,可jq不行,要通过循环取值来获取;

  5. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  6. AJAX初识(原生JS版AJAX和Jquery版AJAX)

    一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...

  7. 原生js实现ajax与jquery的ajax库,及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

  8. 原生js实现 常见的jquery的功能

    原生选择器   充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <l ...

  9. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. ssm框架理解

    SSM框架理解 最近两星期一直在学JavaEE的MVC框架,因为之前学校开的JavaEE课程就一直学的吊儿郎当的,所以现在真正需要掌握就非常手忙脚乱,在此记录下这段时间学习的感悟,如有错误,希望大牛毫 ...

  2. externkeyword放到函数体内而导致的linkage问题

    不少人都知道,C/C++语言编程时,假设要引用在别的C/C++文件里定义的变量或函数,必须extern一下,才干使用 另一些人知道,这个extern事实上能够放在函数体内声明,这么做的理由是不想让其它 ...

  3. HTML元素的ID和Name属性的区别

    HTML元素的ID和Name属性的区别今天突然兴致来了,想深究下这两属性的具体区别最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以 ...

  4. C# 微信公众平台开发(4)-- 模版消息

    微信公众平台开发 --发送模版消息 发送模版消息是微信服务号给某个用户发送模版消息,类似于APP的推送通知: 1.添加模版消息 在页面的左上 有一个添加功能插件的 按钮,如题 添加完成后,我们就可以在 ...

  5. 日志记录Filter

    Filter也可以日志记录,在request 之前后, 该filter 使用Apache 日只记录工具,记录客户IP ,访问URI 以及消耗时间. LogFilter.java package com ...

  6. UVA 10798 - Be wary of Roses (bfs+hash)

    10798 - Be wary of Roses You've always been proud of your prize rose garden. However, some jealous f ...

  7. MYSQL存储过程事务列子

    CREATE DEFINER=`root`@`localhost` PROCEDURE `createBusiness`(parameter1 int) BEGIN #Routine body goe ...

  8. (C#)Windows Shell 编程系列3 - 上下文菜单(iContextMenu)(一)右键菜单

    原文 (C#)Windows Shell 编程系列3 - 上下文菜单(iContextMenu)(一)右键菜单 接上一节:(C#)Windows Shell 编程系列2 - 解释,从“桌面”开始展开这 ...

  9. ThreadSafeClientConnManager用来支持多线程的使用http client

    import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; import org.apache.http.clien ...

  10. 卡特兰数(Catalan)简介

    Catalan序列是一个整数序列,其通项公式是 h(n)=C(2n,n)/(n+1) (n=0,1,2,...) 其前几项为 : 1, 1, 2, 5, 14, 42, 132, 429, 1430, ...