How to make the same transition on navigation links, like YouTube or VKontakte?

Question

AJAX

I've seen transitions done but not much different

let showContent = link => {  
            let [cont, http] = [document.getElementById('contentBody'), createRequestObject()];  
            if(http){  
                http.open('get', link);  
                http.onreadystatechange = () => {  
                    http.readyState == 4 && (cont.innerHTML = http.responseText);  
                }  
                http.send(null);      
            }  
            else document.location = link;  
            }  

        // создание ajax объекта  
        const createRequestObject = () =>{  
            try { return new XMLHttpRequest() }  
            catch(e){  
                try { return new ActiveXObject('Msxml2.XMLHTTP') }  
                catch(e){  
                    try { return new ActiveXObject('Microsoft.XMLHTTP') }  
                    catch(e) { return null; }  
                }  
            }  
        }

<form>  
        <input onclick="showContent('page1.html')" type="button" value="Страница 1">  
        <input onclick="showContent('page2.html')" type="button" value="Страница 2">  
</form>

I posted it on index.html, the pages are rendered there, the location does not change. I need the location to change to the appropriate one (page1.html, for example).

Answer 1

Use jQuery.ajax() to load pages without refresh.