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

客户端时间通过 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. openstack windows 2008 img

    1,制作镜像主机pre Env yum -y install qemu-img virt-install libvirt 2,配置bridge

  2. zombie-phantom

    zombie-phantom zombie-phantom Provides a Zombie.js shim around the PhantomJS Headless Browser. npm i ...

  3. swift学习第五章-字典的使用

    //以下是关于字典的 //字典的格式[key:value] //字典能够存放基本类型和对象类型的 //声明一个字典 var dictionary1=["key1":"鸭鸭 ...

  4. 关于反射的一个小问题---.NetFrameWork版本不一样导致不同的系统的问题

    背景: 近期项目中用到发射,本人的电脑上是安装了.NetFrameWork 4.5,然后用着发射蛮顺溜的,啪啪,三下五除二,项目完成了,然后提交测试了,测试的电脑是虚拟机上安装了xp系统,然后.Net ...

  5. UVa340 Master-Mind Hints

    #include <stdio.h>#include <string.h> #define MIN(a,b) (((a) < (b)) ? (a) : (b)) int ...

  6. gsoap 超时(timeout)设置

    参考:http://www.cs.fsu.edu/~engelen/soapdoc2.html#tth_sEc19.19 gsoap就不用介绍了,是一个c/c++编写的可用于服务端与客户端的连接工具. ...

  7. BZOJ 2173: 整数的lqp拆分( dp )

    靠着暴力+直觉搞出递推式 f(n) = ∑F(i)f(n-i) (1≤i≤n) (直接想大概也不会很复杂吧...). f(0)=0 感受一下这个递推式...因为和斐波那契有关..我们算一下f(n)+f ...

  8. nginx+uwsgi部署python web(web.py)

    1.nginx: nginx 是一个 http 服务器,与 apache.lighttpd.Microsoft IIS 等属于同类产品. 2.uWSGI: uWSGI 是一个快速的.纯C语言开发的.自 ...

  9. kali nessus 安装插件失败解决方法

    code码获取: http://www.tenable.com/products/nessus/select-your-operating-system 首先切换到nessus安装目录下: 1.nes ...

  10. js运算符(运算符的结合性)

    1.javascript具有下列种类的运算符:算术运算符;逻辑运算符;比较运算符; 2.目的分类:字符串运算符;逻辑运算符;逐位运算符;赋值运算符; 3.特殊运算符:条件运算符;typeof运算符;创 ...