asperduti/single-page-app.html

## single-page-app.html
<html>
    <head>
        <script>
            document.addEventListener('DOMContentLoaded', () => {

                // Start by loading first page.
                load_page('first');

                // Set links up to load new pages.
                document.querySelectorAll('.nav-link').forEach(link => {
                    link.onclick = () => {
                        load_page(link.dataset.page);
                        return false;
                    };
                });
            });

            // Renders contents of new page in main view.
            function load_page(name) {
                const request = new XMLHttpRequest();
                request.open('GET', `/${name}`);
                request.onload = () => {
                    const response = request.responseText;
                    document.querySelector('#body').innerHTML = response;

                    // Push state to URL.
                    document.title = name;
                    history.pushState({ 'title': name, 'text': response }, name, name);
                };
                request.send();
            }

            // Update text on popping state.
            window.onpopstate = e => {
                const data = e.state;
                document.title = data.title;
                document.querySelector('#body').innerHTML = data.text;
            };
        </script>
    </head>
    <body>
        <ul id="nav">
            <li><a href="" class="nav-link" data-page="first">First Page</a></li>
            <li><a href="" class="nav-link" data-page="second">Second Page</a></li>
            <li><a href="" class="nav-link" data-page="third">Third Page</a></li>
        </ul>
        <hr>
        <div id="body">
        </div>
    </body>
</html>
	<html>
	<head>
	<script>
	document.addEventListener('DOMContentLoaded', () => {

	// Start by loading first page.
	load_page('first');

	// Set links up to load new pages.
	document.querySelectorAll('.nav-link').forEach(link => {
	link.onclick = () => {
	load_page(link.dataset.page);
	return false;
	};
	});
	});

	// Renders contents of new page in main view.
	function load_page(name) {
	const request = new XMLHttpRequest();
	request.open('GET', `/${name}`);
	request.onload = () => {
	const response = request.responseText;
	document.querySelector('#body').innerHTML = response;

	// Push state to URL.
	document.title = name;
	history.pushState({ 'title': name, 'text': response }, name, name);
	};
	request.send();
	}

	// Update text on popping state.
	window.onpopstate = e => {
	const data = e.state;
	document.title = data.title;
	document.querySelector('#body').innerHTML = data.text;
	};
	</script>
	</head>
	<body>
	<ul id="nav">
	<li><a href="" class="nav-link" data-page="first">First Page</a></li>
	<li><a href="" class="nav-link" data-page="second">Second Page</a></li>
	<li><a href="" class="nav-link" data-page="third">Third Page</a></li>
	</ul>
	<hr>
	<div id="body">
	</div>
	</body>
	</html>