Normal redirect or preload

Question

So on the net I've come across a several ways to preload / redirect a webpage.

Now's the question is this the proper way to handle a redirect with preload (Load the next page async while still showing the current page)

$.get("page.php", function (data) {
    document.open();
    document.write(data);
    document.close();
    window.history.pushState("Title", "Title", "/page.php");
    $.cache = {};
}, "html");

Or should I better stay with a regular redirect?

window.location = "page.php";

The next page contains a fullscreen video and a soundtrack (audio)

Thanks.

Answer 1

You can use Ajax to load next page asynchronous. Here is an example of a simple Ajax request using the GET method, written in JavaScript.

AJAX stands for Asynchronous JavaScript and XML, and for the XMLHttpRequest object to behave as AJAX, the async parameter of the open() method has to be set to true: xhr.open('get', 'send-ajax-data.php', true);

get-ajax-data.js:

// This is the client-side script.

// Initialize the Ajax request.
var xhr = new XMLHttpRequest();
xhr.open('get', 'send-ajax-data.php', true); // `true` makes the request asynchronous

// Track the state changes of the request.
xhr.onreadystatechange = function () {
    var DONE = 4; // readyState 4 means the request is done.
    var OK = 200; // status 200 is a successful return.
    if (xhr.readyState === DONE) {
        if (xhr.status === OK) {
            alert(xhr.responseText); // 'This is the returned text.'
        } else {
            alert('Error: ' + xhr.status); // An error occurred during the request.
        }
    }
};

// Send the request to send-ajax-data.php
xhr.send(null);

And at the end you can use below codes to reload or redirect page data:

document.getElementById("myDiv").innerHTML = xhr.responseText;