Stateful Ajax experimentation

Here is a JavaScript, PHP and HTML written during experiment with stateful Ajax. The code provide stateful Ajax. It maintains the stateful Ajax as you traveled the path. file1 and file2 is separate PHP file that Ajax loads. +ve Counter is provided by one PHP file and -ve Counter is provided by another PHP file. It shows in bottom of the page where you are in every 5 second. Click +ve or -ve and you will see the state change by looking at the updating div. If you click on the back button and if it is #file1 from #file2 then the output on the page reflect thus the code detect the backward and forward button. In production environment this much code may not be enough and may require more experiments, but it should provide a start!

Main file:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> AJAX stateful! </TITLE>
<script type="text/javascript">
var output = '';
function statefulAjax() {
	if (document.location == 'http://localhost/old/aj/ajax_maintain_backlink.html#file1')
	{
		loadXMLDoc('test_file.php', 'file1')
	}
	else if (document.location == 'http://localhost/old/aj/ajax_maintain_backlink.html#file2')
	{
		loadXMLDoc('test_file2.php', 'file2')
	}
	div4 = document.getElementById("div4");
	div4.innerHTML = div4.innerHTML + "<br>" + document.location + ' ' + output;
}
var sI = window.setInterval("statefulAjax()", 5000);
var xmlhttp;
var loc;
function loadXMLDoc(url, l)
{
	xmlhttp=null;
	loc = l;
	sep = (url.indexOf('?') != -1)?'&':'?';
	url = url + sep + 'rand=' + new Date().getTime(); // add current time to stop using cache
	if (window.XMLHttpRequest)
	{
	  xmlhttp=new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	if (xmlhttp!=null)
	{
	  xmlhttp.onreadystatechange=state_Change;
	  xmlhttp.open("GET",  url, true);
	  xmlhttp.send(null);
	}
	else
	{
		alert("Your browser does not support XMLHTTP.");
	}
}
function state_Change()
{
	if (xmlhttp.readyState==4)
	{	// 4 = "loaded"
		if (xmlhttp.status==200)
		{
			// 200 = "OK"
			document.getElementById('T1').innerHTML = xmlhttp.responseText;
			output = xmlhttp.responseText;
			window.location = 'http://localhost/old/aj/ajax_maintain_backlink.html' + '#' + loc;
		}
		else
		{
			alert("Problem retrieving data:" + xmlhttp.statusText);
		}
	}
}
</script>
 </HEAD>
 <BODY>
<div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br />
<div >
 <a href="javascript:loadXMLDoc('http://localhost/old/aj/test_file.php', 'file1');"> +ve counter </a>
</div>
<div >
 <a href="javascript:loadXMLDoc('http://localhost/old/aj/test_file2.php', 'file2');"> -ve counter </a>
</div>
<br>
<script>
function clearAll()
{
	// stop / reset everything
	window.clearInterval(sI);
	out1 = loadXMLDoc('http://localhost/old/aj/test_file.php?reset=1', 'file1');
	out2 = loadXMLDoc('http://localhost/old/aj/test_file2.php?reset=1', 'file2');
	// start over
	out1 = loadXMLDoc('http://localhost/old/aj/test_file.php', 'file1');
	return false;
}
</script>
  <a href="http://www.satya-weblog.com/" onclick="clearAll(); return false;">satya</a>
<div id="div4"></div>
 </BODY>
</HTML>

PHP code:
FileName: test_file.php


<?php
session_start();
// positive counter
if (! isset($_SESSION['i'])) $_SESSION['i'] = 0;
echo '<span style="color:blue">';
echo $_SESSION['i']++ ;
echo '</span>';
if ($_GET['reset']) $_SESSION['i'] = 0;
?>

FileName:test_file2.php


<?php
// negative counter
session_start();
if (! isset($_SESSION['i'])) $_SESSION['i'] = 0;
echo '<span style="color:red">';
echo $_SESSION['i']-- ;
echo '</span>';
if ($_GET['reset']) $_SESSION['i'] = 0;
?>

This code is rather written very badly but it works. It is written very long back and it also has a small bug in it. ClearAll() JavaScript function clears the counter from session but it stops the counter working. So, after clicking on the 'satya' link you need to refresh the page.