|
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
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
