<Ajax Server Date/ Time ⁄ >

/**
* Static Class Events
* Manage Events
*/
Events = function(){}
 
/**
* Add Event
*
* Full credits to (I just made a few mods):
* http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
*
* @param Object
* @param Object
* @param Object
*/
Events.AddEvent = function(obj, type, fn){
  if(!obj) return;
 
  this.RemoveEvent(obj, type, fn);
  if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
  }
  else {
    if (obj.attachEvent) {
      obj["e" + type + fn] = fn;
      obj[type + fn] = function(){
        obj["e" + type + fn](window.event);
      }
      obj.attachEvent("on" + type, obj[type + fn]);
    }
  }
}
 
/**
* Remove Event
*
* Full credits to (I just made a few mods):
* http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
*
* @param Object
* @param Object
* @param Object
*/
Events.RemoveEvent = function(obj, type, fn){
  if (obj.removeEventListener) {
    try{obj.removeEventListener(type, fn, false);} catch(e){}
  }
  else{
    if (obj.detachEvent) {
      obj.detachEvent("on" + type, fn);
      obj[type + fn] = null;
      obj["e" + type + fn] = null;
    }
  }
}

/**
* Static Class Misc, contains some
* miscellaneous methods/ settings
*
* @author pedrocorreia.net
*/
Misc = function(){}
 
/**
* Hack IE to avoid HTTP Get cache problems
*
* @param String Url
*/
Misc.AntiCacheRand = function(aurl){
  var rnd = encodeURI(Math.random());
  aurl += (aurl.indexOf("?") >= 0) ? "&foo=" + rnd : "?foo=" + rnd;
 
  return aurl;
};
 
/**
* Create HttpRequest.
* This request allow us to communicate with the server
*
* @return HttpRequest
*/
Misc.CreateHttpRequest = function(){
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
 
    if (http_request.overrideMimeType) {
      http_request.overrideMimeType('text/html');
    }
  }
  else
  if (window.ActiveXObject) { // IE
    try {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      try {
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e) {
      }
    }
  }
 
  if (!http_request) {
    alert('Giving up :( Cannot create an XMLHTTP instance');
    return false;
  }
 
  return http_request;
};
 
/**
* Get HtmlControl reference
*
* note: this is a static method, Misc Class
* doesn't have to be instantiated
*
* @param String
* @return Element object
*/
$ = function(element){
  if (document.getElementById){
    return document.getElementById(element);
  }
};

<?php
/**
* Get the request and answer it
*/
 
include_once("_Class_/class.MyServerTime.php");
 
$my_server_time=new MyServerTime($_GET["time_format"]);
echo $my_server_time->Date();
?>

<?php
 
/**
 * Get Date/ Time
 *
 * @author pedrocorreia.net
 */
class MyServerTime{
  private $_format; //time format
 
  /**
   * Constructor method
   *
   * @param String $format
   */
  public function __construct($format){$this->Format($format);}
 
  /**
   * Getter/ Setter TimeFormat
   *
   * @param String $value
   * @return String
   */
  public function Format($value=""){
    if($value){$this->_format=$value;}
    else{return $this->_format;}
  }
 
  /**
   * Get Date
   *
   * @return DateTime
   */
  function Date(){return gmdate($this->Format());}
 
}
?>

/**
* Class AjaxServerTime
*
* This class's responsible for server communications
*
* @author pedrocorreia.net
*/
 
/**
* AjaxServerTime Constructor
*
* @param Object Settings
*/
AjaxServerTime = function(settings){
  this._settings=settings;
  this.interval=-1;
}
 
/**
* Get server time and show it to the user
*/
AjaxServerTime.prototype.Show = function(){
  var qryStr=this._settings.server_file+"?time_format="+this._settings.format;
  var url_request = Misc.AntiCacheRand(qryStr);
  var http_request = Misc.CreateHttpRequest();
 
  var id=this._settings.id; //html object id
 
  http_request.onreadystatechange = function(){
    var state = http_request.readyState;
    //request complete and successfully
    if (state == 4 && http_request.status == 200) {
      $(id).innerHTML=http_request.responseText;
    }
  }
 
  http_request.open("GET", url_request, true);
  http_request.send(null);
}
 
/**
* Create a Timer
* Will execute a specific funcion at every
* specified seconds interval
*/
AjaxServerTime.prototype.Timer = function(){
  var inst=this;
  var seconds=inst._settings.interval*1000;
  this.interval=setInterval(function(){inst.Show()},seconds);
};
 
/**
* Stop Clock
*/
AjaxServerTime.prototype.StopTimer = function(){
  clearInterval(this.interval);
  this.interval=-1;
}
 
/**
* This method will just simply switch images
* so that the user can know if it will 
* stop or start the clock
*
*/
AjaxServerTime.prototype.SwitchClock = function(){
  var img_filename;
  var img_alt;
 
  var defs={
    "img_id": "clock_img", //html object id
 
    "img_start": "start.png",
    "img_start_alt": "Restart Clock",
 
    "img_stop": "stop.png",
    "img_stop_alt": "Stop Clock",
 
    "img_folder": "_images_/"
  }
 
  if(this.interval<0){
    img_filename=defs.img_stop;
    img_alt=defs.img_stop_alt;
    this.Timer();
  }
  else{
    img_filename=defs.img_start;
    img_alt=defs.img_start_alt;
    this.StopTimer();
  }
 
  //update image attributes
  var img=$(defs.img_id);
  img.src=defs.img_folder+img_filename;
  img.alt=img.title=img_alt;
}

/**
* Startup function
*
* @author pedrocorreia.net
*/
Init = function (){
 
  var settings = {
    "id": "mySpanTime", //where will be written
    "interval": 1, //update frequency
    "format": "H:i:s", //DateTime format
    "server_file": "ajax.php" //file that will process our requests
  }
 
  //create AjaxServerTime object
  var jx_server_time=new AjaxServerTime(settings);
 
  //show server time, this is just a one time operation
  jx_server_time.Show();
 
  //create a timer that will show our server time,
  //just like a normal clock
  jx_server_time.Timer();
 
  //we'll add an event do stop and restart the clock by
  //just clicking in a image
  Events.AddEvent($("clock_img"),"click",function(){jx_server_time.SwitchClock();});
}
 
Events.AddEvent(window, "load", Init);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>MyServerTime</title>
    <script type="text/javascript" src="_js_/Events.js"></script>
    <script type="text/javascript" src="_js_/Misc.js"></script>
    <script type="text/javascript" src="_js_/AjaxServerTime.js"></script>
    <script type="text/javascript" src="_js_/Init.js"></script>
  </head>
  <body>
    Current Server Time: <span id="mySpanTime"></span>
    <img src="_images_/stop.png" width="16" height="16" alt="Stop Clock" title="Stop Clock" id="clock_img" />
  </body>
</html>