1

ユースケース：アンカータグがクリックされたら、このアイテムがクリックされたという情報をサーバーに送信します。ここでこのフィドルを見つけることができます：http：//jsfiddle.net/nXYQP/5/

ここで、アンカータグをすばやくクリックすると、クリックした回数と同じ数のハンドラーが呼び出されていることがわかります。ただし、ハンドラーから送信されるAJAXリクエストの数はかなり少なくなります。

Chromeデベロッパーツールを使用して、送信されたリクエストの数を確認します。F12キーを押して開発者ツールを開き、[ネットワーク]タブに移動し、アンカータグをクリックして、送信されたリクエストの数を確認します。

私はこの振る舞いを推論することができません。少し光を当ててください。

これが私のコードです：

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

Javascriptコード：

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++;
});​

</ p>

4

1 に答える 1

1

私の賭けは、キャンセルXMLHttpRequestsは（iframeの）現在のページを離れた結果​​であるということです。

イベントがデフォルトの動作をトリガーする（つまり、参照されるドキュメントを取得する）ことを妨げないため、click現在のページがアンロードされると、キューに入れられたすべてのイベントハンドラーコールバックがキャンセルされます（AJAX呼び出し自体は非同期ですが、イベントハンドラのコールバックはそうではありません）。

編集
実際には、単一のドメインへの同時リクエストの数には制限があります。この制限はブラウザによって課され、かなり異なります（2と6が最も一般的です）。

browserscopeのネットワークテストを参照してください。

編集2
ああそしてところで。キャッシュヒットが原因でブラウザがリクエストをキャンセルしないようにするPOST代わりに、を使用することをお勧めします。GETまた、どうしてもすべてのクリック数をカウントする必要がある場合は、を呼び出すときにasyncフラグをに設定する必要があります。このようにして、すべてのリクエストがキューに入れられ、次々に実行されます。falsenew_request.open

クイックフィックス：

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;
});​
于 2012-11-30T10:30:17.393 に答える