title: Fail to load .php files with ajax in Javascript
body: <p>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):</p>
  <pre><code>let userinput = document.getElementById(&quot;input&quot;);
  
  button_1.onclick = function()
  {
      let xhr = new XMLHttpRequest();
      xhr.open(&quot;GET&quot;, &quot;ajax/highscore.php?q=&quot;+userinput.value, true);
      // send the &quot;username&quot; to $_POST['q'] defined in &quot;highscore.php&quot;
      // and then display the data according to the user's input
  
      xhr.addEventListener(&quot;load&quot;, (event) =&gt;
      {
          if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) { // display data accordingly }
      });
      xhr.send();
  }       
  </code></pre>
  <p>and below is a screenshot of the index in the server. &quot;sample.html&quot; is the page for displaying all the data.</p>
  <p><a href="https://i.stack.imgur.com/kkGVt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kkGVt.png" alt="screenshot1" /></a></p>
  <p>However, when inspecting &quot;sample.html&quot;, I cannot see the &quot;ajax&quot; folder loaded, nor any other .php files even when I changed the path &quot;ajax/(   ).php&quot; to &quot;(   ).php&quot;. Could anyone explain why this will happen? (In the second screenshot because the parent folder contain my server's name so I covered it)
  <a href="https://i.stack.imgur.com/87p4s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/87p4s.png" alt="screenshot2" /></a></p>