Ajax & JavaScript | Ограничение запросов, вызванных пользователем

Question

В настоящее время я играю с некоторым кодом Ajax. Я придумал этот сценарий, чтобы попытаться отразить мою проблему, чтобы убедиться, что вы, эксперты, можете представить решение, спасибо.

Сценарий:

У меня есть кнопка HTML, как так: <p onclick="ajax_call();">Click</p>. При нажатии на эту кнопку, он запустит запрос AJAX на страницу 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 
    } 
} 

Это тогда делает некоторые PHP код в файле php_script и возвращает $output

Проблема:

Страница php_script, вызываемая через AJAX, очень тихая и делает несколько вызовов API и базы данных, что делает страницу «медленной» для загрузки (что совершенно нормально). Однако на данный момент, пока страница ждет ответа (он все еще делает php и еще ничего не возвращает), пользователь может технически спамить кнопку для запуска многих вызовов ajax. В идеале это просто вызовет стресс на сервере, и мне нужно, чтобы после того, как запрос был отложен и не вернулся, вы не можете делать дальнейшие запросы.

Как я могу достичь чего-то подобного?

Заранее спасибо, с нетерпением жду ваших решений/консультации

ТАКЖЕ:

По многочисленным просьбам, это то, что я имею в виду - см картину, когда я спамить нажмите на кнопку, чтобы запустить несколько запросов в то время как первый один не сделал (не возвращено еще ничего):

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.

Если вы используете сеансы на сервере, сеанс будет заблокирован при обработке запроса, поэтому вы будете обрабатывать только один запрос на пользователя за раз. Тем не менее, запросы могут стоять в очереди (возможно, это то, что отображается в ваших данных вкладки сетей?), Чтобы вы могли дополнить это ограничение скорости, например IP-адрес.

Answer 3

Это все может быть полезно:

Добавить этот HTML

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

И это стили:

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

И сценарий часть: После того, как 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';