向后/向前处理浏览器以使用AJAX加载的页面

Question

我正在使用AJAX将div的内容加载到另一页的另一个div中。之后，我要处理历史记录并使用http://diveintohtml5.info/history.html中指定的HTML5 History Api更改URL。

现在，当有人单击浏览器的后退/前进按钮时，会发生此问题。我需要在目标div上再次加载所需div的内容。但是将显示所需div所属页面的整个内容，而不是所需div的内容。再次单击浏览器的前进/后退按钮，然后，如果某些页面包含URL中附加的值，则URL中的此类值不会传递到所需的页面。

这是我用来将div的内容加载到其他页面的另一个div并处理历史记录和更改URL的代码

     function next(type,page)
     {

       var strURL = "next.php?type="+type+"&pn="+page;
       $("#div1").load(strURL+" #div2");
       history.pushState(null,null,strURL);// to change URL and history
    }

现在用于管理后退/前进浏览器按钮的点击

    function navigate(href) {
        var req = new XMLHttpRequest();
        req.open("GET", "http://localhost/"+href.split("/").pop(),false);
        req.send(null);
        if (req.status == 200) {
            document.getElementById("div1").innerHTML = req.responseText;
            return true;
          }
        return false;
      }

     window.addEventListener("popstate", function(e) {
     navigate(location.pathname);});
     }

您能不能帮助我，因为我无法解决。在此先感谢大家。

Answer 1

经过一些技巧的尝试终于解决了我自己的问题。

这是我自己的问题的答案-

    function navigate(href) {
    var req = new XMLHttpRequest();
    req.open("GET", "http://localhost/"+href.split("/").pop(),false);
    req.send(null);
    if (req.status == 200) {
        document.getElementById("div1").innerHTML = req.responseText;
        $("#div").load(" #div").hide().fadeIn(1000); //changes done here
        return true;
      }
     return false;
    }

    window.addEventListener("popstate", function(e) {
    navigate(location.pathname);});
    e.preventDefault(); //changes done 
    }