带Ajax的Backbutton加载内容

Question

This will load the content to the page and change the URL. The problem is that the back button and the forward won't load the content agin. They only change the URL. How can I make them load the function?

 <a onclick="load_content('p1');" >Page1</a>
 <a onclick="load_content('p2');" >Page2</a>



function load_content(name)
    {

    window.history.pushState(null, null, "/?page=" + name + "");

    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {

        document.getElementById("response").innerHTML=xmlhttp.responseText;

        }
      }
    xmlhttp.open("GET","load_content.php?name=" + name + "",true);
    xmlhttp.send();

    }

Answer 1

在history.pushState ，保存所有动态的相关数据，然后侦听popState事件并替换所有元素，就像使用AJAX一样。