After clicking on back button, URL is changing but content is loaded in History api

[Swappy]

My doubt is regarding history api feature of html5 which is using ajax script.

In my code after loading index.html, i have tried to open html content using link in central section of page. Upto this is done but when i click to back button then url is changing but content was of previous page.

following is my js code :

function supports_history_api() 
{
return !!(window.history && history.pushState);
}

function page_cal(href)
{ 
    var page_request = false;
	if (window.XMLHttpRequest) // if Mozilla, Safari etc
	page_request = new XMLHttpRequest();
	else if (window.ActiveXObject) // if IE
		{
			try 
			{
			page_request = new ActiveXObject("Msxml2.XMLHTTP");
			
			} 
		catch (e)
			{
				try{
				page_request = new ActiveXObject("Microsoft.XMLHTTP");
				}
			catch (e){}
			}
		}
	
	page_request.open("GET","../PA-20/pages/"+href.split("/").pop(),false);
	page_request.send(null);
	if (page_request.readyState==4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) 
	{
	document.getElementById("opencontent").innerHTML = page_request.responseText;
	return true;
    } 	
	return false;
}


function addClicker(link) 
{
 //alert(link+"1st");
 link.addEventListener("click", function(e) 
  {//alert(link+"2nd");
    if (page_cal(link.href)) 
	{  
	  alert(link.href+" Clicked !");
	//var url = link.href;

	var linksElement = document.getElementById('id');
	var pathname =  link.href;
	var stateObj = { first: "home",
					 second: "products",
                     third:	"promoters",
					 fourth: "aboutus",
					 fifth: "contact",
					};
					
     history.pushState(pathname, null, link.href);
	 alert(history.state);
		 e.preventDefault();
	    }  
   }, true);
  }
  

  
function setupHistoryClicks()
{ 
addClicker(document.getElementById("home"));
addClicker(document.getElementById("products"));
addClicker(document.getElementById("promoters"));
addClicker(document.getElementById("aboutus"));
addClicker(document.getElementById("contact"));
addClicker(document.getElementById("kalonji"));
addClicker(document.getElementById("chilli"));
addClicker(document.getElementById("jaiphal"));
addClicker(document.getElementById("jeera"));
addClicker(document.getElementById("elaichi"));
addClicker(document.getElementById("malkingini"));

}



window.onload = function(e) 
{
  if (!supports_history_api()) 
  {return;}
   setupHistoryClicks(); 
   e.preventDefault();
  window.setTimeout(function() 
  {
    window.addEventListener("popstate", function(e) 
	{ 
	alert( " Back button is cliecked ! " + "location: " + document.location + ", state: " + e.state);
	
		location.reload();	
	
	page_cal(document.location);

	}, false);

	  }, 1); 
}

Thanks in advance !

Regards,
Swappy

[acoder]

I think the following may help:

Manipulating the browser history
History.js (linked from above article)