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

客户端时间通过 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. hdu4491 Windmill Animation (几何)

    Windmill Animation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  2. 求高手帮忙解决一下问题Java Web Cookie实例

    package cn.com; import java.io.IOException; import java.io.PrintWriter; import java.util.LinkedHashM ...

  3. Android应用开发基础篇(14)-----自定义标题栏

    一.概述 每一个应用程序默认的标题栏(注意与状态栏的区别)只有一行文字(新建工程时的名字),而且颜色.大小等都是固定的,给人的感觉比较单调.但当程序需要美化的时候,那么修改标题栏是就是其中一项内容,虽 ...

  4. #pragma的用法

    在所有的预处理指令中,#Pragma   指令可能是最复杂的了,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#pragma指令对每个编译器给出了一个方法,在保持与C和 C++语言完全 ...

  5. BootStrap 智能表单系列 首页 (持续更新中...)

    背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...

  6. URAL 1297 Palindrome 后缀数组

    D - Palindrome Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Subm ...

  7. Android应用开发基础篇(16)-----ScaleGestureDetector(缩放手势检测)

    链接地址:http://www.cnblogs.com/lknlfy/archive/2012/03/11/2390274.html 一.概述 ScaleGestureDetector这个类是专门用来 ...

  8. 服务器表导入到本地数据库SQL语句

    这是开启权限 exec sp_configure 'show advanced options',1 reconfigure exec sp_configure 'Ad Hoc Distributed ...

  9. R语言学习之主成分分析法的R实践

    主成分分析R软件实现程序(一): >d=read.table("clipboard",header=T) #从剪贴板读取数据 >sd=scale(d)  #对数据进行标 ...

  10. linux和windows的文件互传

    Linux →→→Windows 1.使用secureCRT:下载文件只需在shell终端仿真器中输入命令"sz 文件名",即可利用Zmodem将文件下载到本地某目录下. 2. s ...