title: Almost each button press creates 100's of ajax request by every button press, in a short period of time
body: <p>So I have a problem here i'm in a situation that involves every page having a ajax request. I found a way to allow Java Script to be able to run on each ajax requested page so </p>
  
  <p>recently out of curiosity I started to test my code to see if there were any glitches so I opened up chromes developer tools to see what is happening behind the </p>
  
  <p>scenes and I found some glitches so when I press page 1 button every time it request the page the same amount of times I press the button so that is normal. But if I do that on page 2 it creates </p>
  
  <p>multiple or 100's of ajax requests more than the amount I press the button in a short period of time. Same thing with page 3 so how can I resolve this. I basically want to allow java script on each requested page I just want to be able to </p>
  
  <p>prevent the multiple ajax request I want to be able to show the same amount of times I press the button each time.</p>
  
  <p>Here is a .gif screenshot to show you guys what I mean.</p>
  
  <p><a href="https://i.stack.imgur.com/5LR5O.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5LR5O.gif" alt=".gif-screenshot"></a></p>
  
  <p>Here is the code files</p>
  
  <p><strong>page_1.php</strong></p>
  
  <pre><code>&lt;script&gt;
  
  document.addEventListener('DOMContentLoaded', function(){
  
  var execute_sendAjax1 = document.getElementById('executeAjax1');
    execute_sendAjax1.addEventListener('click', sendAjax1);
  
  function sendAjax1(){
  var xhr1= new XMLHttpRequest();
  
  xhr1.onreadystatechange = function(){
      if(xhr1.readyState === 4){
          document.getElementById('ajax1').innerHTML= xhr1.responseText;
  
      /*&lt;Allow JS on the requested page&gt;*/    
          var exJs = document.getElementsByTagName('script');
          var enableAll = null;
          for (var i = 0; i &lt; exJs.length; i++) {
              enableAll += exJs[i].innerHTML;
          }
          eval(enableAll);
      /*&lt;/Allow JS on the requested page&gt;*/
  
      }
  }
      xhr1.open('POST','page_2.php');
      xhr1.send();
  }
  
  });
  
  &lt;/script&gt;
  
  &lt;button id='executeAjax1'&gt;Execute 1&lt;/button&gt;
  
  &lt;h1&gt;Page 1&lt;/h1&gt;
  
  &lt;div id='ajax1'&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>page_2.php</strong></p>
  
  <pre><code>&lt;script&gt;
  
  var execute_sendAjax2 = document.getElementById('executeAjax2');
    execute_sendAjax2.addEventListener('click', sendAjax2);
  
  function sendAjax2(){
  var xhr2= new XMLHttpRequest();
  
  xhr2.onreadystatechange = function(){
      if(xhr2.readyState === 4){
          document.getElementById('ajax2').innerHTML= xhr2.responseText;
  
      /*&lt;Allow JS on the requested page&gt;*/    
          var exJs = document.getElementsByTagName('script');
          var enableAll = null;
          for (var i = 0; i &lt; exJs.length; i++) {
              enableAll += exJs[i].innerHTML;
          }
          eval(enableAll);
      /*&lt;/Allow JS on the requested page&gt;*/
  
      }
  }
      xhr2.open('POST','page_3.php');
      xhr2.send();
  }
  
  &lt;/script&gt;
  
  &lt;button id='executeAjax2'&gt;Execute 2&lt;/button&gt;
  
  &lt;h1&gt;Page 2&lt;/h1&gt;
  
  &lt;div id='ajax2'&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>page_3.php</strong></p>
  
  <pre><code>&lt;script&gt;
  
  var execute_sendAjax3 = document.getElementById('executeAjax3');
    execute_sendAjax3.addEventListener('click', sendAjax3);
  
  function sendAjax3(){
  var xhr3= new XMLHttpRequest();
  
  xhr3.onreadystatechange = function(){
      if(xhr3.readyState === 4){
          document.getElementById('ajax3').innerHTML= xhr3.responseText;
  
      /*&lt;Allow JS on the requested page&gt;*/    
          var exJs = document.getElementsByTagName('script');
          var enableAll = null;
          for (var i = 0; i &lt; exJs.length; i++) {
              enableAll += exJs[i].innerHTML;
          }
          eval(enableAll);
      /*&lt;/Allow JS on the requested page&gt;*/
  
      }
  }
      xhr3.open('POST','page_4.php');
      xhr3.send();
  }
  
  &lt;/script&gt;
  
  &lt;button id='executeAjax3'&gt;Execute 3&lt;/button&gt;
  
  &lt;h1&gt;Page 3&lt;/h1&gt;
  
  &lt;div id='ajax3'&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>page_4.php</strong></p>
  
  <pre><code>&lt;h1&gt;Page 4&lt;/h1&gt;
  </code></pre>
  
  <p>I believe the problem lies where JS is enable in the ajax request so i'm just wondering what would be a better method to allow JS but prevent creating 100's of ajax request in a very short period of time after a few button clicks done on any of </p>
  
  <p>these pages page_2.php page_3.php but page_1.php button does not do that so that page button works how I want it to work. Meaning page_1.php don't creates 100's of request in a very short period of time due to a few button presses so why is that ? <strong>This kind of problems causes the browser to freeze so I know that is not normal.</strong></p>