使用 Ajax 加载页面时，返回按钮不起作用

Question

I'am trying to create a website where all pages are called with Ajax. When I click on any link on the page, the url and page content changes without refreshing all page (similar Facebook). So far everything is fine.

The problem is : When I click the go back or go forward button, the url changes but the page content does not change.

Example code :

function loadDoc($link) {  // example for $link : /example.php
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var parser = new DOMParser();
                var doc = parser.parseFromString(xhttp.responseText, "text/html");
                var elem = doc.getElementById("content");
                document.getElementById("content").innerHTML = elem.innerHTML;
            }
        };
        xhttp.open("GET", $link, true);
        xhttp.send();
        window.history.pushState('', 'Settings', $link);  // dynamic url changing 
    }

(Fully separate structure or additional ideas are welcomed too)

Answer 1

You've used pushState to add an entry to the browser history, but you haven't added an event handler to determine what happens when the browser navigates back. The browser won't automatically memorise the state of the DOM for you.

Here is a simple example:

<div id="content">1</div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>

<script>
    const div = document.querySelector('div');

    addEventListener('click', event => {
        if (event.target.tagName.toLowerCase() !== 'button') return;
        const last = div.textContent;
        const next = event.target.textContent;
        div.textContent = next;
        history.pushState({ value: next }, `Page ${next}`, `/page/${next}`);
    });

    addEventListener('popstate', event => {
        let state = event.state;
        if (state === null) {
            // special case: This is the state before pushState was called
            // We know what that should be:
            state = { value: 1 };
        }
        div.textContent = state.value;
        console.log('location: ' + document.location + ', state: ' + JSON.stringify(event.state));
    });
</script>

Answer 2

You don't have to return the page every time as content in your queries. With REST APIs, you can process your data using tools such as React on the front, by calling only the necessary data. See how REST APIs works and how React manages pages.