当我发送太多请求时，它会失败，整个网站将停止工作

Question

我正在创建一个注册页面，用户只能在其中选择可用的用户名，即数据库中不存在的用户名。所以我为此使用 ajax.. 但是当我一次输入太多请求时，它会失败并且我的网站停止工作.. 一段时间后一切都会好起来，但 5-10 分钟它会停止工作。

网站出现错误：-

此页面无法正常工作 events.collegespike.com 没有发送任何数据。 ERR_EMPTY_RESPONSE

从数据库中获取数据的代码：

<?php

if (isset($_POST['user_name']) && $_POST['user_name'] != '') {
    $response = array();
    $username = mysqli_real_escape_string($db, $_POST['user_name']);
    $sql = "select username from login_master where username='" . $username . "'";
    $res = mysqli_query($db, $sql);
    $count = mysqli_num_rows($res);
    if ($count > 0) {
        $response['status'] = false;
        $response['msg'] = 'Username already exists.';
    } else if (strlen($username) < 6 || strlen($username) > 15) {
        $response['status'] = false;
        $response['msg'] = 'Username must be 6 to 15 characters';
    } else if (!preg_match("/^[a-zA-Z1-9]+$/", $username)) {
        $response['status'] = false;
        $response['msg'] = 'Use alphabet and numeric only.';
    } else {
        $response['status'] = true;
        $response['msg'] = 'Username is available.';
    }

    echo json_encode($response);
}
?>

Ajax 代码：-

//including jquery 2.0.3
<script type="text/javascript" charset="utf8" src="https.://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>

//jquery code to fetch data
<script type="text/javascript">
$(document).ready(function() {
    $('#username').keyup(function() {
        var usercheck = $(this).val();
        $('#usercheck').html('<img src="images/loading.gif" width="150" />');
        $.post("signup/check1.php", {
            user_name: usercheck
        }, function(data) {
            if (data.status == true) {
                $('#usercheck')
                   .parent('div')
                   .removeClass('has-error')
                   .addClass('has-success');

            } else {
                $('#usercheck')
                   .parent('div')
                   .removeClass('has-success')
                   .addClass('has-error');
            }
            $('#usercheck').html(data.msg);
        }, 'json');
    });
});
</script>

HTML 代码：- //获取输入并显示输出的代码

//taking input
<input class="check-form"  name="user_name" id="username" type="text"  placeholder="User Name (please enter unique username)">

//showing output
<span id="usercheck" class="help-block"></span>
<span><i class="ti-check"></i></span>

Answer 1

我认为问题是由于托管服务器设置而出现的。如果您发出过多的 post 请求，服务器会因为设置而阻止您 60 到 120 秒。

尝试使用 GET 请求而不是 POST 请求，我认为它会解决问题。

$(document).ready(function() {
    $('#username').keyup(function() {
        var usercheck = $(this).val();
        $('#usercheck').html('<img src="images/loading.gif" width="150" />');
        $.get("signup/check1.php", {
            user_name: usercheck
        }, function(data) {
            if (data.status == true) {
                $('#usercheck')
                   .parent('div')
                   .removeClass('has-error')
                   .addClass('has-success');

            } else {
                $('#usercheck')
                   .parent('div')
                   .removeClass('has-success')
                   .addClass('has-error');
            }
            $('#usercheck').html(data.msg);
        }, 'json');
    });
});

Answer 2

我认为您的问题是同时向服务器发出太多请求。

我注意到您正在使用 .keyup() 然后触发 AJAX 请求。这意味着如果我输入用户名Jonathan，它将在一秒钟内触发 8 个请求。这会造成瓶颈。

如果您打开控制台，您会注意到单个字符（单个请求）可以正常工作，在您收到第一个字符的响应后输入第二个字符，它会再次工作。然而，快速打字并等待所有人响应是行不通的。您将在控制台中看到它们将不断加载，直到最终超时/无论如何。

我建议您减少要触发的请求，并且仅在按键停止按下 x 毫秒时才触发请求。

解决方案：

延迟 keyup 执行。这是一个纯粹的javascript 解决方案，我在我的应用程序中使用过多次。我已经对其进行了简化和修改，希望能适用于您的情况。

您会注意到delayKeyupExecution() 被调用，我们传递myInput（在您的情况下这是用户名），userNameAjaxCheck 作为回调（这是包含您的ajax 请求的函数）和500 ，这是延迟它的毫秒数。

// Your username input
var myInput = document.getElementById("username");

function userNameAjaxCheck(params) {
  // Your ajax code to check the username
};

// Delay a function from triggering
function delayKeyupExecution(input, callback, delay) {
  var timer = null;
  var params = null; // Anything you want to pass to the callback function (userNameAjaxCheck)

  input.onkeypress = function() { // Equivalent to your .keyup
    if (timer) window.clearTimeout(timer); 
    timer = window.setTimeout( function() {
      timer = null;
      callback(params); // Pass the params you need
    }, delay );
  };

  input = null;
};

// Execute
delayKeyupExecution(myInput, userNameAjaxCheck, 500);