Question

我想要一些javascript + ajax来检查用户名的可用性。我有一些麻烦...

让我们想象一下当我们在模糊事件上检查用户名可用性时的情况。

如果我们遇到这种情况怎么办？

a）用户输入了用户名“kir”
b）专注于另一个元素
c）ajax请求已启动（请求“kir”用户名的可用性）
d）用户关注用户名并再输入一个字母“kirA”（来自c的回复）尚未收到）
e）专注于另一个元素
f）ajax请求已启动（请求“kirA”用户名的可用性）
g）我们从c）和telling user that username is available, but it not (because we're telling about "kir", but not "kirA")获得答案。

我应该怎样做以避免这种情况？使用某种随机生成的令牌来检查答案的有效性？

谢谢

Answer 1

创建新XHR时应该是XHR。

var ongoingRequest = null;

function test() {
   if(ongoingRequest != null) {
      ongoingRequest.abort();
   }

   ongoingRequest = $.ajax( ... );
}

当您收到回复时，您可以添加额外的功能以再次验证：

$.ajax({
   ...
   data: { query: query },
   success: (function(q) {
       return function(result) {
          if( $('#myTxt').val() != q) {
             // the textbox value is not the same as the query was
             // at the time of creating this response!
             return false;
          }

          ...
       }
   })(query)
});

Answer 2

您需要在XHR请求对象及其包含的用户名查询之间进行某种映射。或者在服务器对AJAX查询的响应中，也包括用户名。回复可能如下：

{
    username: "kir",
    available: false
}

在回调中，验证当前文本框值是否与返回的用户名相同。如果是，则显示错误，否则忽略该响应。

Answer 3

你只需要async-request-variable的正确范围！
如果您创建一个新请求，只需检查是否已有，如果是：将其设置为null /取消它，然后继续！

另一种变体是：阻止ui，加载一个微调器图标，阻止输入，......（不是很好的解决方案......）

修改
我认为ajax / ...是一件好事，但当它归结为为请求添加越来越多的属性时，你应该有点小心。当你能提出更好的解决方案时（甚至不需要像userA is not available那样明确的ui交互）

Answer 4

这就是我用于此目的：

<强> JAVASCRIPT：

$(document).ready(function() {
    $("#username").blur(function() {
        //remove all the class add the messagebox classes and start fading
        $("#username_status").removeClass().addClass('username_status').text('Checking username').fadeIn("slow");
        //verify entered username
        $.post("path to php file",{ user_name:$(this).val() } ,function(data) {
            // username not avaiable
            if (data=='no') {
                $("#username_status").fadeTo(200,0.1,function() {
                    $(this).html('Username in use').addClass('username_status_error').fadeTo(900,1);
                });
            // username available
            }else if (data=='yes') {
                $("#username_status").fadeTo(200,0.1,function() {
                    $(this).html('username available').addClass('username_status_ok').fadeTo(900,1);
                });
            // username field empty
            }else if (data=='empty') {
                $("#username_status").fadeTo(200,0.1,function() {
                    $(this).html('username field is empty').addClass('username_status_error').fadeTo(900,1);
                });
            // username check error
            }else{
                $("#username_status").fadeTo(200,0.1,function() {
                    $(this).html('fail to check username').addClass('username_status_error').fadeTo(900,1);
                });
            }
        });
    });
});

使用AJAX发布的PHP文件：

<?php
    require_once ('db_connect.php'); // include the database connection
    if ($_POST['user_name']!="") {
        // check if username is available from login table
        $query = sprintf(" select * from login where username = '%s' ", mysql_real_escape_string($_POST['user_name']));
        if (mysql_query($query)) {
            if (mysql_num_rows(mysql_query($query))>0) {
                echo "no";
            }else{
                echo "yes";
            }
        }else{
            echo "error";
        }
    }else{
        echo "empty";
    }
?>

AND HTML FORM：

<form name="login-form" id="login-form" class="clients_form" method="post" action="form post link">
  <ol>
    <li>
      <label for="login_usr" class="OF_name">Username:<span class="mandatory">*</span><br></label>
      <input tabindex="1" accesskey="u" name="username" type="text" maxlength="30" id="username">
    </li>
    <li>
      <label for="login_pwd" class="OF_email">Password:<span class="mandatory">*</span><br></label>
      <input tabindex="2" accesskey="p" name="password" type="password" maxlength="15" id="password">
    </li>
    <li class="buttons">
      <input class="btn" tabindex="3" accesskey="l" type="submit" name="cmdlogin" value="Login">
      <input class="btn" name="cancel" type="button" value="Cancel" onclick="location.href='cancel link'">
    </li>
  </ol>
  <br><br><br>
</form>

这是我为您展示的一个简单示例，但应该正常工作......

当用户离开用户名时字段，AJAX将发布PHP文件验证数据库，如果是用户再次返回用户名字段我们离开它，Ajax将发布。

希望这有帮助！

Answer 5

您可以在ajax正在进行时禁用输入。

Answer 6

或者，您可以“g）我们从c）获得答案并告诉用户用户名kir 不可用”

Answer 7

Anurag的第一个建议（保留请求数据和查询）对于返回用户名的一般情况更为理想。如果您发送了几个长参数，则不希望它们不必要地使用带宽并增加响应时间。

快速举例，记录您发送的内容：

function checkUserName(){
    var uName=$('#uname').val(); // get it immediately stored into the variable
    $.ajax( {url: '...', data: {username: uName}, success: function(data){
        if(data.is_available)
            alert(uName + " is available."); // this instance of the variable is still in scope, even the checkUserName function has been re-called since
    });
}

这段代码仍然可以优化，但你明白了。如果你经常使用这种东西，你应该在javascript（闭包等）中阅读范围。

检查用户名可用性？

7 个答案: