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.