Using AJAX To Load Data From PHP Into Your Website

A few days ago I had to build a web-app for a mobile device. The problem was, that some external input device changed values in a database and I had to make this visible in my web-app.

I came across a good solution from the w3c school. The problem was that this only updated with a user input. Therefore I changed quite some part of their script and made it easy understandable. To keep the coding part as small and easy as possible, I will not access a database in my example. My PHP script only displays the PHP function date(“H:i:s”); which shows the current time. You could easy build what ever you want in the the PHP script but keep in mind that this code will be called often and could slow down  your server if you have many users and a short refresh time and therefore to many requests to your server.

Whats do you need in order to see this example.
I created this example in three files.
– The HTML File
– The Javascript File
– The PHP File

The HTML File:
This File loads the Javascript File in order to access all the Javascript functions. In the <body> tag we load the function startRefreshing() from the javascript File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajax Test</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body onload="startRefreshing()">
 
    <div id="idForAJAXReplace">
    	Placeholder which will be replaced by the PHP content
    </div>
</body>
</html>

The Javascript File (test.js)
In the scripts I defined which PHP fill should be executed every time the Loop starts. The repeat time is also defined in this script as well as the id of the DIV tag which should be replaced by the data sent by the PHP file. Quite some part of this script are based from the w3c school but I got rid of many unnecessary stuff for my example.

// Config for the javascript part
 
var urlForPHP 			= "test.php";
var milsecondsTillRepeat 	= 1000;
var idForReplace		= "idForAJAXReplace";
 
function startRefreshing()
{
	setTimeout("startRefreshing()",milsecondsTillRepeat);
	reloadPHP();
}
 
/// the following code is based on http://www.w3schools.com/php/php_ajax_database.asp  but I shorted it quite some bit
var xmlhttp;
 
function reloadPHP()
{
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null)
	{
		alert ("Your Browser does not support HTTP Request");
		return;
	}
	var url=urlForPHP;
	url=url+"?random="+Math.random();
	xmlhttp.onreadystatechange=stateChanged;
	xmlhttp.open("GET",url,true);
	xmlhttp.send(null);
}
 
function stateChanged()
{
	if (xmlhttp.readyState==4)
	{
	document.getElementById(idForReplace).innerHTML=xmlhttp.responseText;
	}
}
 
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

The PHP file (test.php)
This file gets called every 1000 ms (defined in the Javascript File). For the demo I only display the current server time. Of course you could display here data from the database or any other PHP script which you need to have repeat called by the website.

<?php
echo date("H:i:s");
?>

Download demo