Server Clock showing date and time using Ajax

Click the button to check time

Clok showing server time using Ajax To display changing clock showing server time is possible by using Ajax where we can display a clock by sending request to server and getting the data without refreshing the page.

There are two files for this demo ( download ZIP file, link at the end of this page ) one is the file sending request and receiving data with Ajax.

ajax-server-clock.php

We will fist develop a script where by clicking a button we can send a request to server to get the data. In the body of this file we have a button.
<input type=button value=
'Get Server Time' onclick="timer_function();">
To this script we will add a timer to recursively call the same Ajax function in every second. This will get data from every second so we can display a changing clock showing server time.
function timer_function(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('AjaxFunction();',refresh)
}

Timer function: timer_function()

On click of this button we trigger a function which uses a timer setTimeout. Inside this timer function we can change the refresh rate which is in milliseconds. Within this function we call our main Ajax function AjaxFunction().
function timer_function(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('AjaxFunction();',refresh)
}
At the end of AjaxFunction() we will call again our timer_function() to make it recursive.
tt=timer_function();
In the main AjaxFunction() we send request to ajax-server-clock-demock.php file and get the server time. This data is displayed using a div layer.
    if(httpxml.readyState==4)
      {
document.getElementById("msg").innerHTML=httpxml.responseText;
document.getElementById("msg").style.background='#f1f1f1';
      }

ajax-server-clock-demock.php

The second file is the simple PHP file with one line of code giving current date and time of server.
<?Php
echo date("d/m/y : H:i:s", time());
?>
You can change the display format of the clock by changing the above code.
Full code for first file ajax-server-clock.php is here
<html>
<head>
<title></title>

<script type="text/javascript">
function AjaxFunction()
{
var httpxml;
try
  {
  // Firefox, Opera 8.0+, Safari
  httpxml=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
		  try
   			 {
   			 httpxml=new ActiveXObject("Msxml2.XMLHTTP");
    		}
  			catch (e)
    		{
    		 try
      		{
      		httpxml=new ActiveXObject("Microsoft.XMLHTTP");
     		}
    		 catch (e)
      		{
      		alert("Your browser does not support AJAX!");
      		return false;
      		}
    		}
  }
function stateck() 
    {
    if(httpxml.readyState==4)
      {
document.getElementById("msg").innerHTML=httpxml.responseText;
document.getElementById("msg").style.background='#f1f1f1';
      }
    }
	var url="ajax-server-clock-demock.php";
url=url+"?sid="+Math.random();
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
tt=timer_function();
  }

///////////////////////////
function timer_function(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('AjaxFunction();',refresh)
}

</script>

</head>
<body>

<div id="msg"></div>
<br>
<input type=button value='Get Server Time' onclick="timer_function();">

</body>
</html>

Using client side JavaScript

To show a changing clock we can use client side JavaScript which display time using local computer. But this is not server date and time.
Client side Clock using JavaScript

download Sever Clock  Script ZIP file



Ajax Json XML
Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    ultimate777

    09-04-2015

    Is there a way to do this without the button?
    So that the time from server is displayed when the page is loaded ?
    Thanks in advance.
    smo

    09-04-2015

    Yes, just add onload to body tag, like this
    <body onload=timer_function();>
    melad

    19-04-2015

    hi there thx u very much

    but i have some problem to show javascript in same page not call other url , coz it take some time


    so now i have this code

    $now = new DateTime(null, new DateTimeZone('America/New_York'));
    $now->setTimezone(new DateTimeZone('Europe/London'));
    echo $now->format("h:i:s A");


    how can i replace this code with this
    var url='ajax-server-clock-demock.php';


    and i then can see the DateTimeZone with refresh witout called and url


    i hobe ur anderstand me
    thx u

    Post your comments , suggestion , error , requirements etc here





    PHP video Tutorials
    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer