Ajax Example - Print Date and Time

In this example we create a simple Ajax Application for displaying the current date and current time. Date and time information are retrieved asynchronously from the server side php script. Our HTML page calls serverside php script to retrieve the today's date. Once the time data is retrieved from the server, it uses javascript and css to display the time on the HTML page.

<html>
        <head>

        <title>Ajax Example</title>

        <script language="Javascript">

        function postRequest(strURL) {

	var xmlHttp;

        if (window.XMLHttpRequest) { // Mozilla, Safari, ...

         var xmlHttp = new XMLHttpRequest();

       } else if (window.ActiveXObject) { // IE

         var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

       }

    xmlHttp.open('POST', strURL, true);

    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xmlHttp.onreadystatechange = function() {

        if (xmlHttp.readyState == 4) {

            updatepage(xmlHttp.responseText);

        }

    }

    xmlHttp.send(strURL);

        }
        

        function updatepage(str){

    document.getElementById("result").innerHTML = 
	"<font color='red' size='5'>" + str + "</font>";;

        }

        function showCurrentTime(){

	var rnd = Math.random();

	var url="time.php?id="+rnd;

	postRequest(url);

        }

        </script>

        </head>

        <body>

        <h1 align="center"><font color="#000080">Ajax Example</font></h1>

        <p><font color="#000080">&nbsp;This very simple Ajax Example retrieves the

        current date and time from server and shows on the form. To view the current

        date and time click on the following button.</font></p>

        <form name="f1">

  <p align="center"><font color="#000080">&nbsp;<input value="   Show Time   " 
    type="button" onclick='JavaScript:showCurrentTime()' name="showdate"></font></p>

  <div id="result" align="center"></div>

        </form>

        <div id=result></div>

        </body>

        </html>