Fail to load .php files with ajax in Javascript

Instead of using jQuery here I am trying to use Javascript to load several .php files to display data from the database according to the user’s input. Below is an example of how my functions are like (and most of which are similar):

let userinput = document.getElementById("input");

button_1.onclick = function()
{
    let xhr = new XMLHttpRequest();
    xhr.open("GET", "ajax/highscore.php?q="+userinput.value, true);
    // send the "username" to $_POST['q'] defined in "highscore.php"
    // and then display the data according to the user's input

    xhr.addEventListener("load", (event) =>
    {
        if (xhr.readyState == 4 && xhr.status == 200) { // display data accordingly }
    });
    xhr.send();
}       

and below is a screenshot of the index in the server. “sample.html” is the page for displaying all the data.

However, when inspecting “sample.html”, I cannot see the “ajax” folder loaded, nor any other .php files even when I changed the path “ajax/( ).php” to “( ).php”. Could anyone explain why this will happen? (In the second screenshot because the parent folder contain my server’s name so I covered it)

Answer

The browser dev tools (the inspect method you are using) do not list files in your server folder. It only displays files used to load your sample.html page, like CSS, JS files directly referenced (with <script> tags, and so on), etc.

Your .php files might still work, if your javascript ajax method calls them accordingly and they are reachable by the user’s browser.