With every click of a button, hundreds of AJAX requests are generated in rapid succession

Question

With every click of a button, hundreds of AJAX requests are generated in rapid succession

Here's a situation I'm facing - every page involves an ajax request. I managed to enable JavaScript to run on each ajax requested page. Out of curiosity, I started testing my code by opening Chrome's developer tools to peek behind the scenes.

I discovered some glitches, where pressing the button on page 1 triggers the same amount of requests as the number of times the button is pressed. However, when I try this on page 2 or 3, it results in hundreds of additional ajax requests within a short time frame. This behavior needs to be fixed. While I want JavaScript enabled on all pages, I need to prevent multiple ajax requests and ensure that the button's actions correspond appropriately.

Take a look at this .gif screenshot to understand better: https://i.sstatic.net/5LR5O.gif

Below are the code files:

page_1.php

<script>
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;

    /*<Allow JS on the requested page>*/
    var exJs = document.getElementsByTagName('script');
    var enableAll = null;
    for (var i = 0; i < exJs.length; i++) {
        enableAll += exJs[i].innerHTML;
    }
    eval(enableAll);
    /*</Allow JS on the requested page>*/

    }
}
xhr1.open('POST','page_2.php');
xhr1.send();
}

});

</script>

<button id='executeAjax1'>Execute 1</button>

<h1>Page 1</h1>

<div id='ajax1'></div>

...

This type of issue can lead to browser freezes, which is not ideal. Thus, I am seeking a more efficient method to allow JavaScript while preventing the creation of excess ajax requests after multiple button clicks. Page 1 operates as intended, avoiding the cascade of requests seen on page 2 and 3. Identifying a solution to address this anomaly is crucial to maintain a seamless browsing experience.

javascript ajax

Answer 1

Answer №1

Generate a variable that stores the specific id where each page's request will take place, for instance

var ajaxDivId= document.getElementById('ajaxDivId');

This is what I'm explaining in detail

page_1.php

<script>

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;

    /*<Allow JS on the requested page>*/

    //Target the AJAX response div to allow JS to run in that div
    var ajax1= document.getElementById('ajax1');
    //

    var exJs= ajax1.getElementsByTagName('script');
    var enableAll = exJs.length;
    for(var i=0; i < enableAll; i++){
    eval(exJs[i].text);
}

    /*</Allow JS on the requested page>*/

    }
}
    xhr1.open('POST','page_2.php');
    xhr1.send();
}

});

</script>

<button id='executeAjax1'>Execute 1</button>

<h1>Page 1</h1>

<div id='ajax1'></div>

page_2.php

<script>

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;

    /*<Allow JS on the requested page>*/

    //Target the AJAX response div to allow JS to run in that div
    var ajax2= document.getElementById('ajax2');
    //

    var exJs= ajax2.getElementsByTagName('script');
    var enableAll = exJs.length;
    for(var i=0; i < enableAll; i++){
    eval(exJs[i].text);
}

    /*</Allow JS on the requested page>*/

    }
}
    xhr2.open('POST','page_3.php');
    xhr2.send();
}

</script>

<button id='executeAjax2'>Execute 2</button>

<h1>Page 2</h1>

<div id='ajax2'></div>

page_3.php

<script>

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;

    /*<Allow JS on the requested page>*/

    //Target the AJAX response div to allow JS to run in that div
    var ajax3= document.getElementById('ajax3');    
    //

    var exJs= ajax3.getElementsByTagName('script');
    var enableAll = exJs.length;
    for(var i=0; i < enableAll; i++){
    eval(exJs[i].text);
}

    /*</Allow JS on the requested page>*/

    }
}
    xhr3.open('POST','page_4.php');
    xhr3.send();
}

</script>

<button id='executeAjax3'>Execute 3</button>

<h1>Page 3</h1>

<div id='ajax3'></div>

page_4.php

<h1>Page 4</h1>

This technique revolves around executing the script tags solely based on the designated div id where the ajax request output occurs. I just verified

this recently so now you can trigger an ajax request depending on how many times you click the button on those pages, allowing you to execute JS based on those requested pages. Remember, using eval() can be risky.

Answer 2

Generate a variable that stores the specific id where each page's request will take place, for instance

var ajaxDivId= document.getElementById('ajaxDivId');

This is what I'm explaining in detail

page_1.php

<script>

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;

    /*<Allow JS on the requested page>*/

    //Target the AJAX response div to allow JS to run in that div
    var ajax1= document.getElementById('ajax1');
    //

    var exJs= ajax1.getElementsByTagName('script');
    var enableAll = exJs.length;
    for(var i=0; i < enableAll; i++){
    eval(exJs[i].text);
}

    /*</Allow JS on the requested page>*/

    }
}
    xhr1.open('POST','page_2.php');
    xhr1.send();
}

});

</script>

<button id='executeAjax1'>Execute 1</button>

<h1>Page 1</h1>

<div id='ajax1'></div>

page_2.php

<script>

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;

    /*<Allow JS on the requested page>*/

    //Target the AJAX response div to allow JS to run in that div
    var ajax2= document.getElementById('ajax2');
    //

    var exJs= ajax2.getElementsByTagName('script');
    var enableAll = exJs.length;
    for(var i=0; i < enableAll; i++){
    eval(exJs[i].text);
}

    /*</Allow JS on the requested page>*/

    }
}
    xhr2.open('POST','page_3.php');
    xhr2.send();
}

</script>

<button id='executeAjax2'>Execute 2</button>

<h1>Page 2</h1>

<div id='ajax2'></div>

page_3.php

<script>

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;

    /*<Allow JS on the requested page>*/

    //Target the AJAX response div to allow JS to run in that div
    var ajax3= document.getElementById('ajax3');    
    //

    var exJs= ajax3.getElementsByTagName('script');
    var enableAll = exJs.length;
    for(var i=0; i < enableAll; i++){
    eval(exJs[i].text);
}

    /*</Allow JS on the requested page>*/

    }
}
    xhr3.open('POST','page_4.php');
    xhr3.send();
}

</script>

<button id='executeAjax3'>Execute 3</button>

<h1>Page 3</h1>

<div id='ajax3'></div>

page_4.php

<h1>Page 4</h1>

This technique revolves around executing the script tags solely based on the designated div id where the ajax request output occurs. I just verified

this recently so now you can trigger an ajax request depending on how many times you click the button on those pages, allowing you to execute JS based on those requested pages. Remember, using eval() can be risky.

Answer 3

Answer №2

The main cause of this issue is due to the fact that you are continuously adding the responses from the calls into your webpage, generating new script tags and then running through all of them every time you click, leading to an exponential growth:

document.getElementById('ajax3').innerHTML= xhr3.responseText;

/*<Allow JS on the requested page>*/    
    var exJs = document.getElementsByTagName('script');
    var enableAll = null;
    for (var i = 0; i < exJs.length; i++) {
        enableAll += exJs[i].innerHTML;
    }
    eval(enableAll);
/*</Allow JS on the requested page>*/

If you analyze the content of your code instead of just looking at the network tab, you will be able to understand what happens after clicking the button for the first time.

To address this issue, I suggest a different approach: rather than immediately appending the response content to your DOM, only add the non-script HTML elements first and then execute the eval function only on the current response's script tag.

There are various ways to achieve this, including using regex to capture the script tag content, storing it, removing the script tag, adding the remaining content to your DOM, and finally running eval() on the stored script.

Answer 4

The main cause of this issue is due to the fact that you are continuously adding the responses from the calls into your webpage, generating new script tags and then running through all of them every time you click, leading to an exponential growth:

document.getElementById('ajax3').innerHTML= xhr3.responseText;

/*<Allow JS on the requested page>*/    
    var exJs = document.getElementsByTagName('script');
    var enableAll = null;
    for (var i = 0; i < exJs.length; i++) {
        enableAll += exJs[i].innerHTML;
    }
    eval(enableAll);
/*</Allow JS on the requested page>*/

If you analyze the content of your code instead of just looking at the network tab, you will be able to understand what happens after clicking the button for the first time.

To address this issue, I suggest a different approach: rather than immediately appending the response content to your DOM, only add the non-script HTML elements first and then execute the eval function only on the current response's script tag.

There are various ways to achieve this, including using regex to capture the script tag content, storing it, removing the script tag, adding the remaining content to your DOM, and finally running eval() on the stored script.

With every click of a button, hundreds of AJAX requests are generated in rapid succession

Answer №1

Answer №2

Similar questions

The functionality of this code is optimal in Chrome and Firefox, yet it encounters issues in IE

Angular 2 is all about managing validation messages within controls

What is the best way to change the inner text of an HTML element without causing it to resize or impacting its overflow?

using Javascript to calculate motion based on specified angle

Jumbling a word by shuffling its letters into a random order

Basic HTML code that displays either one or two columns based on the width of the screen

What seems to be the issue with loading this particular file into my JavaScript code?

The error message from the mongoose plugin is indicating a problem: it seems that the Schema for the model "Appointment" has not been properly registered

Tips on creating an infinite loop for multiple functions using jquery

Get a numerical value from a JSON object

JavaScript appendChild method not functioning properly with dynamically created image elements in JavaScript code

Error message: "Issue with Jointjs library on Node.js server - Uncaught ReferenceError: Joint is not recognized"

Show the subscription response data in Angular

Steps to bring an image forward on a canvas to enable its onclick function

`How can I enable the download attribute feature on Safari browser?`

Return to the main page by clicking on the link #id

Can you explain the concept of ".el" as it relates to JavaScript, HTML, and jQuery?

The Vue component seems to be missing the definition of $v for Vuelidate

Adding Multiple Items to an Express Endpoint

Executing Ajax requests sequentially within a .each loop.Each Ajax request triggered one after the