AjaxとJavaScript |ユーザーによってトリガーされたリクエストを制限する

Question

私は現在、いくつかのAjaxコードで遊んでいます。私はこのシナリオを試してみて、あなたの専門家が解決策を提示できるかどうかを確認するために問題をミラーリングします。ありがとうございます。

シナリオ：<p onclick="ajax_call();">Click</p>：

私はそうのようなHTMLのボタンを持っています。これは、その後php_scriptファイルにいくつかのPHPコードを実行し

function ajax_launch(){ 
    xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = ajax_launch_callback; 

    xmlhttp.open("POST", "/php_script", true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xmlhttp.send(); 
} 

function ajax_launch_callback(){ 
    if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
     // code to do something once response is here successfulyl 
    } 
} 

をして$output

問題返します：このボタンをクリックすると、それはこのようにPHPのページにAJAX要求を起動します

をAJAX経由で呼び出されるphp_scriptページは静かで重く、いくつかのAPIとデータベース呼び出しによってページが読み込まれるのが「遅い」（これは完璧です）。しかし、現時点では、ページが応答を待っている間（まだPHPを実行していて、何も返されていない）、ユーザーは技術的にボタンをスパムして多くのajax呼び出しを開始できます。理想的には、これは単にサーバーに負荷をかけるだけで、要求が保留され、戻ってこないと、それ以上の要求はできません。

どうすればこのようにすることができますか？あなたのソリューションを楽しみにして事前に

おかげで、/相談ALSO

：複数の要求によって

、これは私が何を意味するかである - 私はいくつかの要求を起動するボタンをクリックしてスパムときの写真を見ます最初のものは行われていない一方で（まだ何も返されません）：

Image of chrome debugger (networks tab)

が

Answer 1

あなたはこれを試すことができます。

var xmlhttp; 
function ajax_launch() { 
    if (xmlhttp && xmlhttp.readyState == 4 || !xmlhttp) { 
     xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = ajax_launch_callback; 

     xmlhttp.open("POST", "/php_script", true); 
     xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     xmlhttp.send(); 
    } 
} 

function ajax_launch_callback() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     // code to do something once response is here successfulyl 
    } 
} 

Answer 2

ここで言及したJavaScriptソリューションとリンクされた質問には素晴らしい機能がありますが、スパマーは必ずしもブラウザを使用していない可能性があり、JavaScriptが無効になっている可能性があります。

サーバー上でセッションを使用すると、要求が処理されているときにセッションがロックされるため、一度に1ユーザーにつき1つの要求しか処理しません。しかし、リクエストはキューに入れられます（つまり、ネットワークのタブデータに表示されるものでしょうか？）ので、たとえばIPアドレスなどのレート制限でそれを補うことができます。

Answer 3

この事は役に立つかもしれません：

#screenblocker { 
    position:absolute; 
    left:0px; 
    top:0px; 
    right:0px; 
    bottom:0px; 
    background-color:#ffffff; 
    opacity:0.4; 
    filter:alpha(opacity=40); 
    z-index:9999999; 
} 

、スクリプト部分：

は

<div style="display: none;" id="screenblocker">&nbsp;</div> 

そして、このスタイルこのHTMLを追加AJAX呼び出した後

var e = document.getElementById('screenblocker'); 
    if (e != null) { 
     e.style.display = 'block'; 
     setTimeout("document.getElementById('screenblocker').style.display = 'none';", 5000);//considering 5 seconds to load, you can block longer if needed 
    } 

とAjaxの成功に：

document.getElementById('screenblocker').style.display = 'none';