jQuery to Retrieve Server's Current Time

In this first jQuery tutorial we will develop a simple program that retrieves the current time from server and displays on the user browser.

jQuery to Retrieve Server's Current Time

     

In this first jQuery tutorial we will develop a simple program that retrieves the current time from server and displays on the user browser. In this example we will be calling a server side PHP script to get the current server time. You can easily replace PHP with JSP, or ASP program.

Steps to develop the Current Server Time program

Step 1:

 

 

 

Create php file to that prints the current server data. Here is the code of PHP script (time.php).

<?
$time_now=mktime(date('h')+5,date('i')+30,date('s'));

print $time_now=date('l M dS, Y, h:i:s A',$time_now);
?>

Step 2:

Write HTML page to call the time.php. Create a new file (currentservertime.html) and add the following code into it:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>

  <title>Current Date and Time</title>

  <script type="text/javascript" src="jquery-1.2.6.js"></script>

   <script type="text/javascript"> 

  function  timeExam()

  {

$.ajax({

url : "time.php",

success : function (data) {

$("#contentArea").html(data);

}

});

setTimeout("timeExam()", 1000);

  }


   </script> 

  </head>

  <body onload="timeExam();">

   <table width="100%">
   <tr><td  width="100%" align="center">
   <div id="contentArea" style="color:blue;font:bold 14px arial;padding-top:140px;"> 
   </div> 
   </td>
  </tr>
   </table>
  </body>
   </html>

Program explanation:

The following code includes the jQuery JavaScript library file:

<script type="text/javascript" src="jquery-1.2.6.js"></script>

On body load timeExam() funcation is called:

<body onload="timeExam();">

The code

$.ajax({

url : "time.php",
...

makes ajax call to time.php file.

Following code intercepts the ajax call success and then sets the data into "contextArea" div:

success : function (data) {

$("#contentArea").html(data);

}

});

When you run the program in browser it will look like following screen shot:

 

Check online demo of the application

Learn from experts! Attend jQuery Training classes.

Advertisements

Share on Google+Share on Google+

jQuery to Retrieve Server's Current Time

Posted on: September 8, 2008 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Advertisements

 

Discuss: jQuery to Retrieve Server's Current Time   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:1
Novak
November 9, 2012
Thanks!

Thanks a lot! After research in the internet this is the first example that works!

Ads

 

Ads