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)