title: load the content of html file into the div
body: <p>I am a beginner. The problem I am dealing with is probably very simple to solve ;) I am working on a web page where the text content is loaded from external html files into the div. This is done when a user clicks on a menu item.</p>
  
  <p>This is my code html :</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/menu.css"&gt;
  &lt;script type="text/javascript" src="js/js.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
            &lt;div&gt;
                        &lt;ul&gt;      
                            &lt;li&gt;&lt;a id="teachers" href="#" name="teachers" onclick="getdata()"&gt;
                              Teachers
                            &lt;/li&gt; 
                          &lt;/ul&gt;
            &lt;/div&gt;
  
            &lt;div id="page"  name="" &gt;
              bla bla bla ...
            &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is my code ajax:</p>
  
  <pre><code>var _xhr;
  
  function getdata(){
  
      _xhr= new XMLHttpRequest();
      _xhr.onreadystatechange=callback;
      _xhr.open("POST", "teachers.html", true);
      _xhr.send();
  
      function callback(){
          var _target = document.getElementById("page");
          _target.innerHTML=_xhr.responseText;
      }
  
  }
  </code></pre>
  
  <p>I would like to load the html file (teachers.html) into the div (id="page") when I click on the link (Teachers)</p>
  
  <p>Please could someone help me.</p>
  
  <p>Thanks in advance.</p>