How to change the web address,at the same time, only refresh a part of page?

Question

I used Ajax to refresh page.but the address has not chenged.

function refresh(page) {
        let xmlhttp;
        if (window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("test").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET",page,true);
        xmlhttp.send();
    }

I add this in order to change address

        let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
        window.history.pushState({path:newurl},'',newurl);

It's can work, but, I cant visit the website using this new url. I want my web site like the Android Guides. when I changed the address. only refresh a part of page.

For example: My website is "mywebsite.com/test.php"; I add the newurl to change address like about,it become "mywebsite.com/php?foo=bar#". but when I input this address in address bar. the page still is "mywebsite.com/test.php"

Did you what I mean

Please excuse me for my bad english!

solution: Maybe, I can ask this quesion like this, 'How to hot refresh the page?'

reference: Vue.js and javascript history API