Question

Usecase: When an anchor tag is clicked, send the information to server that this item has been clicked. Here you can find this fiddle: http://jsfiddle.net/nXYQP/5/

Now, When i do some fast clicks on anchor tag, I can see the handler is getting called equal to the number of times i have clicked. But the number of AJAX requests sent from the handler is quite less in number.

Use Chrome Developer Tool to check the number of requests sent.
Press F12 to open developer tool and navigate to Network tab and then click on anchor tag to see the number of requests it sent.

I am unable to reason this behavior. Please put some light on it.

Here is my code:

<a id="inc" href="http://www.google.com"> Click me </a>
<div id="container"> Click count will be updated here </div>

Javascript code:

var text = "Click no:-";
var counter = 0;

$("#inc").click(function() {
     var new_request = new XMLHttpRequest();                      
     var new_serverURL = "http://www.google.com";
     new_request.open('GET',new_serverURL,true);
     new_request.send(null);

    $("#container").html("<p>" + text + " " + counter + "</p>");
    counter++;
});​

​

Answer 1

My bet is that the canceled XMLHttpRequests are a result of leaving the (iframe’s) current page.

Since you do not prevent the click event from triggering its default behavior (i.e. getting the referenced document) all the queued up event handler callbacks are being canceled once the current page unloads (keep in mind that though the AJAX calls themselves are asynchronous, the execution of the event handler callbacks is not).

EDIT
There actually is a limit on the number of simultaneously requests to a single domain. This limit is imposed by the browser and does vary quite a bit (2 and 6 being the most common).

See the network test from browserscope.

EDIT 2
Oh and btw. you might want to use POST instead of GET to be sure the browser won’t cancel the request due to a cache hit. And if you absolutely need to make every click count, you should set the async flag to false when calling new_request.open. This way, all the requests will get queued up and run one after the other.

Quick fix:

var text = "Click no:-";
var counter = 0;

$("#inc").click(function() {
     var new_request = new XMLHttpRequest();

     var new_serverURL = "http://www.google.com";

     new_request.open('POST',new_serverURL,true);
     new_request.send(null);

    $("#container").html("<p>" + text + " " + ++counter + "</p>");
    // Prevent the link's default behavior
    return false;
});​