Ajax загружает кликнувшую ссылку и затухает контент?

Question

У меня есть сайт, где под нагрузкой непрозрачность тела изменяется для постепенного появления эффекта.

Но когда щелкают ссылку на другую страницу сайта - я хочу, чтобы контент "исчезал", в то время как новый контент загружался и исчезал без обновления страницы. Как мне этого добиться? Является ли ниже шаг в правильном направлении?

Заранее спасибо!

HTML

<ul class="menu">
    <li class="selected"><a href="index.html">Home</a></li>
    <li><a href="brand_elements.html">Brand Elements</a></li>
    <li><a href="scenes.html">Scenes</a></li>
    <li><a href="live_action.html">Live Action</a></li>
</ul>

Javascript

(function(){

    const body = document.querySelector("body");

    window.addEventListener("load", function(){
        body.classList.add("active");
    });

    var pageSelect = document.querySelectorAll("ul.menu li a");

    var changePage = function(page){

        var ajax = new XMLHttpRequest();

        ajax.open("GET", page, true);
        ajax.send();

        body.classList.remove("active");
    }

    for (page of pageSelect){
        page.addEventListener("click", function(e){
            changePage(this);
        });
    }

})();