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

客户端时间通过 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. Java的接口及实例

    一.定义 Java接口(Interface),是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为( ...

  2. Linux学习笔记之权限与命令之间的关系(重要)及文件与文件夹知识总结

    一.让使用者能进入某文件夹成为可工作文件夹的基本权限为何: 可使用的命令:比如 cd 等变换工作文件夹的命令. 文件夹所需权限:使用者对这个文件夹至少须要具有 x的权限 额外需求:假设使用者想要在这个 ...

  3. Duanxx的图像处理学习: 透视变换(一)

    当人用眼睛看事物的时候,会感觉到近处的东西是比远处的东西要大一些的,通俗的说,这就是透视. 总的来说.透视变换是将3D的世界转换到2D图像上的一种手段,人的视觉系统和摄像头视觉系统也是基于这一工作原理 ...

  4. iOS开发-Protocol协议及委托代理(Delegate)传值

    前言:因为Object-C是不支持多继承的,所以很多时候都是用Protocol(协议)来代替.Protocol(协议)只能定义公用的一套接口,但不能提供具体的实现方法.也就是说,它只告诉你要做什么,但 ...

  5. WebSite 文件上传Demo

    知识点: 1 <!--上传文件时:        1.必须使用Post方式来提交数据        2.必须设置表单的enctype属性        3.必须在表单中包含文件域.input t ...

  6. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  7. LeetCode Coins in a Line

    There are n coins in a line. Two players take turns to take one or two coins from right side until t ...

  8. jmeter 通过ant集成到jenkins

    jmeter可以通过ant自动执行测试脚本,然后集成到jenkins上,并发送测试报告 1.下载安装ant 2.将jmeter安装包extras文件夹里ant-jemter-1.1.1.jar 复制到 ...

  9. Android UiAutomator 自动化测试编译运行---新手2

    1.首先打开eclipse创建java项目

  10. jQuery File Upload

    jQuery File Upload介绍.............................................. 2 实现基本原理......................... ...