www.webdeveloper.com
Results 1 to 10 of 10

Thread: Handle too many XMLHttpRequests?

  1. #1
    Join Date
    May 2012
    Posts
    16

    Handle too many XMLHttpRequests?

    On my page, I use a simple PHP script called every time a button i pushed. I use this to keep track of how many people has clicked the button. Basically, it just +1 to a table in MySQL.

    The problem is that with my code, users can click the button too fast and max out the number of XMLHttpRequests a browser handles. This results in that not all of the number of clicks are recorded.

    This is my code that requests the PHP file:

    Code:
    function count() {
        var xmlHttp = getXMLHttp(); // XHR object
    	xmlHttp.open("POST", "counter.php", true);
    	xmlHttp.send(null);
    }
    If you need more info etc, ask!

    Is there a way to fix this problem?

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb

    In the onclick function of the button click, disable the button until you have processed the counter increment.
    Then re-enable the button.

  3. #3
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    He means something like this:

    Code:
    <input type='button' id='voteBtn' value='Click'>
    
    <!-- BELOW the button -->
    
    <script type='text/javascript'> 
    
    function count( btn, firstValue ) 
    {
      var xmlHttp = getXMLHttp(); // XHR object
      xmlHttp.open("POST", "counter.php", true);
      
      xmlHttp.onreadystatechange = function()
      { 
        if( this.readyState == 4 )
        {      
          btn.value = firstValue;  
          btn.disabled = false;
        }
      }
      
      xmlHttp.send(null);
    }
    
    document.getElementById( 'voteBtn' ).onclick = function()
    {
       this.disabled = true;   
       count( this, this.value );
       this.value = "WAIT"; 
    }
    
    </script>
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  4. #4
    Join Date
    May 2012
    Posts
    16
    Quote Originally Posted by Logic Ali View Post
    He means something like this:

    Code:
    <input type='button' id='voteBtn' value='Click'>
    
    <!-- BELOW the button -->
    
    <script type='text/javascript'> 
    
    function count( btn, firstValue ) 
    {
      var xmlHttp = getXMLHttp(); // XHR object
      xmlHttp.open("POST", "counter.php", true);
      
      xmlHttp.onreadystatechange = function()
      { 
        if( this.readyState == 4 )
        {      
          btn.value = firstValue;  
          btn.disabled = false;
        }
      }
      
      xmlHttp.send(null);
    }
    
    document.getElementById( 'voteBtn' ).onclick = function()
    {
       this.disabled = true;   
       count( this, this.value );
       this.value = "WAIT"; 
    }
    
    </script>
    I've tried this before. The problem is that then the user cannot click the button anymore. There has to be a diffrent way...

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Exclamation

    Quote Originally Posted by WayneISWayne View Post
    I've tried this before. The problem is that then the user cannot click the button anymore. There has to be a diffrent way...
    Show some code. At least what you tried before since it did not work for you.
    The button become re-enabled after the ajax load, so there is probably an error in your code.
    Code:
    function count( btn, firstValue ) 
    {
      var xmlHttp = getXMLHttp(); // XHR object
      xmlHttp.open("POST", "counter.php", true);
      
      xmlHttp.onreadystatechange = function()
      { 
        if( this.readyState == 4 )
        {      
          btn.value = firstValue;  
          btn.disabled = false;
        }
      }
    What kind of errors are you getting in the error console?

  6. #6
    Join Date
    May 2012
    Posts
    16
    Quote Originally Posted by JMRKER View Post
    Show some code. At least what you tried before since it did not work for you.
    The button become re-enabled after the ajax load, so there is probably an error in your code.
    Code:
    function count( btn, firstValue ) 
    {
      var xmlHttp = getXMLHttp(); // XHR object
      xmlHttp.open("POST", "counter.php", true);
      
      xmlHttp.onreadystatechange = function()
      { 
        if( this.readyState == 4 )
        {      
          btn.value = firstValue;  
          btn.disabled = false;
        }
      }
    What kind of errors are you getting in the error console?
    While the button is deactivated the user cannot click it. This is a problem. Obviously, I'm not ONLY making a counter. Something else also happens when you click the button. I don't think we are on the same page here.

    What I want exactly is to allow the user to click the button freely, while it counts.

  7. #7
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Ok, here is my attempt.
    The requests are buffered after a certain amount of active requests to the server, and will be processed when requests have been completed (this is assuming that every single click must notify the server, otherwise a collective notification could happen instead):

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Buffer Clicks</title>
    
    		<style type="text/css">
    		</style>
    
    		<script type="text/javascript">
    
    			var SendClick = (function()
    			{
    				var
    					limit    = 5, //HOW MANY REQUESTS AT A TIME
    					url      = 'counter.php', //WHERE TO SEND THE REQUEST
    					buffer   = 0,
    					requests = 0;
    
    				function notify()
    				{
    					var http;
    					if (buffer && requests < limit) {
    						++requests; --buffer;
    						http = new XMLHttpRequest();
    						http.onreadystatechange = function() {if (http.readyState === 4) {--requests; notify();}};
    						http.open('POST', url, true);
    						http.send('');
    
    					}
    					document.getElementById('status').innerHTML = 'Buffered Clicks: ' + buffer + '<br />Active Requests: ' + requests;
    				}
    				return function() {++buffer; notify();};
    			}());
    
    		</script>
    
    	</head>
    	<body>
    
    		<button onclick="SendClick();">Click Me</button>
    		<div id="status" style="padding: 10px;">Waiting for click.</div>
    
    	</body>
    </html>
    As a test the PHP page it was querying had a 1 second delay so the buffer could be seen:

    counter.php
    PHP Code:
    <?php

        sleep
    (1);

    ?>
    Last edited by bionoid; 08-20-2012 at 03:10 PM.
    JavaScript: Learn | Validate | Compact | bionoid

  8. #8
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    POST and ajax is heavy, use self-stacking <img> pings to GET your php page...
    Code:
    <button onclick="new Image().src='counter.php';">Count  +1</button>

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Exclamation

    Quote Originally Posted by WayneISWayne View Post
    While the button is deactivated the user cannot click it. This is a problem. Obviously, I'm not ONLY making a counter. Something else also happens when you click the button. I don't think we are on the same page here.

    What I want exactly is to allow the user to click the button freely, while it counts.
    It should be deactivated until the document is ready for additional processing (and counting).

    I thought in an earlier post you did not want the user clicking to his heart's content
    as that screwed with your counter value. Are you changing the rules as you go?
    Now you want them to be able to click and count to a limit, but do the load only once?

    Yes, I do believe we are not on the same page here.

  10. #10
    Join Date
    May 2012
    Posts
    16
    Quote Originally Posted by JMRKER View Post
    It should be deactivated until the document is ready for additional processing (and counting).

    I thought in an earlier post you did not want the user clicking to his heart's content
    as that screwed with your counter value. Are you changing the rules as you go?
    Now you want them to be able to click and count to a limit, but do the load only once?

    Yes, I do believe we are not on the same page here.
    Ok. I might have been a little too quick when writing this. Since I'm sending requests for every time the button is pushed, not all the requests are sent. (I've seen that by clicking 10 times, while it only counted 8 or 6).

    It's actually a good idea to deactivate the button if it was not to interfare with the experience when using my Web App.

    I tried this: When using sync instead of async, the program was lagging. Reason: JavaScript only supports using one thread.

    Web Workers. But it does not yet support mayor browsers like IE9.

    My only suggestion is long-polling using COMET or something?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles