title: Ajax Error: index.html:17 Uncaught InvalidStateError: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED.sendAjax
body: <p>On running index.html on local host using xampp it gives error:
  index.html:17 Uncaught InvalidStateError: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED.sendAjax @ index.html:17onclick @ index.html:28</p>
  
  <p>Here is index.html file:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;Show Ajax&lt;/title&gt;
  
  &lt;script&gt;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
      if(xhr.readyState === 4){
              document.getElementById('ajax').innerHTML = xhr.responseText;   
      }
      xhr.open('GET', 'data.html');
  
  };
  function sendAjax(){
          xhr.send();
          document.getElementById('load').style.display = "none";
  
      }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;h1&gt;Bring on ajax&lt;/h1&gt;
  &lt;button id="load" onClick="sendAjax()"&gt;bring it&lt;/button&gt;
  &lt;div id="ajax"&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is data.html file:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;p&gt; Hello I'm Ajax, came here on your request&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>