Question

我使用了以下教程：http://www.w3schools.com/ajax/default.asp

我使用它来更改页面异步 - 但是，我也希望这样做以便生成新的URL。

（当用户点击按钮时，它会在显示不同页面时向URL添加＃，如何创建它以使URL反映已添加但仍保持更新异步的页面？）< / p>

HTML：

<a href="#" onclick="loadDoc('{{site.url}}/webpage.html')" id="#my-link"> Use “Just Enough” </a></h5>

JS：

<script type="text/javascript">
     function loadDoc(contentURL) {
         var xhttp = new XMLHttpRequest();
         xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("prinDesc").innerHTML = xhttp.responseText;
            }
         };
         xhttp.open("GET", contentURL, true);
         xhttp.send();
     }
</script>

Answer 1

是的，你可以使用history.pushState来使用HTML5。

pushState()：

有三个参数：状态对象，标题（当前被忽略）和（可选）URL。

示例：

在成功回调中使用它：

if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("prinDesc").innerHTML = xhttp.responseText;
    window.history.pushState('Object', 'New Page Title', '/new-url');
}

有关详细信息，请访问 Manipulating the browser history 。

注意：永远不要信任 w3schools ，也不要在此处将其作为参考。

希望这有帮助。

Answer 2

您想要使用History API中的browsers where it is supported。

更新了loadDoc功能：

function loadDoc(contentURL) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("prinDesc").innerHTML = xhttp.responseText;

      window.history && window.history.pushState({}, '', contentURL);
    }
  };
  xhttp.open("GET", contentURL, true);
  xhttp.send();
}

希望有所帮助！

使用AJAX更新网页 - 如何更改网址？

2 个答案: