I have this function to call a website based on a click

   function toURI(event, that) {
        event.preventDefault();

        const url = that.getAttribute('href');
        var request = new XMLHttpRequest();
        request.open("GET", url, true);
        request.onload = function () {
            if (this.status >= 200 && this.status < 400) {
                // Success!
                document.querySelector("#mainInnerBody").innerHTML = this.response;
                // console.log(this.response);
            } else {
                // We reached our target server, but it returned an error
            }
        };
        request.send();

        //This is where we update the address bar with the 'url' parameter
        window.history.pushState("object", "New Title", url);
    }

When i run this function on every

<a href="http://localhost/new/nav/index.php?bank=option_1"  onclick="toURI(event, this)">
     <div class="dropdown-list__item">Option 1</div>
</a>

And here is what it is fetching in the network tab every time-

Now every time it is requesting css/html everything except the javascript file and that javascript file is inside the body.