AJAXを使用してウェブページを更新しました。どうすればURLを変更できますか？

Question

私は以下のチュートリアルを使用しました：http://www.w3schools.com/ajax/default.asp

私はこれを使ってページを非同期に変更していますが、新しいURLが生成されるようにしたいと思います。

（ユーザーがボタンをクリックして別のページを表示しているときにURLに＃が追加された場合、追加されたページは反映されますが、非同期に更新されます）

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

browsers where it is supportedのHistory APIを使用します。

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(); 
} 

希望に役立ちます：

はloadDoc機能を更新しました！

Answer 2

はい、history.pushStateを使ってHTML5でできます。

pushState()：状態オブジェクト（現在は無視される）タイトル、および（オプションで）URL：

は、3つのパラメータを取ります。

例：

は、あなたの成功コールバックの内側にそれを使用します。

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のを信頼していないし、ここに参照としてそれを使用することはありません。

これが役に立ちます。