I have a question How to change URL without load. I am working on a PHP, JavaScript project. I am try to make without load Home page. in home Header section content some buttons like :-

Header

on click button than load data using XMLHttpRequest() and i want to change Url like:-

https://example.com/home to https://example.com/search

Code

var xmld = new XMLHttpRequest();
    xmld.open("GET", "/Api/SearchPage", true);
    xmld.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmld.onreadystatechange = function() {
        if (xmld.readyState == 4 && xmld.status == 200) {
            var json = JSON.parse(xmld.responseText);
            if (json.Status == "Ok") {
                doument.querySelector("#content").innerHTML = json.HTMLData;
                window.location.href = "https://exmaple.com/Search"; // without load
            }
        }
    }
    xmld.send();

in example, when you click item than url change without load

I am not use any js and php framework

Example

https://dribbble.com/

https://in.pinterest.com/

it's possible??

CodePudding user response：

if you don't use a framework window.history.pushState() will do the thing you want. See this link: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

CodePudding user response：

Use a state manager like Redux with a modern Javascript framework like ReactJs.